Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jaki framework wybrać

62 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jaki framework wybrać

  1. 1. OD CZEGO ZACZĄĆ ZACZYNAMY PROJEKT, CZYLI
  2. 2. SOFTWARE ENGINEER & WEB DEVELOPER PAWEŁ TEKLIŃSKI github: https://github.com/teklakct twitter: https://twitter.com/tekla_to
  3. 3. JAKI FRAMEWORK
 WYBRAĆ?
  4. 4. źródło: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
  5. 5. NAJNOWSZY :)
  6. 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. 7. CZYM JEST WYBÓR FRAMEWORK’A?
  8. 8. INFORMACJI POTRZEBUJEMY
  9. 9. INFORMACJE kontekst projektu strona czy aplikacja framework czy biblioteka
  10. 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. 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. 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. 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. 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. 15. INFORMACJE kontekst projektu strona czy aplikacja framework czy biblioteka
  16. 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. 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. 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. 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. 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. 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. 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. 23. INFORMACJE kontekst projektu strona czy aplikacja framework czy biblioteka
  24. 24. FRAMEWORK CZY BIBLIOTEKA FRAMEWORK NASZ KOD BIBLIOTEKA
  25. 25. FRAMEWORK CZY BIBLIOTEKA FRAMEWORK NASZ KOD BIBLIOTEKA
  26. 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. 27. PO CO NAM
 JS FRAMEWORK • walidować formularze? • manipulować DOMem? • system szablonów? • renderować ten sam HTML w wielu stronach? • komunikować się AJAXem?
  28. 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. 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. 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. 31. AKTUALNIE NA TOPIE?
  32. 32. NA TOPIE • React • Angular • Vue.js • Jasmine • Mocha • Chai • Jest • AVA • Tape • Protractor • Nightwatch • CapserJS
  33. 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. 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. 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. 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. 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. 38. Źródło: http://www.timqian.com/star-history/#facebook/react&angular/angular&vuejs/vue
  39. 39. Źródło: http://www.npmtrends.com/angular-vs-react-vs-vue
  40. 40. Źródło: https://insights.stackoverflow.com/trends?tags=angularjs%2Cangular%2Creactjs
  41. 41. NA TOPIE • React • Angular • Vue.js • Jasmine • Mocha • Chai • Jest • Tape • Protractor • Nightwatch • CapserJS • AVA • Karma • …
  42. 42. NA TOPIE • React • Angular • Vue.js • Jasmine • Mocha • Chai • Jest • Tape • Protractor • Nightwatch • CapserJS • AVA • Karma • …
  43. 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. 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. 45. A CO Z HTML I CSS?
  46. 46. HTML FRAMEWORK • Bootstrap • Foundation • Semantic UI • Pure by Yahoo! • Material Design • Boilerform • Bulma • Flat UI
  47. 47. I ZAWSZE PAMIĘTAJMY O TESTACH!!!
  48. 48. THANKS!

×