Jaki framework wybrać
- 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
- 4. źródło: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
- 5. NAJNOWSZY :)
- 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 :)
- 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
- 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!