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

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

3. wersja prelekcji: 4.4.2

4. o Was

5. 2013 2014 2015 2016
{

6. node
JAVA

9. 2016

10. efekt Lindy

13. MAM nowy framework

15. mój kontekst

16. publicznie dostępne
serwisy informacyjne

18. Devs
HTML/JS

21. 500kB of JS
HTML+CSS

22. curl
wget
bot

24. HTML

25. 1. ARCHITEKTURA APLIKACJI
Resource-Oriented Client Architecture

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

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

29. REST
2000

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

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

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

34. Progressive Enhancement
2003

35. Unobtrusive JS
2002

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

37. czynnik ludzki

38. wow!
ale
data
binding

39. wow
uniflow
ale
vdom
flux reflux redux

40. nie ma
thisa!
ale
FRP
mercury ? ?

41. Efekt IKEA

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

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

46. Web
Web
Native

47. Web
Web
Native

48. strona
główna
artykuł WebTV quizy

49. strona
główna
artykuł WebTV quizy
monolit
HTML

50. strona
główna
artykuł WebTV quizy
HTML
bounded
context

51. strona
główna
artykuł WebTV quizy
bounded
context

52. strona
główna
artykuł WebTV quizy
bounded
context
co z UI?

53. strona
główna
artykuł WebTV quizy
bounded
context
Single Page App
BFF
JSON

54. strona
główna
artykuł WebTV quizy
bounded
context
SPA
JSON
BFF BFF BFF
monolith
HTML HTML HTML

55. strona
główna
artykuł WebTV quizy
bounded
context
SPA
JSON
BFF BFF BFF
monolith
HTML HTML HTML

56. strona
główna
artykuł WebTV quizy
bounded
context
SPA
JSON
BFF BFF BFF
monolith
HTML HTML HTML

57. moja pierwsza aplikacja w node.js

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

59. require('third-party-module')
require('./mymodule')

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

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

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

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

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

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

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

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

73. ale…

74. expect(this.style.of.assertions).to.not.be.ok;

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

76. mikroserwisy

77. APIklient

78. much starrrs
such popular
maaany forks

80. ponawianie
nieudanych
zapytań

85. APIklient

86. APIklient

87. APIklient

91. APIklient

92. odpowiedź API

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

94. APIklient

98. 5. AsynCHORNICZNOŚĆ
tresura aynchronicznej bestii

99. Java —> JS

100. sync —> async

101. var article = articleRepository.getById(“ap1234”);

102. articleRepository.getById('ap1234', function(err, data) {
if(err)
handleError(err);
else
processData(data);
});

103. articleRepository.getById('ap1234', function(err, data) {
if(err)
handleError(err);
else
processData(data);
});

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

105. CALLBACKs

109. bardziej subtelne problemy

110. Co jeżeli
doA i doD
są synchroniczne?

111. łatwo wymieszać
kod synchroniczny i
asynchroniczny

114. inversion of control
trust issues

115. Hey I just met you

116. And this is crazy

117. but here’s my handler

121. Promisy na ratunek
jQuery Deferred
native
bluebird
Q

122. same ol’ callback hell

125. not ES7 enough?

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

127. 6. STYL PROGRAMOWANIA
this Javascript makes me fat

129. spójny styl

130. konwencje nazewnicze
i
formatowanie?

132. idomy

136. DI?

137. bez
frameworków

138. Asynchroniczność?

139. Promisy

140. trucizna

141. The Annoying Parts
Confusion
var self = this;
fn.bind(this);
new i
funkcje
konstruktora

144. przeciętne książki

145. przyzwoite książki

146. świetne książki

150. Functional programming
academic
absurdity
practical
stuff
functions
as first class
citizens
closures
pure functions
map/filter/reduce
y-combinators
currying
partial application
fn composition
immutability
pointfree
functors
monads
comonads
f-algebras
recursion

151. look ma no this, new and
prototype

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

153. this-full JS makes me fat

154. 7. NODE.JS i AUTOMATYZACJA
gdy wszystko nas zawodzi

155. if [ "$a" -eq 273 ]
WHAAAT!!??

157. klik klik

159. “klikanie nie skaluje się,
klikanie nie jest audytowalne”

160. “klikanie nie skaluje się,
klikanie nie jest audytowalne”
uncle bob

161. “klikanie nie skaluje się,
klikanie nie jest audytowalne”
Douglas Crockford

162. high level infrastructure as code

163. nie działa

164. Heroku infrastructure as
code

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

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

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

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

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

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

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

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

180. JS node.js

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