These are some unstructured notes on my current understanding of Javascript front end frameworks. This is not a comparison of frameworks nor a benchmark, rather a collection of frameworks and the problem they wanted to solve.

React

  • Problem to solve: updating the state of the application alongside the view, and keeping consistence between both
  • View and state separation: state is updated and a render method specifies how to create the view from the state
  • Uses JSX syntax
    • Extension of the JS syntax
    • JSX needs to be compiled before reaching a browser
  • React enables to create components
  • ReactDOM enables to connect components to the browser DOM (compared to React Native for mobile app)
  • Virtual DOM: makes it possible to do partial updates of the real DOM by computing diffs on the virtual DOM
  • React Hooks : since version 16, hooks are a big part of React, and the prime way to interact with component state
    • const [state, setState] = useState(initialState);: creates a state and returns its value plus a function to update the state
    • useEffect(didUpdate, [dep1, dep2, ...]);: plays the function passed as an argument after the first rendering, or after each one of the dependency has changed (after its rendering). The didUpdate can return a cleaning function, which will be run before running the effect again.
    • const value = useContext(MyContext);: returns the closest context provider context value, initialized by the context given in argument.
    • const [state, dispatch] = useReducer(reducer, initialArg, init);: Same as useState, but makes it possible to use a reducer function to update the state, via the dispatch function returned. initialArg is set as the initial value of the state. the init argument is an optional function that will be run if given to lazily initialize the state as init(initialArg).
    • useCallback: returns a memoized callback function, which will be updated only if one of its dependencies is changed (passed as second argument). 
      const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
    • const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);: returns a memoized value, which will be updated only if dependencies change.
    • const refContainer = useRef(initialValue);

Typescript

  • Introduces types in Javascript, transpiled into (optimized ?) js
  • It is mostly a dev tool:
    • Helps type checking & code consistency
    • Helps auto-completion
    • Compilation readiness
    • Integrations with IDEs are really usefull

ECMAScript

  • ECMA Script est le standard du langage JavaScript. Les différentes versions d’ES définissent une interface avec le langage.
  • Les Navigateurs implémentent une version de JavaScript qui leur est propre et implémente donc une edition donnée du standard.
  • ES6 est une version majeure car elle a apporté de nombreuses directives structurantes, comme les promesses, de nombreuses structures, la destructuration.
  • ES7 a introduit les directives async/await
  • Les Navigateurs récents sont très conformes aux éditions d’ES 5, 6 et 7.

References