Jak nadążyć za światem front-endu?

Tomasz Dziuda

WordPress Training Day - 16.07.2016

Dlaczego warto?

WordPress + REST = SPA

WordPress + REST = SPA

Rozbudowane pluginy ~= SPA

WordPress + REST = SPA

Rozbudowane pluginy ~= SPA

Przyśpieszenie developmentu wtyczek i motywów

Przyczyna problemu

HTML

HTMLCSS JavaScript

HTMLCSS JavaScript

AJAX

SEO Microdata

HTMLCSS JavaScript

AJAX

SEO Microdata

SASSWorkflow

Automation Tools

RWD

HTMLCSS JavaScript

AJAX

SEO Microdata

SASSWorkflow

Automation Tools

RWDAccessibility

Motion DesignSPA

Progressive Enhancement

Performance

WebComponents NPMJSX

REST

HTMLCSS JavaScript

AJAX

SEO Microdata

SASSWorkflow

Automation Tools

RWDAccessibility

Motion DesignSPA

Progressive Enhancement

Performance

WebComponents NPMJSX

Houdini

TypeScript

Web WorkersService Workers

CSSXNativeScript

Offline-first

REST

"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/

Ironia losu

ES6 wprowadza klasy do JavaScript, więc nadchodzi moda na...

programowanie funkcyjne ;-)

Nie sztuką jest nauczyć się podstaw 10 frameworków

Sztuką jest umieć odtworzyć na swój sposób ich główne idee działania

Źródło: http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/

Źródło: http://vanilla-js.com/

Najmniejszy i najwydajniejszy framework

Dobierz rozwiązanie do problemu i unikaj

projektowania "na zapas"

Rozwiązania problemu

2009: jQuery === JavaScript

2009: jQuery === JavaScript

2013: AngularJS === JavaScript

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 checkingWeb Components

React nauczył mnie, że:

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.

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.

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.

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.

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.

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.

Wniosek

Stosując frameworki bohatersko obchodzimy problemy, które w

VanillaJS nie istnieją

Prowadzenie bloga

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

Czysty kanał RSS :-)

Niech ktoś przefiltruje to za mnie!

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

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

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

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

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

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

Zbiór ciekawych newsletterów:

http://codecondo.com/weekly-newsletters-front-end-developers/

Zarządzanie dużą liczbą newsletterów

Potencjalnie ważne

Potencjalne odpady

Zarządzanie dużą liczbą newsletterów

Potencjalnie ważne

Oznacz jako przeczytane

Potencjalne odpady

Zarządzanie dużą liczbą newsletterów

Potencjalnie ważne

Oznacz jako przeczytane

Potencjalne odpady

Sprawdzane raz na 3 dni

Sprawdzane raz na tydzień

Zarządzanie dużą liczbą newsletterów

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

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

999+

Prawdopodobnie nigdy nie wykorzystamy 3/4 rozwiązań o których czytamy...

... ale warto wiedzieć, że są i jakie problemy rozwiązują.

Prawdopodobnie nigdy nie wykorzystamy 3/4 rozwiązań o których czytamy...

... ale warto wiedzieć, że istnieją i jakie problemy rozwiązują.

Środki przymusu bezpośredniego

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

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

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

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

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

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

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

Dlaczego projekt poboczny warto napisać w Electronie?

• 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

• 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

• 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

• 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

Podważaj swoją wiedzę

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

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

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

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

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

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

Historia wersji przeglądarek: https://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

6 tygodni

~6 tygodni

evergreen

Najważniejsi są ludzie

Efekt Krugera-Dunninga

Pew

ność

sieb

ie

Wiedza

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

Podsumowanie

• 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

• 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

• 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

• 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

• 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

• 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

Pytania?

tomasz@dziuda.com

@dziudek

http://dziudek.pl

http://www.slideshare.net/dziudek

Tomasz Dziuda