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.

Jak nadążyć za światem front-endu - WordPress Training Day

3,111 views

Published on

Zbiór wskazówek i przemyśleń na temat szybko rozwijającego się świata front-endu.

Published in: Internet
  • Be the first to comment

Jak nadążyć za światem front-endu - WordPress Training Day

  1. 1. Jak nadążyć za światem front-endu? Tomasz Dziuda WordPress Training Day - 16.07.2016
  2. 2. Dlaczego warto?
  3. 3. WordPress + REST = SPA
  4. 4. WordPress + REST = SPA Rozbudowane pluginy ~= SPA
  5. 5. WordPress + REST = SPA Rozbudowane pluginy ~= SPA Przyśpieszenie developmentu wtyczek i motywów
  6. 6. Przyczyna problemu
  7. 7. HTML
  8. 8. HTML CSS JavaScript
  9. 9. HTML CSS JavaScript AJAX SEO Microdata
  10. 10. HTML CSS JavaScript AJAX SEO Microdata SASS Workflow Automation Tools RWD
  11. 11. HTML CSS JavaScript AJAX SEO Microdata SASS Workflow Automation Tools RWD Accessibility Motion DesignSPA Progressive Enhancement Performance WebComponents NPMJSX REST
  12. 12. HTML CSS JavaScript AJAX SEO Microdata SASS Workflow Automation Tools RWD Accessibility Motion DesignSPA Progressive Enhancement Performance WebComponents NPMJSX Houdini TypeScript Web WorkersService Workers CSSX NativeScript Offline-first REST
  13. 13. "In programming, there is often an obsession with using the latest and greatest technology. Programmers view the use of edge technology as its own badge of honor, and are quick to throw away legacy applications." Źródło: https://signalvnoise.com/posts/3933-a-love-for-legacy https://tommcfarlin.com/latest-and-greatest-technology/
  14. 14. Ironia losu ES6 wprowadza klasy do JavaScript, więc nadchodzi moda na... programowanie funkcyjne ;-)
  15. 15. Nie sztuką jest nauczyć się podstaw 10 frameworków Sztuką jest umieć odtworzyć na swój sposób ich główne idee działania
  16. 16. Źródło: http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/
  17. 17. Źródło: http://vanilla-js.com/ Najmniejszy i najwydajniejszy framework
  18. 18. Dobierz rozwiązanie do problemu i unikaj projektowania "na zapas"
  19. 19. Rozwiązania problemu
  20. 20. 2009: jQuery === JavaScript
  21. 21. 2009: jQuery === JavaScript 2013: AngularJS === JavaScript
  22. 22. two-way data-binding currying closures Temporal Dead Zone Virtual DOM hoisting promises AJAX JSON JSON-P Regular Expressions prototypes inheritance partial application module pattern progressive enhancement localStorage functional programming chaining callback dirty checking Web Components
  23. 23. React nauczył mnie, że:
  24. 24. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów ssie (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  25. 25. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów to zło (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  26. 26. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów to zło (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  27. 27. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów to zło (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  28. 28. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów to zło (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  29. 29. React nauczył mnie, że: • łatwo go wypiąć z projektu ;-) • wsparcie dla kilku formatów komponentów to zło (JSX, JS, ES6) • uparte trzymanie się pewnych konwencji powoduje powstawanie nadmiarowego kodu • pogłoski o jego wydajności są przesadzone • trzeba go stosować z całym dobrodziejstwem inwentarza (Webpack, Babel, Redux, Jest) • najlepiej nadaje się do bardzo prostych SPA z dużą ilością danych albo do wielkich projektów.
  30. 30. Wniosek Stosując frameworki bohatersko obchodzimy problemy, które w VanillaJS nie istnieją
  31. 31. Prowadzenie bloga
  32. 32. Źródło: https://github.com
  33. 33. Czysty kanał RSS :-)
  34. 34. Niech ktoś przefiltruje to za mnie!
  35. 35. Źródło: http://javascriptweekly.com/
  36. 36. Źródło: http://javascriptweekly.com/ Źródło: http://webtoolsweekly.com/
  37. 37. Źródło: http://dailyui.co/
  38. 38. Źródło: https://www.apichangelog.com/
  39. 39. Źródło: https://www.apichangelog.com/ Zbiór ciekawych newsletterów: http://codecondo.com/weekly-newsletters-front-end-developers/
  40. 40. Zarządzanie dużą liczbą newsletterów
  41. 41. Potencjalnie ważne Potencjalne odpady Zarządzanie dużą liczbą newsletterów
  42. 42. Potencjalnie ważne Oznacz jako przeczytane Potencjalne odpady Zarządzanie dużą liczbą newsletterów
  43. 43. Potencjalnie ważne Oznacz jako przeczytane Potencjalne odpady Sprawdzane raz na 3 dni Sprawdzane raz na tydzień Zarządzanie dużą liczbą newsletterów
  44. 44. Źródło: https://getpocket.com/
  45. 45. Źródło: https://getpocket.com/ 999+
  46. 46. Prawdopodobnie nigdy nie wykorzystamy 3/4 rozwiązań o których czytamy... ... ale warto wiedzieć, że są i jakie problemy rozwiązują.
  47. 47. Prawdopodobnie nigdy nie wykorzystamy 3/4 rozwiązań o których czytamy... ... ale warto wiedzieć, że istnieją i jakie problemy rozwiązują.
  48. 48. Środki przymusu bezpośredniego
  49. 49. Źródło: http://dziudek.github.io/wp-links/ Źródło: http://dziudek.github.io/dev-links/
  50. 50. Źródło: http://www.codewars.com/
  51. 51. Źródło: http://rosalind.info/
  52. 52. Źródło: http://es6katas.org/
  53. 53. Źródło: http://codepen.io/
  54. 54. Źródło: http://sideprojects.in/
  55. 55. Dlaczego projekt poboczny warto napisać w Electronie?
  56. 56. • Wsparcie dla najnowszych standardów • Można podszkolić się w node.js • Aplikacje w Electronie to głównie SPA • Dostęp do systemowych API daje ciekawe możliwości
  57. 57. • Wsparcie dla najnowszych standardów • Można podszkolić się w node.js • Aplikacje w Electronie to głównie SPA • Dostęp do systemowych API daje ciekawe możliwości
  58. 58. • Wsparcie dla najnowszych standardów • Można podszkolić się w node.js • Aplikacje w Electronie to głównie SPA • Dostęp do systemowych API daje ciekawe możliwości
  59. 59. • Wsparcie dla najnowszych standardów • Można podszkolić się w node.js • Aplikacje w Electronie to głównie SPA • Dostęp do systemowych API daje ciekawe możliwości
  60. 60. Podważaj swoją wiedzę
  61. 61. Źródło: https://google.pl
  62. 62. Źródło: http://caniuse.com/
  63. 63. Źródło: https://www.chromestatus.com/features
  64. 64. Źródło: https://dev.modern.ie/platform/status/
  65. 65. Źródło: https://platform-status.mozilla.org/
  66. 66. Źródło: https://webkit.org/status/
  67. 67. Historia wersji przeglądarek: https://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg 6 tygodni ~6 tygodni evergreen
  68. 68. Najważniejsi są ludzie
  69. 69. Efekt Krugera-Dunninga Pewnośćsiebie Wiedza
  70. 70. Polecam: http://www.slideshare.net/ferrantes/the-human-element-47816358
  71. 71. Podsumowanie
  72. 72. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj, podważaj i ćwicz swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  73. 73. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj, podważaj i ćwicz swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  74. 74. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj, podważaj i ćwicz swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  75. 75. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj i podważaj swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  76. 76. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj i podważaj swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  77. 77. • Zachowaj zdrowy rozsądek • Unikaj programistycznego wizjonerstwa • Opanuj bardzo dobrze VanillaJS • Zdobywaj i podważaj swoją wiedzę regularnie • Dziel się zdobytą wiedzą • Nowe technologie testuj w projektach pobocznych
  78. 78. Pytania?
  79. 79. tomasz@dziuda.com @dziudek http://dziudek.pl http://www.slideshare.net/dziudek Tomasz Dziuda

×