jak nadążyć za światem front-endu - wordpress training day
TRANSCRIPT
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/
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/
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?
@dziudek
http://dziudek.pl
http://www.slideshare.net/dziudek
Tomasz Dziuda