Post on 17-Feb-2017
(node.js ) web development
prościej
plan wycieczki• Intro: Jestem przytłoczony. Pomocy!
• 1 - Architektura UI w stylu ROCA
• 2 - Node.js jako Backend for Frontend
• 3 - Dependency Injection w node.js
• 4 - Stabilny klient HTTP do produkcyjnych zastosowań
• 5 - Asynchroniczność: tresura asynchronicznej bestii
• 6 - Styl kodowania: dlaczego jestem gruby od tego JS
• 7 - Infrastruktura Heroku jako kod JS
wersja prelekcji: 4.4.2
o Was
2013 2014 2015 2016
{
node
JAVA
2016
efekt Lindy
MAM nowy framework
mój kontekst
publicznie dostępne serwisy informacyjne
Devs
HTML/JS
500kB of JS
HTML+CSS
curl
wget
bot
HTML
1. ARCHITEKTURA APLIKACJIResource-Oriented Client Architecture
Resource-Oriented Client Architecture
• A collection of simple recommendations for decent Web application frontends
http://roca-style.org/
ROCA =
REST (backend) +
Progressive Enhancement (frontend)
REST
2000
article front page zasoby (Resources)
baza danych stan zasobów (State)
article front page zasoby (Resources)
reprezentacja (REpresentation)JSON XML HTML
(hypermedia)
baza danych stan zasobów (State)
article front page zasoby (Resources)
reprezentacja (REpresentation)JSON XML HTML
przeglądarka bot wget/curl
baza danych stan zasobów (State)
Transfer
stan aplikacji/interakcji
Progressive Enhancement
2003
Unobtrusive JS
2002
czynnik ludzki
wow! ale
data binding
wow uniflow
ale vdom
flux reflux redux
nie ma thisa!
ale FRP
mercury ? ?
Efekt IKEA
stawka w grze (ang. skin in the game)
2. NODE.js w naszym ekosystemie
Wzorzec: Backends For Frontends
Web
Web
Native
Web
Web
Native
strona główna artykuł WebTV quizy
strona główna artykuł WebTV quizy
monolit
HTML
strona główna artykuł WebTV quizy
HTML
bounded context
strona główna artykuł WebTV quizy
bounded context
strona główna artykuł WebTV quizy
bounded context
co z UI?
strona główna artykuł WebTV quizy
bounded context
Single Page App
BFF
JSON
strona główna artykuł WebTV quizy
bounded context
SPA
JSONBFF BFF BFF
monolith
HTML HTML HTML
strona główna artykuł WebTV quizy
bounded context
SPA
JSONBFF BFF BFF
monolith
HTML HTML HTML
strona główna artykuł WebTV quizy
bounded context
SPA
JSONBFF BFF BFF
monolith
HTML HTML HTML
moja pierwsza aplikacja w node.js
3. dependency injectionstruktura, testowalność i zastępowalność komponentów w
nietrywialnych aplikacjach
require('third-party-module')
require('./mymodule')
Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
new A(new B(), new C());
a(b(), c());
ale…
expect(this.style.of.assertions).to.not.be.ok;
4. w poszukiwaniu idealnego klienta HTTPgdy request to za mało
mikroserwisy
APIklient
much starrrssuch popular
maaany forks
ponawianie nieudanych
zapytań
APIklient
APIklient
APIklient
APIklient
odpowiedź API
“śpieszmy się kochać odpowiedzi z API, tak szybko odchodzą”
APIklient
5. AsynCHORNICZNOŚĆtresura aynchronicznej bestii
Java —> JS
sync —> async
var article = articleRepository.getById(“ap1234”);
articleRepository.getById('ap1234', function(err, data) { if(err) handleError(err); else processData(data);});
articleRepository.getById('ap1234', function(err, data) { if(err) handleError(err); else processData(data); });
callbacks async.js
promises
generators
async functions
streams
observables
event emitter
CALLBACKs
bardziej subtelne problemy
Co jeżelidoA i doD
są synchroniczne?
łatwo wymieszać kod synchroniczny i
asynchroniczny
inversion of control trust issues
Hey I just met you
And this is crazy
but here’s my handler
Promisy na ratunekjQuery Deferred
native
bluebirdQ
same ol’ callback hell
not ES7 enough?
http://mcfunley.com/choose-boring-technology-slides
6. STYL PROGRAMOWANIAthis Javascript makes me fat
spójny styl
konwencje nazewnicze
i
formatowanie?
idomy
DI?
bezframeworków
Asynchroniczność?
Promisy
trucizna
The Annoying Parts
Confusion
var self = this;
fn.bind(this);
new i funkcje
konstruktora
przeciętne książki
przyzwoite książki
świetne książki
Functional programming
academic absurdity
practical stuff
functions as first class
citizens
closures
pure functions
map/filter/reduce
y-combinatorscurrying
partial applicationfn composition
immutability
pointfree
functors
monadscomonads
f-algebras
recursion
look ma no this, new and prototype
Siła woli i aktywność umysłowa korzystają z tej samej puli zasobów
this-full JS makes me fat
7. NODE.JS i AUTOMATYZACJAgdy wszystko nas zawodzi
if [ "$a" -eq 273 ]
WHAAAT!!??
klik klik
“klikanie nie skaluje się, klikanie nie jest audytowalne”
“klikanie nie skaluje się, klikanie nie jest audytowalne”
uncle bob
“klikanie nie skaluje się, klikanie nie jest audytowalne”
Douglas Crockford
high level infrastructure as code
nie działa
Heroku infrastructure as code
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
Podsumowanie•efekt Lindy i czarne łabędzie
•styl ROCA alternatywą dla SPA
•node.js do pisania Backend For Frontend
•DI - można bez frameworków
•Klient HTTP - nie tylko “happy path”
•Właściwa abstrakcja do async
•JS bez this
•JS jako język do automatyzacji
JS node.js
https://github.com/kwasniew https://twitter.com/kwasniew http://www.slideshare.net/kwasniew https://www.linkedin.com/pub/mateusz-kwasniewski/6/a97/583
Mateusz Kwaśniewski