Spróbujemy odpowiedzieć na pytanie: Jaki framework będzie dla nas najlepszy? Opowiem dlaczego to pytanie jest takie ważne oraz o tym czego potrzebujemy by znaleźć na nie odpowiedz, która wcale nie jest taka trywialna.

1. OD CZEGO ZACZĄĆ
ZACZYNAMY PROJEKT, CZYLI

2. SOFTWARE ENGINEER
&
WEB DEVELOPER
PAWEŁ TEKLIŃSKI
github: https://github.com/teklakct
twitter: https://twitter.com/tekla_to

3. JAKI FRAMEWORK
WYBRAĆ?

4. źródło: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

5. NAJNOWSZY :)

6. źródło: http://i0.kym-cdn.com/entries/icons/original/000/012/982/post-19715-Brent-Rambo-gif-thumbs-up-imgu-L3yP.gif

7. CZYM JEST WYBÓR
FRAMEWORK’A?

8. INFORMACJI
POTRZEBUJEMY

9. INFORMACJE
kontekst projektu
strona czy aplikacja
framework czy biblioteka

10. KONTEKST PROJEKTU
• ogólne wymagania
• wymóg co do technologii
• kto będzie odbiorcą
• klient wewnętrzny czy zewnętrzny
• celujemy w urządzenia typu desktop czy mobile
• jak wygląda roadmap’a
• analiza wymagań
• analiza długofalowości projektu
• budżet
• koszty narzędzi
• koszty programistów
• koszty szkoleń

11. KONTEKST PROJEKTU
• ogólne wymagania
• wymóg co do technologii
• kto będzie odbiorcą
• klient wewnętrzny czy zewnętrzny
• celujemy w urządzenia typu desktop czy mobile
• jak wygląda roadmap’a
• analiza wymagań
• analiza długofalowości projektu
• budżet
• koszty narzędzi
• koszty programistów
• koszty szkoleń

12. KONTEKST PROJEKTU
• ogólne wymagania
• wymóg co do technologii
• kto będzie odbiorcą
• klient wewnętrzny czy zewnętrzny
• celujemy w urządzenia typu desktop czy mobile
• jak wygląda roadmap’a
• analiza wymagań
• analiza długofalowości projektu
• budżet
• koszty narzędzi
• koszty programistów
• koszty szkoleń

13. KONTEKST PROJEKTU
• ogólne wymagania
• wymóg co do technologii
• kto będzie odbiorcą
• klient wewnętrzny czy zewnętrzny
• celujemy w urządzenia typu desktop czy mobile
• jak wygląda roadmap’a
• analiza wymagań
• analiza długofalowości projektu
• budżet
• koszty narzędzi
• koszty programistów
• koszty szkoleń

14. KONTEKST PROJEKTU
• ogólne wymagania
• wymóg co do technologii
• kto będzie odbiorcą
• klient wewnętrzny czy zewnętrzny
• celujemy w urządzenia typu desktop czy mobile
• jak wygląda roadmap’a
• analiza wymagań
• analiza długofalowości projektu
• budżet
• koszty narzędzi
• koszty programistów
• koszty szkoleń

15. INFORMACJE
kontekst projektu
strona czy aplikacja
framework czy biblioteka

16. STRONA CZY APLIKACJA
Strona Aplikacja
Browser Support Duży Mały/Średni*
Indexable, fast, etc (SEO) TAK NIE
Logika biznesowa Nie/raczej nie TAK
Dynamiczne dane i
dynamiczny DOM
Nie/raczej nie TAK

17. SPA CZY MPA
• jaki jest cel aplikacji?
• jakie treści będą prezentowane użytkownikowi?
• na jakich treściach najbardziej będzie zależało
użytkownikowi?
• jak złożona zapowiada się aplikacja?

18. SPA
Zalety
• bardzo szybkie działanie
• dość prosty debug
• wymusza oddzielenie backendu od frontendu
• obliczenia możemy „przenieść” na użytkownika
• łatwe cache’owanie i możliwa praca offline
• niski próg wejścia

19. SPA
Wady
• długie ładowanie aplikacji
• mniej bezpieczne
• wycieki pamięci
• utrudniony debug wersji produkcyjnej
• utrudniona optymalizacja pod względem SEO
• wymaga włączenia JavaScriptu u klienta (ale w naszych
czasach to raczej standard)

20. SPA A SEO
React - ok. 410 000 (6 400 000) wyników
Angular - ok. 198 000 (35 000 000) wyników
Vue - ok. 193 000 (11 700 000) wyników
Backbone - ok. 144 000 (562 000) wyników
Ember - ok. 20 200 (400 000) wyników

21. MPA
Zalety
• bezpieczeństwo: łatwe testy penetracyjne,
zabezpieczenia przed CSRF itd.
• łatwa optymalizacja pod względem SEO
• łatwy monitoring, debug i logi
• duża kontrola nad strukturą aplikacji
• można ukryć logikę biznesową

22. MPA
Wady
• nie wymusza oddzielenia backendu od frontendu
• większość obliczeń po stronie serwera
• „wolny”, render na serwerze
• opóźnienia podczas przełączania pomiędzy stronami

23. INFORMACJE
kontekst projektu
strona czy aplikacja
framework czy biblioteka

24. FRAMEWORK CZY BIBLIOTEKA
FRAMEWORK
NASZ KOD BIBLIOTEKA

25. FRAMEWORK CZY BIBLIOTEKA
FRAMEWORK
NASZ KOD BIBLIOTEKA

26. FRAMEWORK CZY BIBLIOTEKA
• jak dojrzały jest framework/biblioteka?
• czy kod będzie utrzymywany przez „jakiś czas”? LTS i
migracje?
• czy społeczność jest duża i pomocna?
• czy trudno jest zatrudnić programistę?
• na jakich założeniach zbudowany został framework/
biblioteka?
• czy nasza aplikacja będzie duża i ilu programistów będzie
nad nią pracowało?
• jak duży jest próg wejścia?

27. PO CO NAM
JS FRAMEWORK
• walidować formularze?
• manipulować DOMem?
• system szablonów?
• renderować ten sam HTML w wielu stronach?
• komunikować się AJAXem?

28. PO CO NAM
JS FRAMEWORK
• walidować formularze?
• manipulować DOMem?
• system szablonów?
• renderować ten sam HTML w wielu stronach?
• komunikować się AJAXem?
STOP

29. PO CO NAM
JS FRAMEWORK
• walidować formularze?
• manipulować DOMem?
• system szablonów?
• renderować ten sam HTML w wielu stronach?
• komunikować się AJAXem?
STOP
mamy przecież MVC
&
mamy przecież
jQuery :)

30. PO CO NAM
JS FRAMEWORK
• walidować formularze?
• manipulować DOMem?
• system szablonów?
• renderować ten sam HTML w wielu stronach?
• komunikować się AJAXem?
STOP
mamy przecież MVC
&
mamy przecież
jQuery :)

31. AKTUALNIE NA TOPIE?

32. NA TOPIE
• React
• Angular
• Vue.js
• Jasmine
• Mocha
• Chai
• Jest
• AVA
• Tape
• Protractor
• Nightwatch
• CapserJS

33. REACT
„React is a JavaScript library for building user
interfaces. It uses a declarative paradigm and
aims to be both efficient and flexible.”
— From wikipedia

34. ANGULAR
„Angular is a platform (…) to build
applications with the web. (…) Angular
empowers developers to build applications
that live on the web, mobile, or the desktop”
— From Angular docs

35. VUE.JS
„Vue is a progressive framework for building user
interfaces. (…) The core library is focused on the
view layer only (…) On the other hand, Vue is also
perfectly capable of powering sophisticated Single-
Page Applications when used in combination
with modern tooling and supporting libraries.”
— Introduction Vue.js docs

36. React Angular Vue
Virtual DOM + - +
Framework - + -
Server side
rendering
Next.js Angular Universal Nuxt.js
Templates JSX
Angular’s {{ mustache }}
syntax
Single File
Components
Native React Native NativeScript/Ionic N/A
Data-binding One-way One-way One-way
I18N + + +*

37. W LICZBACH
React Angular Vue Backbone
Github stars 87,286 32,589 82,184 26,976
Contributors 1,163 574 165 298
Issues 303 1,801 93 36
StackOverflow 71,938 94,382* 13,291 20,470
MIT Tak* Tak Tak Tak
Pracuj.pl 289 286 61 48
PayScale $27,122 $22,248 N/A N/A
Dane na styczeń 2018

38. Źródło: http://www.timqian.com/star-history/#facebook/react&angular/angular&vuejs/vue

39. Źródło: http://www.npmtrends.com/angular-vs-react-vs-vue

40. Źródło: https://insights.stackoverflow.com/trends?tags=angularjs%2Cangular%2Creactjs

41. NA TOPIE
• React
• Angular
• Vue.js
• Jasmine
• Mocha
• Chai
• Jest
• Tape
• Protractor
• Nightwatch
• CapserJS
• AVA
• Karma
• …

42. NA TOPIE
• React
• Angular
• Vue.js
• Jasmine
• Mocha
• Chai
• Jest
• Tape
• Protractor
• Nightwatch
• CapserJS
• AVA
• Karma
• …

43. W LICZBACH
Jasmine Mocha Chai Jest Protractor
Github stars 13,238 14,539 5,004 15,392 7,267
Contributors 161 380 136 636 247
Issues 29 275 60 250 226
StackOverflow 9,111 5,350 1,508 N/A 7,721
MIT Tak Tak Tak Tak Tak
Dane na styczeń 2018

44. PODSUMUJMY
• Jeśli wolisz zdefiniowaną strukturę (framework): Angular
• Jeśli wolisz programować obiektowo: Angular
• Jeśli lubisz elastyczność: React
• Jeśli lubisz czysty kod: Angular lub Vue
• Jeśli aplikacja zapowiada się duża: Angular lub React
• Jeśli pracujesz sam lub w małym zespole: Vue lub React
• Jeśli chcesz mieć niski próg wejścia: Vue
• Jeśli chcesz mieć „lekkie” narzędzie: Vue
• Jeśli nie chcesz mieć trudności ze znalezieniem
programisty: Angular lub React
• Jeśli chcesz pisać w TypeScript: Angular lub React

45. A CO Z HTML I CSS?

46. HTML FRAMEWORK
• Bootstrap
• Foundation
• Semantic UI
• Pure by Yahoo!
• Material Design
• Boilerform
• Bulma
• Flat UI

47. I ZAWSZE PAMIĘTAJMY
O TESTACH!!!

49. THANKS!