DEV Community: Mohamed Achaq

Build your personal website not portfolio

Mohamed Achaq — Mon, 15 Jan 2024 14:40:24 +0000

Alright, let's get real in the tech space where having your own website is like putting up a sign saying, "I'm here, and I've got skills!" No fluff, just straight talk. So, let's dig into making a website that's as down-to-earth as your go-to coding setup. Ready? Let's dive in!

Unleash Your Personality:

This isn't about being robotic. Your website is where you show the real you. Share the behind-the-scenes of your coding journey—the weird side projects, the tech headaches, and those "aha" moments. Let people see the human side behind the code. Forget about being a code-spewing machine; let your personality come through!

Create an Interactive Experience:

No one's here for a snooze-fest of static project displays. Let's spice things up. Add some life to your website with interactive elements—live demos, animated snippets, or even throw in a game you hacked together on a coding binge. Make your website a place where visitors don't just watch; they get hands-on and experience your coding skills for themselves.

Blog Your Insights:

Forget the formalities of a portfolio. Your website is where you share the real talk about your wins. Dive into a blog and share your thoughts on the latest tech trends, recount your coding adventures, or drop some wisdom about the struggles every coder faces. It's not just about flaunting projects; it's about having real conversations.

Showcase Your Gear, Tech Stacks and Tools:

Sure, portfolios list your tech skills, but let's make it interesting. Create a space to geek out on your favorite tools, gear, languages, and frameworks. Share stories about why you love each tech stack, toss in some anecdotes, and let your visitors see the tech enthusiast with a passion for every line of code.

Embrace the Unconventional:

Portfolios are like plain toast—boring and easily forgettable. Break free from the norm! Add a surprise, hide a joke, or throw in a quirky animation that pops up when visitors least expect it. Your website should be as unique as your coding style. A touch of the unconventional adds the spice that makes it memorable.

Keep It Dynamic:

Your personal website isn't a relic; it's a living, breathing thing. Keep it dynamic by tossing in fresh content regularly, unveiling new projects, and sharing the ongoing saga of your coding journey. Show the world that you're not just coasting on past achievements but actively pushing the limits of what you can do.

So, there you have it—your personal website is not some cookie-cutter portfolio; it's a canvas begging for your unique touch. Break free from the mundane, keep it real, and let it be a true reflection of who you are.

Some of the things I talked about in this articles I haven't implemented yet on my own personal website, so don't feel the rush to finish yours in a hurry take your time building your own digital garden.

Your digital presence awaits, go ahead and start building your personal website! 🚀

Featured Personal Websites:

achaq.dev - My personal website
emilkowal.ski - Emil Kowalski
leerob.io - Lee Robinson
b-r.io - Brian Ruiz
rauno.me - Rauno Freiberg

Einstein's special relativity, Distributed systems and state machines

Mohamed Achaq — Fri, 15 Dec 2023 12:23:43 +0000

Prologue

In the early days of computing, we mostly relied on non-distributed systems to tackle computational challenges. This setup was pretty straightforward - all the computers in these systems shared the same memory, making it easy to keep track of what each part of the system was doing. However, as technology advanced, distributed systems came into play, revolutionizing the way we approach computing. With this evolution, though, came a new level of complexity, especially in terms of monitoring the states across the multiple machines that make up these distributed systems.

Enter the world of special relativity, a cornerstone theory in physics, grounded in the concept of perspective. This groundbreaking theory, which delves into how physical laws are consistent across different observers, no matter how fast they're moving, has been pivotal in understanding objects zipping close to the speed of light. It's all about the intricate relationship between time, space, and energy.

Interestingly, it's this very idea of perspective from special relativity that has significantly influenced the development of state machines in computing. State machines emerged as a solution to the tricky problem of tracking the state within a distributed system. By borrowing the concept of perspective from physics, computer scientists have been able to design systems that manage the complex interactions and state changes within these sprawling networks of machines. This fusion of ideas from physics and computing has led to more robust and efficient distributed systems, illustrating how cross-disciplinary insights can drive technological advancement.

Special Relativity: Shaping Our View of Time and Space

In 1905, Albert Einstein revolutionized our understanding of the physical world with his theory of special relativity. This theory introduced a radical notion: our perceptions of time and space are not absolute but relative and vary depending on the observer's velocity. At the heart of this theory are two fundamental concepts: the constancy of the speed of light in a vacuum and the principle of relativity, which states that the laws of physics are the same in all inertial frames of reference.

One of the most famous equations derived from special relativity is E = mc^2, where E is energy, m is mass, and c is the speed of light. This equation links energy and mass, illustrating how they are interconvertible. Another critical aspect of special relativity is time dilation, expressed by the equation t' = t ÷ √(1 - v²/c²), where t' is the time interval measured by an observer in motion at velocity v, t is the time interval measured by a stationary observer, and c is the speed of light. This equation shows how time can stretch or contract depending on the relative speeds of the observers.

Applying Special Relativity to Distributed Computing

In the realm of distributed computing, the principles of special relativity find a unique application. Just as special relativity deals with the relativity of time and space from different perspectives, distributed systems must manage varying states across different nodes, each with its perspective or 'frame of reference.'

For instance, consider a distributed database system where data is replicated across multiple nodes. The state of this data at any given moment can be analogous to an observer's frame of reference in special relativity. Due to network latency and asynchrony, different nodes might have different 'views' of the data state, much like how different observers perceive time and space differently in special relativity.

Mathematically, we can draw parallels between the time dilation formula and the concept of logical clocks in distributed systems. Logical clocks, as proposed by Leslie Lamport, help in ordering events in a distributed system. If we consider t' as the timestamp according to a particular node's logical clock and t as a universal 'real-time' timestamp, adjustments in t' can be made to account for network delays and processing times, analogous to adjusting for relative velocities in special relativity.

The Role of State Machines in Distributed Computing

Introduction to State Machines in Computing

State machines, a fundamental concept in computer science, offer a structured way to model the status and transitions of a system. In the context of distributed computing, state machines are invaluable in tracking and managing the state of a system across multiple nodes. Each state represents a specific configuration of the system, and transitions between states are triggered by certain events or conditions. This concept is particularly powerful in distributed systems, where maintaining a coherent state across different nodes is challenging.

Special Relativity and Distributed Computing

The analogy to special relativity in physics is intriguing when considering state machines in distributed systems. Just as special relativity emphasizes the relativity of time and space based on the observer's frame of reference, distributed systems must manage state changes from the perspective of different nodes. Each node in a distributed system might have its own view of the "current" state, much like observers moving at different speeds perceive time and space differently.

Ensuring Consistency and Order

One of the biggest challenges in distributed systems is ensuring consistency across nodes. State machines help tackle this by defining clear rules for state transitions. However, in a distributed environment, these transitions need to be synchronized across multiple machines. This synchronization is akin to aligning perspectives in special relativity—ensuring that all nodes have a consistent view of the system's state, even though they operate independently.

Dealing with Asynchrony and Partition Tolerance

In distributed systems, network delays and partitions can lead to nodes being temporarily out of sync. State machines help in managing these scenarios by defining clear states and transitions that can be used to reconcile differences when nodes communicate again. This is similar to how special relativity accounts for the effects of speed and gravity on time and space, allowing for a unified understanding despite differing perspectives.

Practical Applications in Distributed Systems

State machines are used in various applications within distributed systems, such as consensus algorithms (like Raft or Paxos), which ensure that all nodes agree on a certain state or value. They are also crucial in database replication, where changes made in one part of the system need to be consistently and reliably replicated across all nodes.

The Future of State Machines in Distributed Computing

As distributed systems continue to evolve and become more complex, the role of state machines is likely to become even more significant. They offer a way to manage the inherent complexity of these systems, providing a framework for reliable, consistent, and efficient computation across multiple nodes. This will be crucial in the development of new technologies, such as distributed ledger technologies and advanced networking systems.

In conclusion, state machines in distributed systems draw a fascinating parallel to the principles of special relativity in physics. They offer a robust framework for managing complex states and transitions in a distributed environment, ensuring consistency, reliability, and efficiency in a world where computing is increasingly decentralized and distributed.

Simplified Real-World Examples of State Machines

Example 1: Consensus in Distributed Ledger Technology (Blockchain)

Problem Context:

In distributed ledger technology, such as blockchain, achieving consensus among various nodes is critical. This ensures that all participants agree on the ledger's state despite having no central authority. The challenge is to maintain consistency and reliability in a decentralized network.

State Machine Solution:

A typical solution is to use a consensus algorithm like Proof of Work or Proof of Stake. Here, we'll consider a simplified model of a Proof of Stake algorithm using a state machine.

Basic Implementation:

This is a basic implementation to illustrate the example (in Typescript)

enum ConsensusState {
  Idle,
  Proposing,
  Voting,
  Validating,
  ConsensusReached,
  Conflict,
}

interface Block {
  id: string;
  data: string;
  isValid: boolean;
}

class BlockchainNode {
  id: number;
  state: ConsensusState = ConsensusState.Idle;
  ledger: Block[] = [];
  peers: BlockchainNode[] = [];
  proposedBlock: Block | null = null;
  receivedVotes: Map<string, boolean> = new Map();

  constructor(id: number, peers: BlockchainNode[]) {
    this.id = id;
    this.peers = peers;
  }

  proposeBlock(block: Block) {
    this.state = ConsensusState.Proposing;
    this.proposedBlock = block;
    console.log(`Node ${this.id} proposing new block:`, block.id);
    this.broadcastProposal(block);
  }

  broadcastProposal(block: Block) {
    this.peers.forEach((peer) => peer.receiveProposal(block));
  }

  receiveProposal(block: Block) {
    if (
      this.state === ConsensusState.Idle ||
      this.state === ConsensusState.Voting
    ) {
      const vote = this.evaluateBlock(block);
      this.voteOnBlock(block.id, vote);
    }
  }

  evaluateBlock(block: Block): boolean {
    // Placeholder for block evaluation logic
    return block.isValid; // Assuming blocks have an 'isValid' property
  }

  voteOnBlock(blockId: string, vote: boolean) {
    this.state = ConsensusState.Voting;
    console.log(`Node ${this.id} voting on block ${blockId}: ${vote}`);
    this.peers.forEach((peer) => peer.receiveVote(blockId, vote));
  }

  receiveVote(blockId: string, vote: boolean) {
    if (!this.receivedVotes.has(blockId)) {
      this.receivedVotes.set(blockId, vote);
    }

    if (this.receivedVotes.size >= this.peers.length / 2) {
      this.validateVotes(blockId);
    }
  }

  validateVotes(blockId: string) {
    this.state = ConsensusState.Validating;
    console.log(`Node ${this.id} validating votes for block:`, blockId);

    const positiveVotes = Array.from(this.receivedVotes.values()).filter(
      (vote) => vote
    ).length;
    if (positiveVotes > this.peers.length / 2) {
      this.state = ConsensusState.ConsensusReached;
      this.ledger.push(this.proposedBlock!);
      console.log(`Node ${this.id}: Block added to ledger:`, blockId);
    } else {
      this.state = ConsensusState.Conflict;
      console.log(
        `Node ${this.id}: Conflict in reaching consensus on block:`,
        blockId
      );
    }
  }
}

// Simulation setup
const totalNodes = 5;
let nodes = Array.from(
  { length: totalNodes },
  (_, i) => new BlockchainNode(i, [])
);
nodes.forEach((node) => (node.peers = nodes.filter((n) => n.id !== node.id)));

// Simulating a block proposal
let sampleBlock = { id: "Block1", data: "Sample Data", isValid: true };
nodes[0].proposeBlock(sampleBlock);

// Simulating a block conflict
sampleBlock = { id: "Block2", data: "Sample Data", isValid: false };
nodes[0].proposeBlock(sampleBlock);

// Simulating a block consensus
sampleBlock = { id: "Block3", data: "Sample Data", isValid: true };
nodes[0].proposeBlock(sampleBlock);
nodes[1].proposeBlock(sampleBlock);
nodes[2].proposeBlock(sampleBlock);
nodes[3].proposeBlock(sampleBlock);

In this basic blockchain consensus example, the state machine effectively orchestrates the process of block proposal and agreement within a distributed network of nodes. Each node begins in an Idle state, ready to initiate or respond to actions. When a node proposes a new block, it transitions into the Proposing state, broadcasting the block to other nodes. This action is fundamental to initiating the consensus process, as it invites peer nodes to review and vote on the block. The node then enters the Voting state, where it, along with other nodes, votes on the proposed block's validity. This collective voting is critical in achieving consensus across the network.

Following the voting, the node transitions to the Validating state, where it assesses the collected votes. This stage is key to determining the block's acceptance by evaluating whether it has received a majority of positive votes. If the block is favorably received, the node shifts to the ConsensusReached state, and the block is added to the blockchain ledger, marking a successful consensus. Alternatively, if the block fails to obtain majority support, the node enters a Conflict state, reflecting a lack of consensus and signaling the need for further resolution. This basic state machine model illustrates a structured and transparent approach to reaching consensus in a blockchain network, ensuring that each block added to the ledger is democratically validated and agreed upon by the participating nodes.

Example 2: Leader Election in a Distributed System

Problem Context:

In many distributed systems, especially in clusters, selecting a leader is essential for coordinating actions among nodes. Without a leader, it could be challenging to make decisions or synchronize actions.

State Machine Solution:

The Raft consensus algorithm is often used for leader election in distributed systems. It provides a way to elect a leader in a distributed cluster and handle leader failures.

Basic Implementation:

This is a basic implementation to illustrate the example (in Typescript)

enum NodeState {
  Follower,
  Candidate,
  Leader,
}

class DistributedNode {
  id: number;
  state: NodeState = NodeState.Follower;
  votesReceived: number = 0;
  nodesInCluster: DistributedNode[];

  constructor(id: number, nodesInCluster: DistributedNode[]) {
    this.id = id;
    this.nodesInCluster = nodesInCluster;
  }

  startElectionProcess() {
    if (this.state !== NodeState.Leader) {
      this.becomeCandidate();
      this.requestVotes();
    }
  }

  becomeCandidate() {
    this.state = NodeState.Candidate;
    this.votesReceived = 1; // Vote for self
    console.log(`Node ${this.id} becoming candidate`);
  }

  requestVotes() {
    this.nodesInCluster.forEach((node) => {
      if (node.id !== this.id) {
        node.receiveVoteRequest(this.id);
      }
    });
  }

  receiveVoteRequest(candidateId: number) {
    if (this.state === NodeState.Follower) {
      console.log(`Node ${this.id} voting for Node ${candidateId}`);
      this.nodesInCluster
        .find((node) => node.id === candidateId)
        ?.receiveVote();
    }
  }

  receiveVote() {
    this.votesReceived++;
    console.log(`Node ${this.id} received vote, total: ${this.votesReceived}`);
    if (this.votesReceived > this.nodesInCluster.length / 2) {
      this.becomeLeader();
    }
  }

  becomeLeader() {
    this.state = NodeState.Leader;
    console.log(`Node ${this.id} elected as leader`);
    // Perform leader's responsibilities
  }

  simulateNetworkFailure() {
    if (this.state === NodeState.Leader) {
      console.log(`Node ${this.id} encountered a network failure`);
      this.state = NodeState.Follower;
      // Trigger re-election process in other nodes
      this.nodesInCluster.forEach((node) => node.startElectionProcess());
    }
  }
}

// Simulation setup
const totalNodes = 5;
let nodes = Array.from(
  { length: totalNodes },
  (_, i) => new DistributedNode(i, [])
);
nodes.forEach((node) => (node.nodesInCluster = nodes));

// Starting the election process in one of the nodes
nodes[0].startElectionProcess();

// Simulating a network failure in the leader node
setTimeout(
  () =>
    nodes
      .find((node) => node.state === NodeState.Leader)
      ?.simulateNetworkFailure(),
  5000
);

In this basic Leader Election example, the state machine is central to facilitating an intricate and adaptive election process within a distributed cluster. All nodes begin in a Follower state, participating passively in the cluster and not initiating any election processes. The transition to the Candidate state occurs when a node decides to vie for leadership. In this state, the node self-votes and requests votes from other nodes, actively seeking consensus within the cluster. This is a crucial stage where the node's candidacy is validated by its peers. If a node receives a majority of votes, it advances to the Leader state, marking a significant shift in its role to one of coordination and decision-making across the cluster.

The process is designed to be democratic and orderly, ensuring a fair election within the cluster. But it's not just about electing a leader; the state machine also ensures the system's resilience. It includes mechanisms to handle unexpected scenarios such as leader failures or network issues. When the current leader faces a failure, it reverts to a Follower state, prompting a new election cycle. This re-election process ensures that the cluster remains operational and consistently managed, despite any disruptions. Such dynamic adaptability is crucial in distributed systems, allowing for seamless leadership transitions and maintaining uninterrupted cluster operations. This reflects the complexities and requirements of real-world distributed environments, where flexibility and robustness are essential for managing and sustaining operational continuity.

Epilogue

As we reach the end of our exploration, it's clear that the worlds of physics and computing are not as separate as they might seem. Einstein's special relativity, a theory that revolutionized our understanding of the cosmos, has also offered profound insights into the realm of computing, particularly in distributed and parallel systems. By adopting the notion of perspective from physics, we've gained invaluable tools for managing and synchronizing complex computing tasks.

This journey from the fundamental laws of the universe to the intricate workings of computer systems illustrates how interdisciplinary approaches can lead to innovative solutions and deeper understanding. The collaboration between physics and computing doesn't just solve practical problems; it also enriches our perspective, encouraging us to think beyond the conventional boundaries of disciplines.

As technology continues to evolve and our understanding of the universe deepens, the intersection of these fields promises even more exciting discoveries and advancements. By embracing the convergence of physics and computing, we open ourselves to a world of endless possibilities, where the principles governing the stars can also illuminate the path to mastering complex computing challenges.

Resources

Disclaimer

This is the result of my own personal research and reflects my individual understanding and interpretation of the subject matter. It is not affiliated with any academic or professional institution, and should not be considered as a substitute for professional or expert advice. The information and views presented are solely based on my independent study and analysis, and I encourage you to critically evaluate and verify the content independently.

How I Created a Programming Language with TypeScript

Mohamed Achaq — Sat, 30 Sep 2023 12:22:00 +0000

Creating a programming language is an exciting and educational project that may not be as challenging as it seems. In this article, I will guide you through the process of developing an interpreted language using TypeScript.

Designing the Language Syntax

Before diving into implementation, you must establish the syntax for your language. My language draws inspiration from various programming languages like Lisp, Rust, and JavaScript. To illustrate the language, here's the famous FizzBuzz program implemented in my language:

(fn fizzBuzz [limit](
  (for [i 1 (+ limit 1)](
    (if (( && (== (% i 3) 0) (!= (% i 5) 0)))
      ((println "Fizz"))
      ((if ((&& (!= (% i 3) 0) (== (% i 5) 0)))
        ((println "Buzz"))
        ((if ((&& (== (% i 3) 0) (== (% i 5) 0)))
          ((println "FizzBuzz"))
          ((println i))
        ))
      ))
    )
  ))
))

(def limit 10)
(fizzBuzz limit)

In this code snippet, we define a function fizzBuzz that takes a limit as an argument. We then define a variable limit and call the function with this value. The function prints numbers from 1 to the specified limit. If a number is divisible by 3, it prints "Fizz." If divisible by 5, it prints "Buzz." If divisible by both 3 and 5, it prints "FizzBuzz."

Implementing the Lexer

The initial step in building an interpreter is crafting a lexer. A lexer transforms the source code into a list of tokens, which will be used by the parser to construct the abstract syntax tree. Here's the lexer code:

I opted to use the 'moo' package for creating the lexer. 'Moo' is a lexer generator for JavaScript, simplifying the task of pattern matching and token extraction.

import moo from 'moo';

const lexer = moo.compile({
  multilineComment: { match: /\\/\\*[^]*?\\*\\//, lineBreaks: true },
  singlelineComment: { match: /\\/\\/.*/, lineBreaks: true },
  keyword: [
    'def',
    'fn',
    'if',
    'else',
    'while',
    'for',
    'class',
    'extends',
    'new',
    'match',
    'return'
  ],
  nativeFn: [
   // ...nativeFunctions like println, readln, etc.
  ],
  return: 'return',
  jsCode: { match: /\\$[^]*?\\$/, lineBreaks: true },
  constructor: /\\.init/,
  methodAccess: /(?:\\.[a-zA-Z_][a-zA-Z0-9_]*)+/,
  binary: /0b[01]+/,
  hex: /0x[0-9a-fA-F]+/,
  boolean: ['true', 'false'],
  number: /0|[1-9][0-9]*/,
  string: /"(?:\\\\["\\\\]|[^\\n"\\\\])*"/,
  hash: '#',
  lp: '(',
  rp: ')',
  lb: '{',
  rb: '}',
  lbk: '[',
  rbk: ']',
  comma: ',',
  colon: ':',
  semicolon: ';',
  dot: '.',
  operator: [
    // ...operators like +, -, *, /, etc.
  ],
  identifier: /[a-zA-Z_][a-zA-Z0-9_]*/,
  ws: { match: /\\s+/, lineBreaks: true },
  nl: { match: /\\n/, lineBreaks: true }
});

class Lexer {
  lexer: moo.Lexer;
  tokens: moo.Token[];
  code: string;

  constructor(code: string) {
    this.lexer = moo.compile(spec);
    this.code = code;
    this.tokens = [];
  }

  tokenize() {
    this.lexer.reset(this.code);
    let tokens: any[] = [];
    let token: any;
    while ((token = this.lexer.next())) {
      tokens.push(token);
    }
    this.tokens = tokens;
    return this;
  }
}

export default Lexer;

You can utilize the lexer like this:

const lexer = new Lexer(code).tokenize()
const tokens = lexer.tokens; // returns an array of tokens of type moo.Token

That concludes the lexer implementation, and we can proceed to the parser.

Developing the Parser

The parser takes the tokens from the lexer and constructs an abstract syntax tree (AST). The AST is a tree representation of the source code, with nodes representing different code elements. To make the parser modular and extensible, I implemented a plugin system.

First, I created an object containing all the node types I wanted to support:

const NodeTypes = {
  Program: 'Program',
  Binary: 'Binary',
  Hex: 'Hex',
  Number: 'Number',
  String: 'String',
  Boolean: 'Boolean',
  List: 'List',
  Map: 'Map',
  Set: 'Set',
  BinaryLiteral: 'BinaryLiteral',
  HexLiteral: 'HexLiteral',
  NumberLiteral: 'NumberLiteral',
  StringLiteral: 'StringLiteral',
  BooleanLiteral: 'BooleanLiteral',
  ListLiteral: 'ListLiteral',
  MapLiteral: 'MapLiteral',
  SetLiteral: 'SetLiteral',
  Fn: 'Fn',
  FnCall: 'FnCall',
  NativeFnCall: 'NativeFnCall',
  Result: 'Result',
  NativeFnResult: 'NativeFnResult',
  Reference: 'Reference',
  If: 'If',
  While: 'While',
  For: 'For',
  Match: 'Match',
  BinaryExpression: 'BinaryExpression',
  UnaryExpression: 'UnaryExpression',
  BinaryExpressionLiteral: 'BinaryExpressionLiteral',
  UnaryExpressionLiteral: 'UnaryExpressionLiteral',
  JsCode: 'JsCode',
  Return: 'Return'
} as const;

Next, I defined types to prototype the parser:

I created a Node type with a type property, representing the node's type.

interface Node {
  type: keyof typeof NodeType;
}

I defined a Program node with a body property, which is an array of nodes representing the program's statements.

interface Program extends Node {
  type: typeof NodeType.Program;
  body: Node[];
}

Then, I introduced an IParserPlugin interface with matcher and handler functions. The matcher function takes a parser and returns a boolean, indicating if the plugin should handle the current token. The handler function processes the token and returns a node.

interface IParserPlugin<T extends Node = Node> {
  matcher: (parser: Parser) => boolean;
  handler: (parser: Parser) => T;
}

I defined a NodeType type to infer the node type from the ParserPlugin array we pass to the parser.

type NodeType<T extends keyof typeof NodeType> = typeof plugins extends IParserPlugin<infer R>[]
  ? Extract<R, { type: T }>
  : never;

Finally, I created a utility function to throw errors with proper formatting.

import { Token } from 'moo';

const debug = true;

function error(message: string, token: Token, input: string) {
  const lines = input.split('\\n');
  const line = lines[token.line - 1];
  const col = token.col;
  const arrow = ' '.repeat(col - 1) + '^';

  if (debug) {
    throw new Error(
      `Artemis Parser Error: ${message} at line ${token.line} column ${token.col}\\n${line}\\n${arrow}`
    );
  }

  console.error(
    `Artemis Parser Error: ${message}\\nat line ${token.line} column ${token.col}\\n${line}\\n${arrow}`
  );
  process.exit(1);
}

The parser class was designed as follows:

import { Token } from 'moo';
import IParserPlugin from '../types/parser-plugin';
import NodeTypes from '../node/node-types';
import Program from '../types/program';
import error from '../error';
import plugins from '../plugins';
import Lexer from '@artemis-lang/lexer';

class Parser {
  tokens: Token[];
  current: number;
  plugins: IParserPlugin[];
  input: string;
  constructor(lexer: Lexer) {
    this.tokens = this.init(lexer.tokenize().tokens);
    this.input = lexer.code;
    this.current = 0;
    this.plugins = plugins;
  }

  init(tokens: moo.Token[]) {
    return tokens.filter(
      (v) =>
        v.type !== 'ws' &&
        v.type !== 'nl' &&
        v.type !== 'multilineComment' &&
        v.type !== 'singlelineComment'
    );
  }

  isAtEnd() {
    return this.current >= this.tokens.length;
  }

  isAtStart() {
    return this.current <= 0;
  }

  peek() {
    return this.tokens[this.current];
  }

  previous() {
    return this.tokens[this.current - 1];
  }

  advance() {
    if (!this.isAtEnd()) this.current++;
    return this.previous();
  }

  match(type: string, value?: string) {
    if (this.isAtEnd()) return false;
    if (value) return this.peek().type === type && this.peek().value === value;
    return this.peek().type === type;
  }

  consume(type: string, message: string) {
    if (this.match(type)) return this.advance();
    throw error(message, this.peek(), this.input);
  }

  plugin(plugin: IParserPlugin) {
    this.plugins.push(plugin);
  }

  add(...plugins: IParserPlugin[]) {
    this.plugins.push(...plugins);
  }

  next() {
    if (!this.isAtEnd()) return this.tokens[this.current++];
    return this.tokens[this.current];
  }

  nextBy(n: number) {
    if (!this.isAtEnd()) return this.tokens[this.current + n];
    return this.tokens[this.current];
  }

  nextByType(n: number) {
    return this.nextBy(n).type;
  }

  parse() {
    const program: Program = {
      type: NodeTypes.Program,
      body: []
    };

    while (!this.isAtEnd()) {
      program.body.push(this.parseExpression());
    }

    return program;
  }

  parseExpression() {
    for (const plugin of this.plugins) {
      if (plugin.matcher(this)) return plugin.handler(this);
    }
    throw error('Unexpected token', this.peek(), this.input);
  }
}

The parser class has a parse method that parses the tokens and returns a Program node. The parseExpression method is the main method of the parser. It loops through the plugins and calls the matcher function of each plugin. If the matcher function returns true, it calls the handler function of the plugin and returns the node. If none of the plugins match, it throws an error.

Let's define a plugin to parse strings:

import NodeTypes from '../../node/node-types';
import ParserPlugin from '../../parser-plugin';

const stringPlugin = new ParserPlugin(
  (parser) => {
    return parser.match('string');
  },
  (parser) => {
    return {
      type: NodeTypes.StringLiteral,
      value: parser.consume('string', 'Expected string').value
    };
  }
);

export default stringPlugin;

The matcher function checks if the current token type is string. If it is, it returns true. The handler function returns a StringLiteral node with the value of the string.

And now we can do the same thing for other types of tokens like numbers, booleans, etc, and simply add them to the parser and we can have a fully functional parser with the ability to add new nodes without having to change the parser itself.

// import all the plugins

const plugins = [
// ...all the plugins
];

export default plugins;

And we can use it like this:

import plugins from './plugins';

const parser = new Parser(lexer);
parser.add(...otherPlugins);
const ast = parser.parse();

And that's pretty much it for the parser. Now we can move on to the interpreter.

Implementing the Interpreter

The interpreter takes the abstract syntax tree and executes it basically. Essentially, it traverses the tree and executes the nodes.

Before we start implementing the interpreter, we need an environment. An environment is a map of variables and their values. We need an environment to store the variables and their values. We also need to be able to create new environments and to be able to access the parent environment. So I created an Environment class:

class Environment {
  private values: { [key: string]: any } = {};
  private returnValue: any = undefined;

  constructor(private parent?: Environment) {}

  getParent(): Environment | undefined {
    return this.parent;
  }

  set(name: string, value: any): void {
    this.values[name] = value;
  }

  setToParent(name: string, value: any): void {
    if (this.parent) {
      this.parent.set(name, value);
    }
  }

  getFromParent(name: string): any {
    if (this.parent) {
      return this.parent.get(name);
    }
    throw new Error(`Variable '${name}' not found.`);
  }

  setReturn(value: any): void {
    this.returnValue = value;
  }

  getReturn(): any {
    return this.returnValue;
  }

  get(name: string): any {
    if (name in this.values) {
      return this.values[name];
    }
    if (this.parent) {
      return this.parent.get(name);
    }
    throw new Error(`Variable '${name}' not found.`);
  }

  getNested(root: string, keys: string[]) {
    let value = this.get(root) as Record<string, any>;
    for (let key of keys) {
      value = value[key];
    }
    return value;
  }
}

export default Environment;

The Environment class maintains a map of variables and their values. It allows for variable storage, retrieval, and scoping.

Also we need to have a native functions implementation so we can have functions like println, readln, etc. So I created a INativeFunction interface:

interface INativeFunction<T extends string, U extends any[], R extends any> {
  name: T;
  fn: (interpreter: Interpreter, ...args: U) => R;
}

Then I implemented the NativeFunction class from this interface:

class NativeFn<T extends string, U extends any[], R extends any>
  implements INativeFunction<T, U, R>
{
  public name: T;
  public fn: (interpreter: Interpreter, ...args: U) => R;
  constructor(name: T, fn: (interpreter: Interpreter, ...args: U) => R) {
    this.name = name;
    this.fn = fn;
  }
}

The NativeFn class is a versatile way to define native functions. It has a name property representing the function's name and an fn property representing the actual JavaScript function that will be executed when the native function is called.

With native functions defined, we can set them in the global environment of the interpreter. Here's an example of how you can define and load native functions:

import NativeFn from './native-fn';

const println = new NativeFn('println', (_interpreter, args) => {
  if (args) {
    process.stdout.write(args.join(' ') + '\\n');
  }
});

export default println;

The println function takes an interpreter and some arguments. It prints out the arguments to the console. Now we can define all the native functions we need and set them in the global environment of the interpreter.

const nativeFns = [
  // ...all the native functions
];
function loadNative(interpreter: Interpreter) {
  for (const nativeFn of nativeFns) {
    interpreter.native(nativeFn.name, nativeFn.fn.bind(null, interpreter));
  }
}

The loadNative function iterates through the native functions and adds them to the interpreter's global environment.

Now, let's move on to the interpreter's implementation:

export default class Interpreter {
  private globalEnv: Environment;

  constructor() {
    this.globalEnv = new Environment();
    loadNative(this);
    loadGlobals(this);
  }

  public static interpret(code: string) {
    const lexer = new Lexer(code);
    const parser = new Parser(lexer);
    const ast = parser.parse();
    const interpreter = new Interpreter();
    return interpreter.execute(ast);
  }

  public static ast(code: string) {
    const lexer = new Lexer(code);
    const parser = new Parser(lexer);
    return parser.parse();
  }

  public static tokens(code: string) {
    const lexer = new Lexer(code);
    return lexer.tokenize().tokens;
  }

  get global(): Environment {
    return this.globalEnv;
  }

  native(name: string, fn: (...args: any[]) => any) {
    this.globalEnv.set(name, fn);
  }

  visitProgram(program: Program, env: Environment) {
    let result = null;
    for (const statement of program.body) {
      result = this.visit(statement, env);
    }
    return result;
  }

  execute(program: Program) {
    return this.visitProgram(program, this.globalEnv);
  }

  visit(node: Node, env: Environment): any {
    switch (node.type) {
      case 'String':
        return this.visitString(node as NodeType<'String'>, env);
    // ...other node types cases
      default:
        throw new Error(`Unknown node type '${node.type}'`);
    }
  }

  visitString(node: NodeType<'String'>, env: Environment): any {
    env.set(node.name, String(node.value).replace(/^"(.*)"$/, '$1'));
  }
}

The Interpreter class handles the interpretation process. It offers static methods for interpreting code, obtaining the AST, and tokenizing the source code.

The visit method is central to the interpreter. It switches on the node type and delegates to specific visit methods for different node types.

Native functions can be added to the interpreter's global environment using the native method.

The execute method takes a Program node and executes it by visiting each statement in the program.

For node types that require their own scope (e.g., function calls), a new environment is created with the root environment as its parent. This allows for variable scoping and isolation.

Finally, the loadNative function loads native functions into the global environment, and loadGlobals can be used to load other global variables and functions.

And for each node that requires its own scope, we create a new environment with the root environment as a parent and construct it for example we want to run a function I created an Fn construct

import Interpreter from '..';
import { Node } from '@artemis-lang/parser';
import Environment from '../../env';

class Fn {
  args: string[];
  body: Node[];
  env: Environment;

  constructor(args: string[], body: Node[], env: Environment) {
    this.args = args;
    this.body = body;
    this.env = env;
  }

  call(args: any[]): any {
    const fnEnv = new Environment(this.env);
    this.args.forEach((arg, index) => {
      fnEnv.set(arg, args[index]);
    });
    const interpreter = new Interpreter();
    const call = interpreter.visitProgram(
      {
        type: 'Program',
        body: this.body
      },
      fnEnv
    );

    if (fnEnv.getReturn() !== undefined) {
      this.env.setToParent('return', fnEnv.getReturn());
      return fnEnv.getReturn();
    } else {
      try {
        const val = this.env.get('return');
        this.env.setToParent('return', val);
        return val;
      } catch {
        return call;
      }
    }
  }
}

export default Fn;

And I used it like this:

//...other code
visitFn(node: NodeType<'Fn'>, env: Environment): any {
    const fn = new Fn(node.args, node.body, env);
    env.set(node.name, fn);
  }

visitFnCall(node: NodeType<'FnCall'>, env: Environment): any {
    const fn = env.get(node.name) as Fn;
    const args = node.params.map((arg) => this.visit(arg, env));
    return fn.call(args);
}
//...other code

That's pretty much it for the interpreter, I didn't go into much detail because it's not the main focus of this post. If you want to see the full code, you can check out the GitHub repo of the language, and you can find also some examples there.
To try the language, you can install the package from npm and run it:

npm i -g @artemis-lang/cli
# and then
artemis run <file>.art

Conclusion

Making a programming language is a fun project in which you can learn a lot, And it's not as hard as you might think. In this post I showed you how I wrote an interpreted language with TypeScript. I hope you enjoyed this post. If you have any questions or suggestions, feel free to leave a comment below.

Happy coding!

Dead simple Access Control with iamjs

Mohamed Achaq — Sat, 08 Jul 2023 03:06:28 +0000

As web applications evolve and grow in complexity, the need for advanced security measures also increases. One particular area of focus is the authorization process, which controls who has access to what within an application. But how do you manage this efficiently?

Introducing iamjs, a robust, performance-driven authorization library engineered to streamline your authorization process through a schema-based approach. Composed of several modules such as @iamjs/core, @iamjs/express, @iamjs/koa, @iamjs/next and @iamjs/react, iamjs has something to accommodate a variety of programming environments.

🎉 Features:

iamjs is a feature-rich access control library that offers high performance and a wide range of capabilities. It revolutionizes the authorization process by empowering developers with efficient tools that simplify their workflow. Here are some key features that make iamjs stand out:

🔑 Role-based Access Control: iamjs allows users to effortlessly assign roles with fine-grained permissions, enabling precise control over resource access and security.
🌐 Versatile Programming Environment Support: With iamjs, you can seamlessly integrate access control into various programming environments, including Express.js, Koa.js, Next.js, and React. This flexibility ensures that you can use iamjs across your entire tech stack.
📝 Customizable Permissions: Tailoring access permissions to your specific requirements is a breeze with iamjs. You have the freedom to define and configure custom permissions for individual resources and actions, empowering you to establish a robust security model.
🎯 Type safety: iamjs is built with TypeScript, ensuring type safety and reducing the likelihood of errors in your code.
🧪 Effortless Testing: iamjs is equipped with comprehensive testing tools that simplify the process of validating your authorization logic. This feature ensures that your application remains secure throughout development, giving you peace of mind.

🧠 @iamjs/core:

The @iamjs/core module provides the core logic for the library, empowering developers with a toolkit that makes building access control systems a simpler task.

For instance, let's begin by defining two roles, user and admin, both equipped with specific permissions for different actions and resources:

import { AuthManager, Role, Schema } from "@iamjs/core";

const roles = {
  user: new Role({
    name: "user",
    config: {
      user: {
        scopes: "-r--l",
        custom: {
          ban: false,
        },
      },
      post: {
        scopes: "crudl",
        custom: {
          publish: true,
        },
      },
    },
  }),
  admin: new Role({
    name: "admin",
    config: {
      user: {
        scopes: "crudl",
        custom: {
          ban: true,
        },
      },
      post: {
        scopes: "crudl",
        custom: {
          publish: true,
        },
      },
    },
  }),
};

const schema = new Schema(roles);
const auth = new AuthManager(schema);

With the roles and authorization schema defined, you can now utilize the AuthManager class to perform authorization checks effortlessly:

const isAdminAuthorized = auth.authorize({
  role: "admin",
  actions: ["ban", "create"],
  resources: "user",
}); // true

const isUserAuthorized = auth.authorize({
  role: "user",
  actions: ["read", "create"],
  resources: ["post", "user"],
  strict: true,
}); // false

🚀 @iamjs/express:

For Express.js enthusiasts, @iamjs/express provides seamless integration with the Express.js framework. Leveraging this module, you can easily set up middleware for assigning roles and checking authorization, amplifying your application's security layer in just a few lines of code:

import { Role, Schema } from '@iamjs/core';
import { ExpressRoleManager } from '@iamjs/express';
import express from 'express';

const role = new Role({
  name: 'role',
  config: {
    resource1: {
      scopes: 'crudl'
    },
    resource2: {
      scopes: 'cr-dl',
      custom: {
        'create a new user': false
      }
    }
  }
});

const schema = new Schema({
  role
});

const roleManager = new ExpressRoleManager({
  schema: schema,
  onError(_err, _req, res, _next) {
    res.status(403).send('Forbidden');
  },
  onSucess(_req, res, _next) {
    res.status(200).send('Hello World from the success handler!');
  }
});

const app = express();

app.get(
  '/resource1',
  roleManager.check({
    resources: 'resource1', // the resources to be accessed
    actions: ['create', 'update'], // the actions to be performed
    role: 'role',// the role to check
    strict: true // make the checks run in strict mode
    // additionnaly you can construct role from permissions by using the construct option
        construct: true,
        data: async(req){
            return schema.get('role').toObject()
        }
}),
  (_req, res) => {
    res.send('Hello World!');
  }
);

☢️ @iamjs/react:

Finally, weaving this into a React setting, @iamjs/react simplifies checking permissions within your components. It introduces a nifty hook - useAuthorize, allowing you to control component rendering based on user roles:

Import useAuthorize and createSchema from the package

import { Role } from "@iamjs/core";
import { createSchema, useAuthorization } from "@iamjs/react";
import { useEffect, useState } from "react";

Create the initial schema with a default roles

const schema = createSchema({
  user: new Role({
    name: 'user',
    description: 'User role',
    meta: {
      name: 'user'
    },
    config: {
      books: {
        scopes: 'crudl',
        custom: {
          upgrade: true,
          downgrade: false,
          sort: true
        }
      }
    }
  })

Create your own hook to fetch the user's permissions from your backend

const useUser = () => {
  const { build } = useAuthorization(schema);
  const [userRole, setUserRole] = useState(null);

  useEffect(() => {
    // Call the API endpoint to fetch user permissions
    fetch("/permssions")
      .then((response) => response.json())
      .then((data) => {
        // Build the role based on the received permissions
        const builtRole = build(data);
        setUserRole(builtRole);
      })
      .catch((error) => {
        console.error("Error fetching user permissions:", error);
      });
  }, []);

  return userRole;
};

Use your own hook to check the permissions or to check the user's permissions or render components conditionally

const Component = () => {
  const userRole = useUser();

  if (!userRole) {
    return <div>Loading...</div>;
  }

  const { can, Show } = userRole;

  return (
    <div>
      <div>{can("books", "create").toString()}</div>
      <Show resources="books" actions="create">
        <div>Rendered if user has 'create' permission for 'books'</div>
      </Show>
    </div>
  );
};

Additionally your use the Show and can methods directly from useAuthorize and use the roles you provided in the schema to render conditionally or check the users permissions

const { can, Show } = useAuthorization(schema);

const canDo = can("user", "books", "create").toString(); // 'true'

<Show role="user" resources="books" actions="create">
  <div>can show</div>
</Show>;

📔Conclusion

iamjs is a powerful and versatile library for access control that simplifies the authorization process using a schema-based approach. With features such as role-based access control, customizable permissions, and support for a variety of programming environments, iamjs provides a comprehensive solution for building secure and robust web applications.

To learn more about iamjs, check out the official documentation here. And if you're interested in contributing to the project, head over to the repository on GitHub.

Compilers, and how to write one !

Mohamed Achaq — Thu, 16 Jun 2022 20:23:23 +0000

Hello and welcome to a new blog post!

Today we will talk about compilers and how you can write one in Rust.

Programming Languages

There are two types of programming languages: compiled and interpreted. Programs written in compiled languages need to be compiled before they can be run as a binary on a computer, while programs written in interpreted languages are run directly on a computer using just-in-time compilation (JIT). Examples of compiled languages include C, C++, Java, C#, Go, etc., while examples of interpreted languages include Python, Ruby, JavaScript, etc.

Compilers

A compiler is a program that takes a human-readable programming language and converts it to machine code that can be understood by the computer. As we know, computers can only understand zeros and ones, so how does a compiler actually work?

LLVM

You may have heard of LLVM, which is a tool that simplifies the process of building compilers. It is written in C++ and provides a collection of modular and reusable compiler and toolchain technologies. LLVM serves as the middle layer of a complete compiler system, taking intermediate representation (IR) code from a compiler and emitting optimized IR. This new IR can then be converted and linked into machine-dependent assembly language code for a target platform. While LLVM is a powerful and widely-used tool in the compiler world, in this article, we will focus on the fundamentals of compilers and provide examples of how to write parts of a compiler in Rust.

The Compiler

A simple compiler can be broken down into three main parts:

A Parser (or Lexer)
A Transformer
A Code Generator

The Parser

The parser is the part of the compiler that tokenizes the code and converts it into a list of tokens.

Tokenization, also known as lexical analysis, is the process of breaking down a program into a list of tokens. Each token is a small, single unit of code that the compiler can understand. Let's take a look at a simple Rust program:

fn main() {
    println!("Hello, world!");
}

In this Rust program, we have a function named main, and inside the function, there is a println! macro that prints the string "Hello, world!" to the console. After tokenization, the program will be broken down into a list of tokens. For example, fn is a function keyword, main is the name of the function, and the parentheses are the opening and closing parentheses of the function. Similarly, the opening and closing curly braces, println is the println macro, and the parentheses are the opening and closing parentheses of the macro.

After tokenizing the code, the parser converts the list of tokens into a tree of nodes called an Abstract Syntax Tree (AST). The AST is an abstract representation of the code. This step is called syntactic analysis.

The AST for the program above will look something like this:

AST {
    kind: "Program",
    children: [
        AST {
            kind: "Function",
            children: [
                AST {
                    kind: "Identifier",
                    value: "main",
                    children: []
                },
                AST {
                    kind: "Block",
                    children: [
                        AST {
                            kind: "Println",
                            children: [
                                AST {
                                    kind: "String",
                                    value: "Hello, world!",
                                    children: []
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

The Transformer

After parsing the code, we have an AST. However, the AST is not easily understandable by the computer, and it is also a deeply nested structure. Therefore, we need to transform the AST into a

more readable structure called a Syntax Tree.

The Transformer can be broken down into two main parts or functions:

Traversers
Visitors

The Traversers are functions that traverse the AST in a depth-first manner. For example, in the AST mentioned above, the Traverser will apply a function to the root node (Program node) and then apply the function to its children, and so on, until it reaches the last child.

A Traverser function can be implemented using the Visitor pattern, which is a pattern that allows you to implement a function that works on a node and its children and then apply the function to the node and its children.

Visitors are usually objects with methods that accept a node and return a value. Let's implement a simple Transformer that takes an AST and transforms it into a syntax tree by passing it to a Traverser.

use std::collections::HashMap;

struct Visitor {
    nodes: HashMap<String, String>
}

struct Traverser {
    visitor: Visitor
}

struct Node {
    kind: String,
    children: Vec<Node>
}

impl Visitor {
    fn new() -> Visitor {
        Visitor {
            nodes: HashMap::new()
        }
    }

    fn visit(&mut self, node: &Node) {
        self.nodes.insert(node.kind.clone(), node.kind.clone());
        for child in &node.children {
            self.visit(child);
        }
    }
}

impl Traverser {
    fn new() -> Traverser {
        Traverser {
            visitor: Visitor::new()
        }
    }

    fn traverse(&mut self, node: &Node) {
        self.visitor.visit(node);
    }
}

struct SyntaxTree {
   kind: String,
   body: Vec<Node>
}

fn Transformer(AST: &AST) -> SyntaxTree {
    let mut syntax_tree = SyntaxTree {
        kind: "Program".to_string(),
        body: Vec::new()
    };
    let mut traverser = Traverser::new();
    traverser.traverse(AST);
    syntax_tree.body = traverser.visitor.nodes.clone();
    syntax_tree
}

The Code Generator

The Code Generator is the part of the compiler that generates machine code from the syntax tree. The code generator calls itself recursively to generate the code from the syntax tree into a single string, which represents the machine code.

Here is an example of how you can implement the code generator function in Rust:

fn generate_code(syntax_tree: &SyntaxTree) -> String {
    let mut code = String::new();
    match syntax_tree.kind.as_str() {
        "Program" => {
            for child in &syntax_tree.body {
                code.push_str(&generate_code(child));
            }
        },
        "Function" => {
            code.push_str("fn ");
            code.push_str(&syntax_tree.body[0].kind);
            code.push_str("(");
            for child in &syntax_tree.body[1].body {
                code.push_str(&child.kind);
                code.push_str(", ");
            }
            code.pop();
            code.pop();
            code.push_str(") {\n");
            for child in &syntax_tree.body[2].body {
                code.push_str(&generate_code(child));
            }
            code.push_str("}\n");
        },
        "Block" => {
            for child in &syntax_tree.body {
                code.push_str(&generate_code(child));
            }
        },
        "Println" => {
            code.push_str("println!(");
            code.push_str(&syntax_tree.body[0].kind);
            code.push_str(");\n");
        },
        "String" => {
            code.push_str("\"");
            code.push_str

(&syntax_tree.body[0].kind);
            code.push_str("\"");
        },
        "Identifier" => {
            code.push_str(&syntax_tree.body[0].kind);
        },
        _ => {
            code.push_str("<unknown>");
        }
    }
    code
}

After implementing the parser, the transformer, and the code generator, you can use composition to tie everything together, and voila, you have your own compiler.

Conclusion

Compilers are essential tools in programming, and while you don't necessarily need to know how to write a compiler, learning how compilers work can help you understand your tools better and improve your overall programming skills.

Useful Links

Typescript Design Patterns

Mohamed Achaq — Sun, 01 May 2022 23:41:51 +0000

Design patterns are a set of best practices used to solve common problems in software development and make writing clean and maintainable code easier. In this blog post, we will discuss some of the most commonly used design patterns in TypeScript.

Singleton

The Singleton pattern is a design pattern that restricts the instantiation of a class to one object and ensures that only one object of a class is created. Implementing the Singleton pattern in TypeScript is very easy:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

You can use it like this:

const singleton = Singleton.getInstance();

Factory

The Factory pattern is a design pattern that lets you create objects without specifying the exact class of the object that will be created. In this example, we want to make a vehicle depending on its type, so instead of making a class for each type, we make a single factory class to make us a vehicle depending on the type we give it.

abstract class Vehicle {
  abstract getType(): string;
}

class Car extends Vehicle {
  getType() {
    return 'car';
  }
}

class Truck extends Vehicle {
  getType() {
    return 'truck';
  }
}

class VehicleFactory {
  public createVehicle(type: string): Vehicle {
    switch (type) {
      case 'car':
        return new Car();
      case 'truck':
        return new Truck();
      default:
        throw new Error(`Vehicle of type ${type} not found`);
    }
  }
}

You can use it like this to make as many vehicles as you want, as long as you provide the type:

const factory = new VehicleFactory();
const car = factory.createVehicle('car');
const truck = factory.createVehicle('truck');

Observer

The Observer pattern is a design pattern that lets you define a subscription mechanism to notify multiple objects and is used in the event-driven programming paradigm. Implementing the Observer pattern in TypeScript can look like this:

interface Observer {
  update(data: any): void;
}

class Subject {
  private observers: Observer[] = [];

  public subscribe(observer: Observer) {
    this.observers.push(observer);
  }

  public unsubscribe(observer: Observer) {
    const index = this.observers.indexOf(observer);
    this.observers.splice(index, 1);
  }

  public notify(data: any) {
    this.observers.forEach(observer => observer.update(data));
  }
}

Then you will need an observer class:

class ConcreteObserver implements Observer {
  public update(data: any) {
    console.log(data);
  }
}

You can let the subject know that there is new data available by subscribing to the observer we created:

const subject = new Subject();
const observer = new ConcreteObserver();
subject.subscribe(observer);
subject.notify('Hello World');

// Unsubscribe the observer from the subject:
subject.unsubscribe(observer);

Command

The Command pattern is a design pattern that lets you encapsulate all information needed to perform an action in one object. Implementing the Command pattern can look like this:

interface Command {
  execute(): void;
}

class ConcreteCommand implements Command {
  constructor(private receiver: Receiver) {}

  public execute() {
    this.receiver.action();
  }
}

class Receiver {
  public action() {
    console.log('Action called');
  }
}

Then you can use the command module to create a command object and pass it to the invoker:

const receiver = new Receiver();
const command = new ConcreteCommand(receiver);
const invoker = new Invoker();
invoker.setCommand(command);
invoker.execute();

Strategy

The Strategy pattern is a design pattern that lets you define a family of algorithms, encapsulate each one, and make them interchangeable. Implementing the Strategy pattern in TypeScript is very easy and you can start with this Strategy class:

interface Strategy {
  execute(data: any): any;
}

class LastElementStrategy implements Strategy {
  public execute(data: []) {
    return data[data.length - 1];
  }
}

Then you can use it like this:

const strategy = new LastElementStrategy();
const data = [1, 2, 3, 4, 5];

let last = strategy.execute(data);

Template Method

The Template Method pattern is a design pattern that lets you define the skeleton of an algorithm in an operation, deferring some steps to subclasses. For example, you want to make a pizza and you want to make it with tomato sauce and cheese, but the toppings can be different. You can use the Template Method pattern like this:

abstract class Pizza {
  public makePizza() {
    this.prepareDough();
    this.addTomatoSauce();
    this.addCheese();
    this.addToppings();
    this.bakePizza();
  }

  protected prepareDough() {
    console.log('Preparing dough');
  }

  protected addTomatoSauce() {
    console.log('Adding tomato sauce');
  }

  protected addCheese() {
    console.log('Adding cheese');
  }

  protected abstract addToppings(): void;

  protected bakePizza() {
    console.log('Baking pizza');
  }
}

class PepperoniPizza extends Pizza {
  protected addToppings() {
    console.log('Adding pepperoni');
  }
}

class VegetarianPizza extends Pizza {
  protected addToppings() {
    console.log('Adding vegetables');
  }
}

You can use it like this to make both types of pizza:

const pepperoniPizza = new PepperoniPizza();
pepperoniPizza.makePizza();

const vegetarianPizza = new VegetarianPizza();
vegetarianPizza.makePizza();

Conclusion

These are just a few examples of design patterns that can be used in TypeScript. By using these patterns, you can write better code that is easier to maintain and extend. It's important to note that design patterns should not be used blindly, but rather as tools to solve specific problems in your code.

Docker : The basics

Mohamed Achaq — Sat, 23 Apr 2022 19:08:28 +0000

Docker

Docker is a powerful containerization technology that enables the development and deployment of applications in a consistent and isolated environment. Unlike traditional virtual machines, which require a separate operating system for each instance, Docker containers share the host system's kernel, making them lightweight and efficient.

Advantages of Docker

Resource Efficiency: Docker containers are more lightweight compared to virtual machines, as they do not require a separate operating system. This leads to better utilization of system resources, allowing you to run more containers on the same host machine.
Isolation: Containers provide a high level of isolation between applications and their dependencies. Each container has its own file system, network interfaces, and process space, ensuring that changes made to one container do not affect others.
Portability: Docker containers are highly portable, meaning you can run them on any system that has Docker installed, regardless of the underlying operating system. This makes it easier to develop and deploy applications across different environments.
Scalability: Docker makes it simple to scale applications horizontally by allowing you to easily create multiple instances of a container and distribute the workload across them. Containers can be quickly started, stopped, or replicated to meet the changing demands of your application.
Version Control: Docker enables version control for your application's dependencies by using container images. Images serve as blueprints for creating containers and can be versioned, tagged, and shared, ensuring consistent deployments across different stages of the application's lifecycle.

Dockerfile

To create a Docker image, you need to define a Dockerfile. A Dockerfile is a text file that contains a series of instructions to build an image. These instructions specify the base image, install dependencies, copy files, set environment variables, and define runtime commands.

Using a Dockerfile, you can automate the process of creating a reproducible and self-contained image that includes all the necessary components for your application to run.

Creating an Image

Let's walk through an example of creating a Docker image for a Flask application:

FROM python:3.8.9-alpine
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["python", "app.py"]

In this example:

FROM python:3.8.9-alpine sets the base image as Python 3.8.9 on Alpine Linux, which provides a minimal and lightweight environment.
WORKDIR /app sets the working directory within the container to /app.
COPY requirements.txt . copies the requirements.txt file from the host to the container's working directory.
RUN pip install --no-cache-dir -r requirements.txt installs the dependencies specified in requirements.txt using pip.
COPY . . copies the remaining application code from the host to the container's working directory.
CMD ["python", "app.py"] specifies the command to run when the container is started.

Building an Image

To build the Docker image using the Dockerfile, run the following command in the directory containing the Dockerfile:

docker build -t flask-docker-boilerplate .

The -t flag allows you to tag the image with a name (flask-docker-boilerplate in this example) for easier reference.

Running a Container

To run a container based on the created image, use the docker run command:

docker run -p 3000:5000 flask-docker-boilerplate

The -p flag maps the container's port 5000 to the host's port 3000, allowing access to the Flask application

running inside the container.

Logging

To view the logs of a running container, you can use the docker logs command:

docker logs <container_id or container_name>

This will display the logs generated by the container's application.

DockerHub

Docker Hub is a central registry that allows you to store, share, and distribute Docker images with the community. It serves as a platform for collaborating on container-based projects and simplifying the deployment process.

To push your Docker image to Docker Hub, follow these steps:

Create a Docker Hub account at https://hub.docker.com/.
Log in to Docker Hub using the docker login command:

   docker login

Enter your Docker Hub username and password when prompted.

Tag your local image with your Docker Hub username and repository name:

   docker tag flask-docker-boilerplate <your_docker_hub_username>/flask-docker-boilerplate:latest

This command associates your image with a specific repository on Docker Hub.

Push the image to Docker Hub:

   docker push <your_docker_hub_username>/flask-docker-boilerplate:latest

This uploads the image to your Docker Hub repository.

Deploying Changes

To deploy changes to your application, follow these steps:

Modify your application's code, such as the Flask route or the message it displays.
Rebuild the Docker image:

   docker build -t flask-docker-boilerplate .

Push the updated image to Docker Hub:

   docker push <your_docker_hub_username>/flask-docker-boilerplate:latest

This ensures that the latest version of your application is available for deployment.

Caching Mechanism

Docker uses a caching mechanism to speed up the image building process. Each instruction in the Dockerfile creates a layer in the image. If a layer has not changed, Docker will reuse the cached layer instead of rebuilding it.

To take advantage of caching, it is recommended to order the instructions in the Dockerfile from least frequently changing to most frequently changing. This way, Docker can reuse as many cached layers as possible during subsequent builds, saving time and resources.

Conclusion

Docker simplifies the development, deployment, and management of applications by providing a lightweight and portable containerization platform. It allows you to package your application and its dependencies into a single unit, ensuring consistency across different environments.

By understanding the basics of Docker, such as Dockerfiles, image building, running containers, and utilizing Docker Hub, you can leverage the power of containerization to enhance your software development workflow and streamline deployment processes.