Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

(node.js) Web Development - prościej

1,189 views

Published on

- jak tworzyć testowalne aplikacje stosując wzorzec Dependency Injection (bez frameworków!).
- jak node.js pomógł rozwiązać problemy kulturowe a programiści przestali nadużywać Single Page App'y
- jak komunikować się po HTTP z niestabilnymi mikrousługami
- jak automatyzować infrastrukturę Heroku z użyciem kodu JS
Carly Rae Jepsen pomoże mi wytłumaczyć dlaczego nie używamy callbacków.
A na koniec zdradzę dlaczego jestem gruby od tego JS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

(node.js) Web Development - prościej

  1. 1. (node.js ) web development prościej
  2. 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. 3. wersja prelekcji: 4.4.2
  4. 4. o Was
  5. 5. 2013 2014 2015 2016 {
  6. 6. node JAVA
  7. 7. 2016
  8. 8. efekt Lindy
  9. 9. MAM nowy framework
  10. 10. mój kontekst
  11. 11. publicznie dostępne serwisy informacyjne
  12. 12. Devs HTML/JS
  13. 13. 500kB of JS HTML+CSS
  14. 14. curl wget bot
  15. 15. HTML
  16. 16. 1. ARCHITEKTURA APLIKACJI Resource-Oriented Client Architecture
  17. 17. Resource-Oriented Client Architecture • A collection of simple recommendations for decent Web application frontends http://roca-style.org/
  18. 18. ROCA = REST (backend) + Progressive Enhancement (frontend)
  19. 19. REST 2000
  20. 20. article front page zasoby (Resources) baza danych stan zasobów (State)
  21. 21. article front page zasoby (Resources) reprezentacja (REpresentation)JSON XML HTML (hypermedia) baza danych stan zasobów (State)
  22. 22. 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
  23. 23. Progressive Enhancement 2003
  24. 24. Unobtrusive JS 2002
  25. 25. HTML CSS JS http://roca-airways.herokuapp.com/
  26. 26. czynnik ludzki
  27. 27. wow! ale data binding
  28. 28. wow uniflow ale vdom flux reflux redux
  29. 29. nie ma thisa! ale FRP mercury ? ?
  30. 30. Efekt IKEA
  31. 31. stawka w grze (ang. skin in the game)
  32. 32. 2. NODE.js w naszym ekosystemie Wzorzec: Backends For Frontends
  33. 33. Web Web Native
  34. 34. Web Web Native
  35. 35. strona główna artykuł WebTV quizy
  36. 36. strona główna artykuł WebTV quizy monolit HTML
  37. 37. strona główna artykuł WebTV quizy HTML bounded context
  38. 38. strona główna artykuł WebTV quizy bounded context
  39. 39. strona główna artykuł WebTV quizy bounded context co z UI?
  40. 40. strona główna artykuł WebTV quizy bounded context Single Page App BFF JSON
  41. 41. strona główna artykuł WebTV quizy bounded context SPA JSON BFF BFF BFF monolith HTML HTML HTML
  42. 42. strona główna artykuł WebTV quizy bounded context SPA JSON BFF BFF BFF monolith HTML HTML HTML
  43. 43. strona główna artykuł WebTV quizy bounded context SPA JSON BFF BFF BFF monolith HTML HTML HTML
  44. 44. moja pierwsza aplikacja w node.js
  45. 45. 3. dependency injection struktura, testowalność i zastępowalność komponentów w nietrywialnych aplikacjach
  46. 46. require('third-party-module') require('./mymodule')
  47. 47. Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
  48. 48. Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
  49. 49. Q: jak nadpisać require w testach? A: użyj modułu rewire/proxyquire ja: proszę nie
  50. 50. Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
  51. 51. Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
  52. 52. Q: jak robić DI w node.js? A: ktoś pracuje nad klonem Springa ja: oby nie!
  53. 53. new A(new B(), new C());
  54. 54. a(b(), c());
  55. 55. ale…
  56. 56. expect(this.style.of.assertions).to.not.be.ok;
  57. 57. 4. w poszukiwaniu idealnego klienta HTTP gdy request to za mało
  58. 58. mikroserwisy
  59. 59. APIklient
  60. 60. much starrrs such popular maaany forks
  61. 61. ponawianie nieudanych zapytań
  62. 62. APIklient
  63. 63. APIklient
  64. 64. APIklient
  65. 65. APIklient
  66. 66. odpowiedź API
  67. 67. “śpieszmy się kochać odpowiedzi z API, tak szybko odchodzą”
  68. 68. APIklient
  69. 69. 5. AsynCHORNICZNOŚĆ tresura aynchronicznej bestii
  70. 70. Java —> JS
  71. 71. sync —> async
  72. 72. var article = articleRepository.getById(“ap1234”);
  73. 73. articleRepository.getById('ap1234', function(err, data) { if(err) handleError(err); else processData(data); });
  74. 74. articleRepository.getById('ap1234', function(err, data) { if(err) handleError(err); else processData(data); });
  75. 75. callbacks async.js promises generators async functions streams observables event emitter
  76. 76. CALLBACKs
  77. 77. bardziej subtelne problemy
  78. 78. Co jeżeli doA i doD są synchroniczne?
  79. 79. łatwo wymieszać kod synchroniczny i asynchroniczny
  80. 80. inversion of control trust issues
  81. 81. Hey I just met you
  82. 82. And this is crazy
  83. 83. but here’s my handler
  84. 84. Promisy na ratunek jQuery Deferred native bluebird Q
  85. 85. same ol’ callback hell
  86. 86. not ES7 enough?
  87. 87. http://mcfunley.com/choose-boring-technology-slides
  88. 88. 6. STYL PROGRAMOWANIA this Javascript makes me fat
  89. 89. spójny styl
  90. 90. konwencje nazewnicze i formatowanie?
  91. 91. idomy
  92. 92. DI?
  93. 93. bez frameworków
  94. 94. Asynchroniczność?
  95. 95. Promisy
  96. 96. trucizna
  97. 97. The Annoying Parts Confusion var self = this; fn.bind(this); new i funkcje konstruktora
  98. 98. przeciętne książki
  99. 99. przyzwoite książki
  100. 100. świetne książki
  101. 101. 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
  102. 102. look ma no this, new and prototype
  103. 103. Siła woli i aktywność umysłowa korzystają z tej samej puli zasobów
  104. 104. this-full JS makes me fat
  105. 105. 7. NODE.JS i AUTOMATYZACJA gdy wszystko nas zawodzi
  106. 106. if [ "$a" -eq 273 ] WHAAAT!!??
  107. 107. klik klik
  108. 108. “klikanie nie skaluje się, klikanie nie jest audytowalne”
  109. 109. “klikanie nie skaluje się, klikanie nie jest audytowalne” uncle bob
  110. 110. “klikanie nie skaluje się, klikanie nie jest audytowalne” Douglas Crockford
  111. 111. high level infrastructure as code
  112. 112. nie działa
  113. 113. Heroku infrastructure as code
  114. 114. 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
  115. 115. 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
  116. 116. 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
  117. 117. 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
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. 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
  122. 122. JS node.js
  123. 123. 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

×