Successfully reported this slideshow.

Require.JS & Backbone.JS

1,462 views

Published on

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

Published in: Technology
  • Be the first to comment

Require.JS & Backbone.JS

  1. 1. &ako vytvoriť škálovateľnú Javascript web-aplikáciu
  2. 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. 3. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  4. 4. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  5. 5. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  6. 6. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  7. 7. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  8. 8. Web stránky => Web aplikácieklasické web stránky vrátia vždy celý dokument
  9. 9. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  10. 10. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  11. 11. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  12. 12. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  13. 13. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  14. 14. Web stránky => Web aplikácieWeb-app bootstrapne, potom už posiela iba payload
  15. 15. Prečo web-aplikácieRýchlosť
  16. 16. Prečo web-aplikácieRý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 users 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 theyre moving freely rather than waiting on the computer.• 10 seconds keeps the users 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. 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. 18. Prečo web-aplikácieServer je mŕtvy• Je jednoduché začať “tučný” projekt: • statické HTML • engine v Javascripte • odozvy servera z pripravených .JSON
  19. 19. Prečo web-aplikácieServer 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. 20. Ručný wiring sa stáva nemožnýVäčšie JS aplikácie rastú v chaos
  21. 21. Ručný wiring sa stáva nemožný
  22. 22. Ručný wiring sa stáva nemožnýKto by toto chcel ručne “wirovať”?
  23. 23. Front-end devs požadujú peknéAPI pre <script> loading
  24. 24. Front-end devs požadujú peknéAPI pre <script> loading
  25. 25. Front-end devs požadujú peknéAPI pre <script> loading require() nemôže byť synchrónna operáciainak browser bude blokovať
  26. 26. Front-end devs požadujú peknéAPI pre <script> loading
  27. 27. Dostupné možnosti<script> loadingu v prehliadačoch
  28. 28. Dostupné možnosti<script> loadingu v prehliadačochXHR /js/types/person.js “var Person = function() { /* foo bar */ };”
  29. 29. Dostupné možnosti<script> loadingu v prehliadačochXHR• 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. 30. Dostupné možnosti<script> loadingu v prehliadačochXHR• 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. 31. Dostupné možnosti<script> loadingu v prehliadačochWebworkers
  32. 32. Dostupné možnosti<script> loadingu v prehliadačochWebworkers
  33. 33. Dostupné možnosti<script> loadingu v prehliadačochWebworkers
  34. 34. Dostupné možnosti<script> loadingu v prehliadačochWebworkers• 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. 35. Dostupné možnosti<script> loadingu v prehliadačochdocument.write()
  36. 36. Dostupné možnosti<script> loadingu v prehliadačochdocument.write()• Nefunguje po načítaní stránky• document.write() blokuje
  37. 37. Dostupné možnosti<script> loadingu v prehliadačochMáme vôbec nejakú možnosť?
  38. 38. Dostupné možnosti<script> loadingu v prehliadačochÁNO!dynamické vkladanie do DOMu
  39. 39. A čo to dôležité issue?potrebujeme poznať závislosti modulu pred spustením
  40. 40. A čo to dôležité issue?potrebujeme poznať závislosti modulu pred spustenímobalíme kód modulu volaním predpripravenej funkcie
  41. 41. A čo to dôležité issue?potrebujeme poznať závislosti modulu pred spustenímobalíme kód modulu volaním predpripravenej funkcie vytvorili sme prvý *AMD modul, hey! *asynchronous module definition
  42. 42. Require.JS
  43. 43. Require.JS
  44. 44. Require.JS require() - natiahni špecifikované závislostia spusti callback, keď je všetko pripravené *app.js
  45. 45. Require.JS require() - natiahni špecifikované závislostia spusti callback, keď je všetko pripravené Require.JS ctí “convention over configuration” umiestnenie závislosti je relatívne voči volaniu require()
  46. 46. Require.JS define() - zaregistruj argument ako AMD modul,natiahni špecifikované závislostia spusti callback, keď je všetko pripravené
  47. 47. Require.JSstatický hash
  48. 48. Require.JSmodul bez závislostí
  49. 49. Require.JSpomenovaný modul bez závislostí
  50. 50. Require.JSmodul so závislosťami
  51. 51. Require.JSpomenovaný modul so závislosťami
  52. 52. Require.JSpluginy
  53. 53. Require.JSoslaďte si život kávou
  54. 54. Require.JSrequire.config *app.js
  55. 55. Require.JSrequire.config *app.js
  56. 56. Require.JSrequire.config *types/student.js *app.js
  57. 57. Require.JSzhrnutie, 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. 58. Reqire.JS + Backbone.JSako 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. 59. Organizujte podľa funkčných celkovfoldre Models, Views, Controllers sú antipattern
  60. 60. Organizujte podľa funkčných celkov
  61. 61. Organizujte podľa funkčných celkov
  62. 62. Modul Applicationdeffered initializers *bootstrap.js
  63. 63. Modul Applicationdeffered initializers *app.js *category.js
  64. 64. Modul Applicationevent aggregatorAko na komunikáciumedzi dvoma views(funkčnými celkami),ktoré sú izolovanéinitializermi?
  65. 65. Modul Applicationevent aggregatorAko na komunikáciumedzi dvoma views(funkčnými celkami),ktoré sú izolovanéinitializermi?Použijeme inštanciuapp, cez ktorú simoduly posielajúsprávy
  66. 66. Modul Applicationevent aggregator *category/categoryView.js
  67. 67. Modul Applicationevent aggregator *category/categoryView.js
  68. 68. Modul Applicationevent aggregator *predetail/collection.js
  69. 69. Modul Applicationevent aggregator *predetail/collection.js
  70. 70. Modul Applicationevent aggregator, PUB-SUB pattern http://blog.responsivenews.co.uk/post/21021136520/how-we-build-our-javascript
  71. 71. Optimalizovaný deploymentvýsledný build s pár HTTP rqsneoptimalizovanáverzia je priamhrozivá
  72. 72. Optimalizovaný deploymentvýsledný build s pár HTTP rqsr.js • concatenation - build AMD modulov, inlining text! • uglifiing - minifikácia js [uglify.js, google compiler (std)] • CSS optimizing
  73. 73. Optimalizovaný deploymentvýsledný build s pár HTTP rqsr.js • concatenation - build AMD modulov, inlining text! • uglifiing - minifikácia js • CSS optimizing
  74. 74. *build.js
  75. 75. Optimalizovaný deploymentvýsledný build s pár HTTP rqs much better :)
  76. 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. 77. ZdrojeJavascript Prototypes and Inheritance in JavaScriptRequire.JS adobe.com/.../javascript-architecture-requirejs-dependency-management.html requirejs.org/docs/api.html github.com/jrburke/r.js github.com/requirejs/example-libglobalBackbone.JS lostechies.com/derickbailey/category/backbone/ addyosmani.github.com/backbone-fundamentals/ github.com/hautelook/vertebrae
  78. 78. Prečo Javascript?
  79. 79. Prečo Javascript?
  80. 80. THX @srigi

×