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

1. 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

2. (node.js )
web development
prościej

3. wersja prelekcji: 0.10.0

4. o Was

5. 2015

7. 2016

8. efekt Lindy

11. mój kontekst

12. publicznie dostępne
serwisy informacyjne

14. Devs
HTML/JS

16. 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

17. 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

18. curl
wget
bot

20. 1. ARCHITEKTURA APLIKACJI
Resource-Oriented Client Architecture

21. Resource-Oriented Client
Architecture
• A collection of simple recommendations for decent
Web application frontends
http://roca-style.org/

23. ROCA
=
REST (backend)
+
Progressive Enhancement (frontend)

24. REST
2000

25. article front page
zasoby
(Resources)
baza danych
stan zasobów
(State)

26. article front page
zasoby
(Resources)
reprezentacja
(REpresentation)JSON XML
HTML
(hypermedia)
baza danych
stan zasobów
(State)

27. 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

28. Progressive
Enhancement
2003

29. Unobtrusive JS
2002

30. HTML CSS JS
http://roca-airways.herokuapp.com/

31. czynnik ludzki

32. wow!
ale
data
binding

33. wow
uniflow
ale
vdom
flux reflux redux

34. nie ma
thisa!
ale
FRP
mercury ? ?

35. Efekt IKEA

36. stawka w grze
(ang. skin in the game)

37. 2. NODE.js w naszym
ekosystemie
Wzorzec: Backends For Frontends

39. Web
Web
Native

40. Web
Web
Native

41. strona
główna
artykuł WebTV quizy

42. strona
główna
artykuł WebTV quizy
node.js
BFF
Java
monolithSPA
backend
PHPgroovyJavanode
node.js
BFF

43. strona
główna
artykuł WebTV quizy
node.js
BFF
Java
monolith
SPA
PHPgroovyJavanode
node.js
BFF

44. http://scs-architecture.org/

45. złożone zasoby

46. header
article
footer

49. varnish/nginx

51. wywołanie funkcji

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

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

54. http://upload.wikimedia.org/wikipedia/commons/5/53/Server-multiple.svg
https://openclipart.org/image/300px/svg_to_png/16073/kml-Document.png

57. article video
article text
link - sport widget
core content
article text

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

59. read URL
article video
article text
link - sport widget
article text

60. HTTPGET
article video
article text
link - sport widget
article text

61. HTML + (CSS) + (JS)
article video
article text
sport widget
article text

62. HTML only
HTML+CSS+JS

63. moja pierwsza aplikacja w node.js

64. 3. dependency injection
struktura, testowalność i zastępowalność komponentów w
nietrywialnych aplikacjach

65. Q: jak nadpisać require w testach?
A: użyj modułu rewire/proxyquire
ja: proszę nie

66. Q: jak nadpisać require w testach?
A: użyj modułu rewire/proxyquire
ja: proszę nie

67. Q: jak nadpisać require w testach?
A: użyj modułu rewire/proxyquire
ja: proszę nie

68. Q: jak robić DI w node.js?
A: ktoś pracuje nad klonem Springa
ja: oby nie!

69. Q: jak robić DI w node.js?
A: ktoś pracuje nad klonem Springa
ja: oby nie!

70. Q: jak robić DI w node.js?
A: ktoś pracuje nad klonem Springa
ja: oby nie!

72. new A(new B(), new C());

73. a(b(), c());

76. tylko bezstanowe ‘require’
rozsiane po kodzie
np. require(‘lodash’), require(‘url’), require(‘q’)

77. http://www.schibsted.pl/2015/12/
how-to-do-dependency-
injection-in-node-js/

79. 4. w poszukiwaniu idealnego
klienta HTTP
gdy request to za mało

80. mikroserwisy

81. APIklient

82. much starrrs
such popular
maaany forks

84. ponawianie
nieudanych
zapytań

89. APIklient

90. APIklient

91. APIklient

94. APIklient

95. odpowiedź API

96. “śpieszmy się kochać odpowiedzi z API,
tak szybko odchodzą”

97. APIklient

101. 5. AsynCHORNICZNOŚĆ
tresura aynchronicznej bestii

102. Java —> JS

103. sync —> async

104. callbacks async.js
promises
generators
async functions
streams
observables
event emitter

105. CALLBACKs

106. Nawet Kapitan Oczywisty to wie
• callback hell
• niewygodna obsługa wyjątków
• wymaga dodatkowych bibliotek (e.g. async.js)

107. bardziej subtelne problemy

108. łatwo wymieszać
kod synchroniczny i
asynchroniczny

111. inversion of control
trust issues

112. Hey I just met you

113. And this is crazy

114. but here’s my handler

117. Promisy na ratunek
jQuery Deferred
native
bluebird
Q

118. same ol’ callback hell

121. not synchronous enough?

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

123. 6. STYL PROGRAMOWANIA
this Javascript makes me fat

125. spójny styl

126. konwencje nazewnicze
i
formatowanie?

127. idomy

129. JS - the annoying parts
• var self = this;
• fn.bind(this);
• new i funkcje konstruktora

132. przeciętne książki

133. przyzwoite książki

134. świetne książki

138. look ma no this, new and
prototype

139. Siła woli i aktywność umysłowa
korzystają z tej samej puli zasobów

140. this-full JS makes me fat

142. 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