Intro

React

• 1. JSX: kod HTML ze wstawkami w JS (https://reactjs.org/docs/introducing-jsx.html):
  - jasne przełożenie na wynikowy HTML,
  ale:
  - wszystkie wady wynikające z pisania ręcznie HTMLa (zamykanie znaczników itp.)
  - potrzebny jest dodatkowy parser
  
• 2. JSX jest opcjonalny. Móżna pisać równoważny kod JS:
  - JSX:
  

   const element = (
   <h1 className="greeting">
     Hello, world!
   </h1>
   );
  

  - JS:
  

   const element = React.createElement(
     'h1',
     {className: 'greeting'},
     'Hello, world!'
   );
  

• 3. Customowe komponenty:
  - żeby stworzyć komponent wystarczy napisać factory function,
  ale
  - jeśli obiekt posiada swój stan, który zmienia się dynamicznie trzeba zrobić klasę ES6: https://reactjs.org/docs/state-and-lifecycle.html
  "We mentioned before that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes."
  
• 4. System renderu trigerowany zmianami na state. Na pierwszy rzut oka wygląda podobnie do tego co mamy w K.Nate.
  - Zmiana stanu przez funkcję setState()
  
• 5. One-way binding, czyli flow jest zawsze model/event -> view (w przeciwieństwie do two-way binding w Angular).
  

Vue

• 1. Render jest trigerowany przez zmianę stanu.
  - Zmiana stanu bezpośrednio grzebiąc w zmiennej.
  
• 2. Komponenty Vue wmieszane w czysty HTML.
  - nie trzeba zewnętrznego parsera,
  - resolvovanie komponentów po stronie browsera,
  - kod z elementami Vue to dalej poprawny HTML,
  - komponent składa się z pary: kod JS + wskazanie gdzie/jak osadzić w HTML,
  - przykład: {{ message }} to osadzony komponent Vue:
  

   <div id="app">
     <p>{{ message }}</p>
   </div>
  

• 3. Dostępne pętle i IF-y wewnątrz HTMLa (też rozwiązywane na browserze):
  - źle mi się to kojarzy z różnymi templatami w PHP, ale może to tylko uprzedzenie,
  - znika klarowność jak to się przekłada na wynikowy HTML.
  

Angular

• 1. Moloch nastawiony na tworzenie całej aplikacji.
  - Jak się w to wejdzie z jakimś projektem, to ciężko wyjść.
  
• 2. Kod w TypeScript, nie w JavaScript.
  
• 3. Mocno ustrukturalizowane i narzucone drzewo aplikacji (pliki css, ts, templaty itd).
  Dzik: Źle mi się to kojarzy z Ruby on rails, ale może to tylko moje uprzedzenie.
  Yosh: Ułatwia komponentyzację.
  
• 4. System templatów.
  Dzik: Źle mi się to kojarzy z templatami z PHP, ale może to też moje uprzedzenie.
  
• 5. Klasyczny obiektowy kod (hierarchia klas).
  
• 6. Two-way binding, czyli flow jest model <-> view (w przeciwieństwie do one-way binding w React).
  

Spostrzeżenie

• Wszystkie 3 frameworki mają system templatów, które są blisko HTML-a.
  
• Nate się różni, bo działa całkowicie dynamicznie i przypomina bardziej aplikacje typu Qt.