![Optimalizovan箪 deployment
v箪sledn箪 build s p叩r HTTP rqs
r.js
concatenation - build AMD modulov, inlining text!
ugli鍖ing - mini鍖k叩cia js [uglify.js, google compiler (std)]
CSS optimizing](https://image.slidesharecdn.com/presentation-sk-120903065340-phpapp02/85/Require-JS-Backbone-JS-72-320.jpg)
More Related Content
Similar to Require.JS & Backbone.JS (20)
Require.JS & Backbone.JS
- 1. & ako vytvori泥 邸k叩lovate直n炭 Javascript web-aplik叩ciu
- 2. Preo Reqire.JS? Web str叩nky => Web aplik叩cie st炭pa komplexita k坦du ako aplik叩cia rastie Run箪 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
- 16. Preo 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 鍖ow 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 110 seconds, users de鍖nitely 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 鍖nally does respond.
- 17. Preo web-aplik叩cie Tun箪 klient je r箪chlej邸鱈 Spracova泥 a posla泥 JSON je jednoduch邸ie ako HTML Niektor辿 interakcie nepotrebuj炭 spolupr叩cu servera Optimistick辿 server oper叩cie
- 18. Preo web-aplik叩cie Server je mtvy Je jednoduch辿 zaa泥 tun箪 projekt: statick辿 HTML engine v Javascripte odozvy servera z pripraven箪ch .JSON
- 19. Preo web-aplik叩cie Server je mtvy Je jednoduch辿 zaa泥 tun箪 projekt: statick辿 HTML engine v Javascripte odozvy servera z pripraven箪ch .JSON Prida泥 転iv箪 server m担転ete kedyko直vek!
- 20. Run箪 wiring sa st叩va nemo転n箪 V辰邸ie JS aplik叩cie rast炭 v chaos
- 21. Run箪 wiring sa st叩va nemo転n箪
- 22. Run箪 wiring sa st叩va nemo転n箪 Kto by toto chcel rune 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 prehliadaoch
- 28. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch XHR /js/types/person.js var Person = function() { /* foo bar */ };
- 29. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch XHR Potrebuje eval(), k坦d modulu je string! Podora cross-origin-resource-sharing (CORS) nie je 炭pln叩 Poas ladenia nesedia 鱈sla riadkov s p担vodn箪m k坦dom
- 30. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch XHR Potrebuje eval(), k坦d modulu je string! Podora cross-origin-resource-sharing (CORS) nie je 炭pln叩 Poas 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 prehliadaoch Webworkers
- 32. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch Webworkers
- 33. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch Webworkers
- 34. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch Webworkers Potrebuje eval(), k坦d modulu je string! Podpora je e邸te slab邸ia ako pri CORS Poas ladenia nesedia 鱈sla riadkov s p担vodn箪m k坦dom
- 35. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch document.write()
- 36. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch document.write() Nefunguje po na鱈tan鱈 str叩nky document.write() blokuje
- 37. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch M叩me v担bec nejak炭 mo転nos泥?
- 38. Dostupn辿 mo転nosti <script> loadingu v prehliadaoch 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 de鍖nition
- 42. Require.JS
- 43. Require.JS
- 44. Require.JS require() - natiahni 邸peci鍖kovan辿 z叩vislosti a spusti callback, ke je v邸etko pripraven辿 *app.js
- 45. Require.JS require() - natiahni 邸peci鍖kovan辿 z叩vislosti a spusti callback, ke je v邸etko pripraven辿 Require.JS ct鱈 convention over con鍖guration umiestnenie z叩vislosti je relat鱈vne voi volaniu require()
- 46. Require.JS define() - zaregistruj argument ako AMD modul, natiahni 邸peci鍖kovan辿 z叩vislosti a spusti callback, ke je v邸etko pripraven辿
- 49. Require.JS pomenovan箪 modul bez 噛叩厩庄壊鉛看壊岳鱈
- 51. Require.JS pomenovan箪 modul so 噛叩厩庄壊鉛看壊泥温馨庄
- 53. Require.JS oslate si 転ivot 一叩厩看顎
- 54. Require.JS require.con鍖g *app.js
- 55. Require.JS require.con鍖g *app.js
- 56. Require.JS require.con鍖g *types/student.js *app.js
- 57. Require.JS zhrnutie, preo AMD AMD moduly s炭 鍖exibiln辿 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) jednoznan叩 vidite直nos泥 噛叩厩庄壊鉛看壊岳鱈 modulu ist箪 global-namespace, de鍖n鱈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 funkn箪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 funkn箪ch celkov foldre Models, Views, Controllers s炭 antipattern
- 60. Organizujte pod直a funkn箪ch celkov
- 61. Organizujte pod直a funkn箪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 (funkn箪mi celkami), ktor辿 s炭 izolovan辿 initializermi?
- 65. Modul Application event aggregator Ako na komunik叩ciu medzi dvoma views (funkn箪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! ugli鍖ing - mini鍖k叩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! ugli鍖ing - mini鍖k叩cia js CSS optimizing
- 74. *build.js
- 75. Optimalizovan箪 deployment v箪sledn箪 build s p叩r HTTP rqs much better :)
- 76. Preo Reqire.JS? u転 mus鱈 by泥 jasn辿 ka転d辿mu AMD greatest bene鍖t isnt being able to load scripts on-demand, as some people may think. The greatest bene鍖t 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. Preo Javascript?
- 79. Preo Javascript?
- 80. THX @srigi
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n