Ako vytvoriť škálovateľnú JS webaplikáciu.

1. &
ako vytvoriť škálovateľnú Javascript web-aplikáciu

2. Prečo Reqire.JS?
Web stránky => Web aplikácie
stúpa komplexita kódu ako aplikácia rastie
Ručný wiring sa stáva nemožný
developeri potrebujú nástroje na “modularizáciu”
Optimalizovaný deployment
výsledný build s pár HTTP rqs

3. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

4. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

5. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

6. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

7. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

8. Web stránky => Web aplikácie
klasické web stránky vrátia vždy celý dokument

9. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

10. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

11. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

12. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

13. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

14. Web stránky => Web aplikácie
Web-app bootstrapne, potom už posiela iba payload

15. Prečo web-aplikácie
Rýchlosť

16. Prečo web-aplikácie
Rýchlosť
Jacob Nielsen o časoch odozvy
• 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels
like it was caused by the user, not the computer. This level of responsiveness is
essential to support the feeling of direct manipulation.
• 1 second keeps the user's flow of thought seamless. Users can sense a delay, and thus
know the computer is generating the outcome, but they still feel in control of the
overall experience and that they're moving freely rather than waiting on the computer.
• 10 seconds keeps the user's attention. From 1–10 seconds, users definitely feel at the
mercy of the computer and wish it was faster, but they can handle it. After 10 seconds,
they start thinking about other things, making it harder to get their brains back on
track once the computer finally does respond.

17. Prečo web-aplikácie
“Tučný klient” je rýchlejší
• Spracovať a poslať JSON je jednoduchšie ako HTML
• Niektoré interakcie nepotrebujú spoluprácu servera
• Optimistické server operácie

18. Prečo web-aplikácie
Server je mŕtvy
• Je jednoduché začať “tučný” projekt:
• statické HTML
• engine v Javascripte
• odozvy servera z pripravených .JSON

19. Prečo web-aplikácie
Server je mŕtvy
• Je jednoduché začať “tučný” projekt:
• statické HTML
• engine v Javascripte
• odozvy servera z pripravených .JSON
Pridať “živý” server
môžete kedykoľvek!

20. Ručný wiring sa stáva nemožný
Väčšie JS aplikácie rastú v chaos

21. Ručný wiring sa stáva nemožný

22. Ručný wiring sa stáva nemožný
Kto by toto chcel ručne “wirovať”?

23. Front-end devs požadujú pekné
API pre <script> loading

24. Front-end devs požadujú pekné
API pre <script> loading

25. Front-end devs požadujú pekné
API pre <script> loading
require() nemôže byť synchrónna operácia
inak browser bude blokovať

26. Front-end devs požadujú pekné
API pre <script> loading

27. Dostupné možnosti
<script> loadingu v prehliadačoch

28. Dostupné možnosti
<script> loadingu v prehliadačoch
XHR
/js/types/person.js
“var Person = function() { /* foo bar */ };”

29. Dostupné možnosti
<script> loadingu v prehliadačoch
XHR
• Potrebuje eval(), kód modulu je string!
• Podora cross-origin-resource-sharing (CORS) nie je úplná
• Počas ladenia nesedia čísla riadkov s pôvodným kódom

30. Dostupné možnosti
<script> loadingu v prehliadačoch
XHR
• Potrebuje eval(), kód modulu je string!
• Podora cross-origin-resource-sharing (CORS) nie je úplná
• Počas ladenia nesedia čísla riadkov s pôvodným kódom
• Dôležitá issue:
• potrebujeme poznať závislosti modulu pred spustením

31. Dostupné možnosti
<script> loadingu v prehliadačoch
Webworkers

32. Dostupné možnosti
<script> loadingu v prehliadačoch
Webworkers

33. Dostupné možnosti
<script> loadingu v prehliadačoch
Webworkers

34. Dostupné možnosti
<script> loadingu v prehliadačoch
Webworkers
• Potrebuje eval(), kód modulu je string!
• Podpora je ešte slabšia ako pri CORS
• Počas ladenia nesedia čísla riadkov s pôvodným kódom

35. Dostupné možnosti
<script> loadingu v prehliadačoch
document.write()

36. Dostupné možnosti
<script> loadingu v prehliadačoch
document.write()
• Nefunguje po načítaní stránky
• document.write() blokuje

37. Dostupné možnosti
<script> loadingu v prehliadačoch
Máme vôbec nejakú možnosť?

38. Dostupné možnosti
<script> loadingu v prehliadačoch
ÁNO!
dynamické vkladanie do DOMu

39. A čo to dôležité issue?
potrebujeme poznať závislosti modulu pred spustením

40. A čo to dôležité issue?
potrebujeme poznať závislosti modulu pred spustením
obalíme kód modulu volaním predpripravenej funkcie

41. A čo to dôležité issue?
potrebujeme poznať závislosti modulu pred spustením
obalíme kód modulu volaním predpripravenej funkcie
vytvorili sme prvý *AMD modul, hey!
*asynchronous module definition

42. Require.JS

43. Require.JS

44. Require.JS
require() - natiahni špecifikované závislosti
a spusti callback, keď je všetko pripravené
*app.js

45. Require.JS
require() - natiahni špecifikované závislosti
a spusti callback, keď je všetko pripravené
Require.JS ctí
“convention over configuration”
umiestnenie závislosti je relatívne
voči volaniu require()

46. Require.JS
define() - zaregistruj argument ako AMD modul,
natiahni špecifikované závislosti
a spusti callback, keď je všetko pripravené

47. Require.JS
statický hash

48. Require.JS
modul bez závislostí

49. Require.JS
pomenovaný modul bez závislostí

50. Require.JS
modul so závislosťami

51. Require.JS
pomenovaný modul so závislosťami

52. Require.JS
pluginy

53. Require.JS
oslaďte si život kávou

54. Require.JS
require.config
*app.js

55. Require.JS
require.config
*app.js

56. Require.JS
require.config
*types/student.js
*app.js

57. Require.JS
zhrnutie, prečo AMD
• AMD moduly sú flexibilné a async
• fungujú v browseri už teraz, aj bez “zbuildenia”
• podpora pluginov, je možné natiahnuť aj iné typy ako JS
• path aliasy, viac verzií modulu (jquery1.6, jquery1.7)
• jednoznačná viditeľnosť závislostí modulu
• čistý global-namespace, definícia modulu je closure
• podpora veľkých hráčov (jQuery, Dojo, Mootools)

58. Reqire.JS + Backbone.JS
ako sa kua robí väčšia aplikácia
Organizujte podľa funkčných celkov
foldre Models, Views, Controllers sú antipattern
Modul Application
deffered initializers, event aggregator
Optimalizovaný deployment
výsledný build s pár HTTP rqs

59. Organizujte podľa funkčných celkov
foldre Models, Views, Controllers sú antipattern

60. Organizujte podľa funkčných celkov

61. Organizujte podľa funkčných celkov

62. Modul Application
deffered initializers
*bootstrap.js

63. Modul Application
deffered initializers
*app.js
*category.js

64. Modul Application
event aggregator
Ako na komunikáciu
medzi dvoma views
(funkčnými celkami),
ktoré sú izolované
initializermi?

65. Modul Application
event aggregator
Ako na komunikáciu
medzi dvoma views
(funkčnými celkami),
ktoré sú izolované
initializermi?
Použijeme inštanciu
app, cez ktorú si
moduly posielajú
správy

66. Modul Application
event aggregator
*category/categoryView.js

67. Modul Application
event aggregator
*category/categoryView.js

68. Modul Application
event aggregator
*predetail/collection.js

69. Modul Application
event aggregator
*predetail/collection.js

70. Modul Application
event aggregator, PUB-SUB pattern
http://blog.responsivenews.co.uk/post/21021136520/how-we-build-our-javascript

71. Optimalizovaný deployment
výsledný build s pár HTTP rqs
neoptimalizovaná
verzia je priam
hrozivá

72. Optimalizovaný deployment
výsledný build s pár HTTP rqs
r.js
• concatenation - build AMD modulov, inlining text!
• uglifiing - minifikácia js [uglify.js, google compiler (std)]
• CSS optimizing

73. Optimalizovaný deployment
výsledný build s pár HTTP rqs
r.js
• concatenation - build AMD modulov, inlining text!
• uglifiing - minifikácia js
• CSS optimizing

74. *build.js

75. Optimalizovaný deployment
výsledný build s pár HTTP rqs
much better :)

76. Prečo Reqire.JS?
už musí byť jasné každému
AMD greatest benefit isn’t being able to load
scripts on-demand, as some people may think.
The greatest benefit is the increase of the code
organization/modularity and also the reduced
need for globals/namespacing.
http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/

77. Zdroje
Javascript
Prototypes and Inheritance in JavaScript
Require.JS
adobe.com/.../javascript-architecture-requirejs-dependency-management.html
requirejs.org/docs/api.html
github.com/jrburke/r.js
github.com/requirejs/example-libglobal
Backbone.JS
lostechies.com/derickbailey/category/backbone/
addyosmani.github.com/backbone-fundamentals/
github.com/hautelook/vertebrae

78. Prečo Javascript?

79. Prečo Javascript?

80. THX
@srigi