1. Jak nadążyć za
światem front-endu?
Tomasz Dziuda
WordPress Training Day - 16.07.2016

2. Dlaczego warto?

3. WordPress + REST = SPA

4. WordPress + REST = SPA
Rozbudowane pluginy ~= SPA

5. WordPress + REST = SPA
Rozbudowane pluginy ~= SPA
Przyśpieszenie developmentu
wtyczek i motywów

6. Przyczyna problemu

7. HTML

8. HTML
CSS JavaScript

9. HTML
CSS JavaScript
AJAX
SEO Microdata

10. HTML
CSS JavaScript
AJAX
SEO Microdata
SASS
Workflow
Automation
Tools
RWD

11. HTML
CSS JavaScript
AJAX
SEO Microdata
SASS
Workflow
Automation
Tools
RWD
Accessibility
Motion DesignSPA
Progressive
Enhancement
Performance
WebComponents NPMJSX
REST

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. "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. Ironia losu
ES6 wprowadza klasy do JavaScript, więc
nadchodzi moda na...
programowanie funkcyjne ;-)

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. Źródło: http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/

18. Źródło: http://vanilla-js.com/
Najmniejszy i najwydajniejszy framework

19. Dobierz rozwiązanie do
problemu i unikaj
projektowania "na zapas"

20. Rozwiązania problemu

21. 2009: jQuery === JavaScript

22. 2009: jQuery === JavaScript
2013: AngularJS === JavaScript

23. 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

24. React nauczył mnie, że:

25. 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.

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. 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. 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. 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. 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.

31. Wniosek
Stosując frameworki bohatersko
obchodzimy problemy, które w
VanillaJS nie istnieją

32. Prowadzenie bloga

33. Źródło: https://github.com

43. Czysty kanał RSS :-)

44. Niech ktoś przefiltruje to za mnie!

45. Źródło: http://javascriptweekly.com/

46. Źródło: http://javascriptweekly.com/
Źródło: http://webtoolsweekly.com/

47. Źródło: http://dailyui.co/

48. Źródło: https://www.apichangelog.com/

49. Źródło: https://www.apichangelog.com/
Zbiór ciekawych newsletterów:
http://codecondo.com/weekly-newsletters-front-end-developers/

50. Zarządzanie dużą liczbą newsletterów

51. Potencjalnie
ważne
Potencjalne
odpady
Zarządzanie dużą liczbą newsletterów

52. Potencjalnie
ważne
Oznacz jako przeczytane
Potencjalne
odpady
Zarządzanie dużą liczbą newsletterów

53. Potencjalnie
ważne
Oznacz jako przeczytane
Potencjalne
odpady
Sprawdzane raz
na 3 dni
Sprawdzane raz
na tydzień
Zarządzanie dużą liczbą newsletterów

54. Źródło: https://getpocket.com/

55. Źródło: https://getpocket.com/
999+

56. Prawdopodobnie nigdy nie wykorzystamy 3/4
rozwiązań o których czytamy...
... ale warto wiedzieć, że są i jakie problemy
rozwiązują.

57. Prawdopodobnie nigdy nie wykorzystamy 3/4
rozwiązań o których czytamy...
... ale warto wiedzieć, że istnieją i jakie problemy
rozwiązują.

58. Środki przymusu
bezpośredniego

59. Źródło: http://dziudek.github.io/wp-links/
Źródło: http://dziudek.github.io/dev-links/

60. Źródło: http://www.codewars.com/

61. Źródło: http://rosalind.info/

62. Źródło: http://es6katas.org/

63. Źródło: http://codepen.io/

64. Źródło: http://sideprojects.in/

66. Dlaczego projekt poboczny
warto napisać w Electronie?

67. • 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

68. • 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

69. • 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

70. • 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

71. Podważaj swoją wiedzę

72. Źródło: https://google.pl

73. Źródło: http://caniuse.com/

74. Źródło: https://www.chromestatus.com/features

75. Źródło: https://dev.modern.ie/platform/status/

76. Źródło: https://platform-status.mozilla.org/

77. Źródło: https://webkit.org/status/

78. Historia wersji przeglądarek:
https://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
6 tygodni
~6 tygodni
evergreen

79. Najważniejsi są ludzie

81. Efekt Krugera-Dunninga
Pewnośćsiebie
Wiedza

82. Polecam: http://www.slideshare.net/ferrantes/the-human-element-47816358

83. Podsumowanie

84. • 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

85. • 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

86. • 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

87. • 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

88. • 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

89. • 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

90. Pytania?

91. tomasz@dziuda.com
@dziudek
http://dziudek.pl
http://www.slideshare.net/dziudek
Tomasz Dziuda