Are you a react native developer who never touched the /ios and /android folders unless some library requires you add some lines there?

What are they talking about anyways, is it something like MVC or MVVM? is it some new folder structure used to organize your code-base?

If your like me and had these questions, I'd like to report that it is non of the above. In fact you shouldn’t worry about it unless you have an edge case and need to access native code to solve it, or you want to develop a react native library.

That being said, let’s dive into what is the react native architecture.

The problem ( The bridge)

React Native has traditionally operated on a bridge-based architecture, serving as the communication layer between the JavaScript code and native platform.

This bridge is asynchronous, meaning that every call from JavaScript to native or vice versa must pass through this bridge asynchronously.

This setup, while effective for a wide range of applications, introduced performance bottlenecks, particularly in complex and high-performance apps. Operations requiring high-frequency interaction between JavaScript and the native side would incur a performance penalty due to the overhead of passing messages across the bridge.

This could lead to less smooth animations, delays in executing touch events, and overall less responsive UIs. The need for a more efficient way to handle these interactions prompted the exploration of a new architecture.

The Solution

The React Native team responded to these challenges with two key innovations: Fabric and TurboModules. Both are designed to improve React Native's performance and efficiency by reimagining the architecture's core.

Fabric is a new UI layer that replaces the traditional bridge with a more direct connection between JavaScript and native views. It utilizes a concept known as JSI (JavaScript Interface), allowing JavaScript code to directly call native functions synchronously. This means there's no longer a need for the asynchronous bridge for every interaction, which drastically reduces the communication overhead, leading to smoother animations and a more responsive interface.

TurboModules also leverage JSI to provide a more efficient way to load and interact with native modules. Unlike the old architecture, where all modules were initialized at app startup, TurboModules adopts a lazy initialization approach. Modules are loaded only when they are needed, reducing startup time and memory usage. This approach not only speeds up the app's performance but also provides a more modular and efficient system for managing native code.

Basic Syntax

• Optional Chaining (?.) allows you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

    const person = { name: 'John', address: { street: '123 Main St' } };
    console.log(person.address?.city); // undefined, without causing an error
  

• Nullish Coalescing Operator (??) provides a default value for a variable that is null or undefined.

    const input = null;
    const output = input ?? 'default value';
    console.log(output); // 'default value'
  

This, Prototype, Coercion

• This keyword (this) refers to the context in which the current function is executed. The value of this changes based on how the function is called.

    function show() {
      console.log(this.name);
    }
    const obj = { name: 'JavaScript', show };
    obj.show(); // 'JavaScript'
  

• Prototype is a mechanism by which JavaScript objects inherit features from one another.

    function Person(name) {
      this.name = name;
    }
    Person.prototype.greet = function() {
      console.log('Hello, ' + this.name);
    };
    const person1 = new Person('Alice');
    person1.greet(); // 'Hello, Alice'
  

• Coercion is the automatic or implicit conversion of values from one data type to another (e.g., from string to number).

    const result = '5' + 1; // '51', string coercion
    const result2 = '5' * 1; // 5, numeric coercion
  

De-structuring, Spread, Rest, Default Properties

• De-structuring allows unpacking values from arrays or properties from objects into distinct variables.

    const { name, age } = { name: 'John', age: 30 };
    console.log(name, age); // 'John', 30
  

• Spread Operator (...) is used to spread the elements of an array or object properties.

    const numbers = [1, 2, 3];
    const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]
  

• Rest Parameter (...) collects all remaining elements into an array.

    function sum(...args) {
      return args.reduce((total, current) => total + current, 0);
    }
    console.log(sum(1, 2, 3)); // 6
  

• Default Parameters allow named parameters to be initialized with default values if no value or undefined is passed.

    function greet(name = 'Guest') {
      console.log(`Hello, ${name}!`);
    }
    greet(); // 'Hello, Guest!'
  

Scoping, Closures

• Scoping determines the visibility or lifetime of variables and parameters. JavaScript has function scope and block scope (with let and const).

•       if (true) {
          var varScoped = 'var';
          let blockScoped = 'block';
        }
        console.log(varScoped); // 'var'
        console.log(blockScoped); // ReferenceError: blockScoped is not defined
  

• Closures are functions that remember their lexical scope, even when the function is executed outside that lexical scope.

    function makeCounter() {
      let count = 0;
      return function() {
        return ++count;
      };
    }
    const counter = makeCounter();
    console.log(counter()); // 1
    console.log(counter()); // 2
  

Array and Object Functions, Set, Map, WeakSet, WeakMap

• Array and Object Functions like map, filter, reduce for arrays and Object.keys, Object.values for objects are essential for handling collections.

    const numbers = [1, 2, 3, 4];
    const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8]
  

• Set is a collection of unique values.

    const mySet = new Set([1, 2, 3, 2]);
    console.log(mySet.size); // 3
  

• Map is a collection of keyed data items, similar to an Object but with any value as the key.

    const myMap = new Map([['a', 1], ['b', 2]]);
    console.log(myMap.get('a')); // 1
  

• WeakSet and WeakMap are similar to Set and Map but their elements/keys are only weakly held, allowing for garbage collection if there is no other reference to the object.

    let obj = {};
    const weakSet = new WeakSet([obj]);
    obj = null; // Now the object can be garbage collected
  

Classes, Currying, Higher Order Functions

• Classes provide a syntactic sugar over JavaScript's existing prototype-based inheritance.

    class Person {
      constructor(name) {
        this.name = name;
      }
      greet() {
        console.log(`Hello, ${this.name}`);
      }
    }
    const person1 = new Person('Alice');
    person1.greet(); // 'Hello, Alice'
  

• Currying is the process of transforming a function with multiple arguments into a sequence of functions each with a single argument.

    const add = a => b => a + b;
    const addFive = add(5);
    console.log(addFive(3)); // 8
  

• Higher Order Functions are functions that take another function as an argument or return a function as a result.

    const withLogging = fn => (...args) => {
      console.log(`Calling function with arguments: ${args}`);
      const result = fn(...args);
      console.log(`Result: ${result}`);
      return result;
    };
    const sum = withLogging((a, b) => a + b);
    sum(1, 2); // Logs calling and result
  

Promises, Async/Await, Event Loop

• Promises are used for asynchronous computation. They represent a value that may be available now, later, or never.

    const promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve('Result'), 1000);
    });
    promise.then(result => console.log(result));
    // prints 'Result' after 1 second
  

• Async/Await simplifies working with promises, allowing for asynchronous code to be written in a synchronous manner.

    async function fetchData() {
      const data = await fetch('url');
      return data.json();
    }
  

• Event Loop is a JavaScript runtime model that ensures execution of code, collecting and processing events, and executing queued sub-tasks

    console.log('Start');
    setTimeout(() => console.log('Timeout'), 0);
    Promise.resolve().then(() => console.log('Promise'));
    console.log('End');
    // Output: Start, End, Promise, Timeout
  

Iterators, Generators

• Iterators are objects that enable custom iteration like for...of loops over a collection.

    const iterable = {
      *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
      }
    };
  
    for (const value of iterable) {
      console.log(value); // 1, 2, 3
    }
  

• Generators are functions that can be exited and later re-entered, maintaining their context across re-entrances.

    function* generatorFunction() {
      yield 'Hello';
      yield 'World';
    }
    const generator = generatorFunction();
    console.log(generator.next().value); // 'Hello'
    console.log(generator.next().value); // 'World'
  

Debugging

Debugging involves identifying and removing errors from software. In JavaScript, this can be done using tools like the Chrome Developer Tools, which allow setting breakpoints, stepping through code, inspecting variables, and viewing call stacks.

console.log('Debugging example');
// Use debugger; statement to pause execution in DevTools
debugger;
console.log('This line only executes after the debugger has resumed');

Finally done 😁

Each of these features contributes to the versatility and power of JavaScript as a language, catering to both simple scripting and complex application development.