Sylwester Wysocki aka 'Dzik'
Roman Pietrzak aka 'yosh'
Kemu Studio - yosh.ke.mu
First version: 2018
Last changes: 2018-09-28
All rights reserved

Intro

Jest to krótkie, subiektywne zestawienie wybranych cech trzech najczęściej wspominanych framework-ów przeglądarkowych (browser framework).
Poniższe powstało w języku polskim na potrzeby klienta Kemu Studio, ale pomyśleliśmy, że komuś jeszcze się może przyda i stąd publikacja.
Jeśli przydało się Tobie, daj proszę znać na ss@ke.mu

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

Świat webowy lubi templaty:
  • 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.
JavaScript failed !
So this is static version of this website.
This website works a lot better in JavaScript enabled browser.
Please enable JavaScript.