(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

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







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/

http://roca-style.org/

ROCA =

REST (backend) +

Progressive Enhancement (frontend)

REST

2000

article front page zasoby (Resources)

baza danych stan zasobów (State)


reprezentacja (REpresentation)JSON XML HTML

(hypermedia)



reprezentacja (REpresentation)JSON XML HTML

przeglądarka bot wget/curl


Transfer

stan aplikacji/interakcji

Progressive Enhancement

2003

Unobtrusive JS

2002

HTML CSS JS

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

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

strona główna artykuł WebTV quizy


node.js BFF

Java monolithSPA

backend

PHPgroovyJavanode

node.js BFF


node.js BFF

Java monolithSPA

PHPgroovyJavanode

node.js BFF

http://scs-architecture.org/

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



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


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

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

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?

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

https://github.com/kwasniew

https://twitter.com/kwasniew

http://www.slideshare.net/kwasniew

https://www.linkedin.com/pub/mateusz-kwasniewski/6/a97/583

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

Technology

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