(node.js) Web development - prościej (pl)

plan wycieczki• 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

(node.js ) web development

prościej

wersja prelekcji: 0.10.0

o Was

2015

2016

efekt Lindy

mój kontekst

publicznie dostępne serwisy informacyjne

Devs

HTML/JS

http://realgamernewz.com/wp-content/uploads/2014/06/GameDev-Denis-Rozaj-of-IzBoot-Abusing-Applicants.jpg

http://sportsradiopd.com/wp-content/uploads/2014/10/phoneyeller.jpg

http://pixabay.com/static/uploads/photo/2012/02/28/15/40/adult-18377_640.jpg

500kB of JS

HTML+CSS

http://realgamernewz.com/wp-content/uploads/2014/06/GameDev-Denis-Rozaj-of-IzBoot-Abusing-Applicants.jpg

http://sportsradiopd.com/wp-content/uploads/2014/10/phoneyeller.jpg

http://pixabay.com/static/uploads/photo/2012/02/28/15/40/adult-18377_640.jpg

curl

wget

bot

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

HTML CSS JS

http://roca-airways.herokuapp.com/

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

node.js BFF

Java monolithSPA

backend

PHPgroovyJavanode

node.js BFF

strona główna artykuł WebTV quizy

node.js BFF

Java monolithSPA

PHPgroovyJavanode

node.js BFF

http://scs-architecture.org/

złożone zasoby

header

article

footer

varnish/nginx

wywołanie funkcji

var processed = new ESI().process(html);

http://upload.wikimedia.org/wikipedia/commons/5/53/Server-multiple.svg

http://upload.wikimedia.org/wikipedia/commons/5/53/Server-multiple.svg

https://openclipart.org/image/300px/svg_to_png/16073/kml-Document.png

article video

article text

link - sport widget

core content

article text

<a role="widget" class="widget-link" href=”//example.com/sportWidget”> sport widget </a>

link - sport widget

read URL

article video

article text

link - sport widget

article text

HTTP

GET

article video

article text

link - sport widget

article text

HTML + (CSS) + (JS)

article video

article text

sport widget

article text

HTML only

HTML+CSS+JS

moja pierwsza aplikacja w node.js

3. dependency injectionstruktura, testowalność i zastępowalność komponentów w

nietrywialnych aplikacjach

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());

tylko bezstanowe ‘require’ rozsiane po kodzie

np. require(‘lodash’), require(‘url’), require(‘q’)

http://www.schibsted.pl/2015/12/how-to-do-dependency-

injection-in-node-js/

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

callbacks async.js

promises

generators

async functions

streams

observables

event emitter

CALLBACKs

Nawet Kapitan Oczywisty to wie

• callback hell

• niewygodna obsługa wyjątków

• wymaga dodatkowych bibliotek (e.g. async.js)

bardziej subtelne problemy

ł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 synchronous enough?

http://mcfunley.com/choose-boring-technology-slides

6. STYL PROGRAMOWANIAthis Javascript makes me fat

spójny styl

konwencje nazewnicze

i

formatowanie?

idomy

JS - the annoying parts

• var self = this;

• fn.bind(this);

• new i funkcje konstruktora

przeciętne książki

przyzwoite książki

świetne książki

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

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