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/

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

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

19.
Rozwiązania problemu

20.
2009: jQuery === JavaScript

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

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.
React nauczył mnie, że:

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.
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.
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.
Wniosek
Stosując frameworki bohatersko
obchodzimy problemy, które w
VanillaJS nie istnieją

31.
Prowadzenie bloga

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

33.
Czysty kanał RSS :-)

34.
Niech ktoś przefiltruje to za mnie!

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

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

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

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

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

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

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

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

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.
Źródło: https://getpocket.com/

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

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

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

48.
Środki przymusu
bezpośredniego

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

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

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

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

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

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

55.
Dlaczego projekt poboczny
warto napisać w Electronie?

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.
• 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.
• 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.
• 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.
Podważaj swoją wiedzę

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

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

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

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

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

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

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

68.
Najważniejsi są ludzie

69.
Efekt Krugera-Dunninga
Pewnośćsiebie
Wiedza

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

71.
Podsumowanie

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.
• 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.
• 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.
• 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.
• 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.
• 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.
Pytania?

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