y
Celebrio
HTML5 and JavaScript
Petr Kunc
23.14. 2012
^ Celebrio
HTML5 and JavaScript
Provide more useful tools For developers Example: AJAX, comet, long polling, WebRTC Audio and video Canvas
https://docs.google.eom/presentation/d/1MmO v wGUekP90 xUU^uUvCvjn-
20y8m3c6YUoTAyll/edit#slide=id.g5ad93c02 0 27
^ Celebrio
Examples
• https://docs.goo§Lexom/presentadon/d/1MmO_vwG(4ekP9Q_x(JU(4u UvCvjn-20y8<4T3c6YUoTAyll
• Geolocation
• History API
• postMessage
• Web Workers
• Drag and drop
• Canvas [http://andrew-hoyer.com/andrewhoyer/experimenbs/cloth/)
• More: http://slides.htmL5rocks.com
Architectures
• MVC
• MVP
• MVVM
• hbbp://joeUnpoinbForm.neb/soFbware-developmenb/mvvm-vs-mvp-vs-mvc-bhe-diFFerences-explained/
Client Side MVC / MVVM
• API Server side
• Model holds data
• View: active view (data-bind, events,...]
• ViewModel: specialized controller
• representation of data and operations that can be performed on a Ul11
^ Celebrio
Examples
hbbp://knockoubjs.com/examples/heLLoWorld.h tml
http://jsfiddle.nel:/dagda1/EhyMR/7/
^ Celebrio
Client side
• Event driven
• Separate semantics and data
• Low server cost
• API-First
• OFFline, localstorage,...
• Disadvantages?
Interesting modern web apps
Legacy app news portal: every web page is completely generated on web server mixed logic, semantics and data
^ Celebrio
Interesting modern web apps
Modern app news portal: web server just sends empty semantics template and uses AJAX, RTC,... For obtaining data.
THIS ONE CAN GO OFFLINE EASILY! Strict separation oFdata and semantics
^ Celebrio
Frameworks
Angular
Backbone
Knockout
Ember
Knockback
JavascriptMVC
• Web Storage
• Web SQL vs. Indexed DB
• Application cache
• File API
• https://docs.google.eom/presentation/d/1xH2i 0ltiUt4UvMYYNFMHva50G 3yKLVC3MeEyPMb yJY
http://caniuse.com/
http://www.htmL5rocks.com/
http://diveintohtml5.inFo/
http://www.w3.org/html/wg/draFts/html/master/
http://addyosmani.com/blog/understanding-mvvm-a-guide-For-
javascript-deveLopers/
http://codebrieF.com/2012/01/the-top-10-javascript-mvc-Frameworks-reviewed/
http://pauLhammant.com/2Q12/Q2/13/cLient-side-mvc-Frameworks-compared/