1. JavaScript, from dark ages to renaissance, the web apps revolutionOccasion: CodeCamp Iasi Date:10-11-2012Present:Remus Pereni / Software Architect / remus.pereni@tss-yonder.comPublicClassification:

2. Vom povesti despre: Diferite modaliti de a construi aplicaii web De ce JavaScript? Librarii i framework-uri BootstrapJS EmberJS AngularJS2 3. Un pic de istorie 1991 Tim Berner lee @CERN: HTML, HTTP 0.9,WorldWideWeb 1993 Mark Andersen & NCSA, Mosaic 1 1994 W3.org (MIT + CERN) / HTML 2 1996 CSS 1, Netscape 2, JavaScript 1997 HTML 4 1998 CSS 2 1999 RFC 2616 / IETF + W3, HTTP/1.1 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5 4. Un pic de istorie 1995 Netscape / Brendan Eich Rol? o comunicare cu / dinspre Appleti Java o manipulare de continut in pagina Netscape 2 / Mocha -> LiveWire-> LiveScript Redenumit in JavaScript, miscare de marketing destul de ne-inspirata Microsoft raspunde cu VBScript iar in 1996 dupa reverseengineering un port de JavaScript numit Jscript4 5. Un pic de istorie 1996 Netscape + Sun propun standardizarealimbajului la ECMA (European ComputerManufacturers Association) 1997 Standardizare aceptata si noua denumireEcmaScript Standardizarea acopera doar limbajul in sine. API-ul de access la DOM -> W3.org 5 6. Caracteristici i categorii de aplicaiiDespre ce anume vorbim? Aplicaii web traditionale (incl. AJAX)(Thick Server) Aplicaii browser (Single Page) 7. Aplicaii web traditionale (Web 2.0) / Thick PageResponsabiliti Client Responsabiliti Server Refresh parial de coninut Asigur datele Validri Persisten Componente usabile Continutul / markup-ul o Autocomplete complet sau partial pentru o Date selectorclient o ... Animaie 8. Platforma evolueaz rapid 9. Direcii de presiune asupra aplicaiilorconventionale1. Ateptri crescute din partea UI si UX2. Ateptri crescute din partea vitezei de reacie3. Cerine noi n privina disponibilitii aplicaiilor pe platforme noi care implic modificri de arhitectur 9 10. Presiune din partea UI / UX10 11. Presiune din partea UI / UX11 12. Presiune din partea UI / UX12 13. Presiune din partea UI / UX13 14. Presiune din partea / Vitezei de reacieAccording to Harry Shum, a Microsoft computer scientist,computer users will visit a Web site less if its loading time isslower than its competitors by 250 milliseconds, or one-quarter of a second. That is less time than a single eye blink.(http://www.nytimes.com/interactive/2012/02/29/business/The-Blink-of-an-Eye-Oh-Please.html) 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon) 14 15. Presiune din partea / Vitezei de reacie 15 16. Presiune din partea / Vitezei de reacie 16 17. Presiune din partea / Vitezei de reacie 17 18. Presiune din partea / Vitezei de reacie 18 19. Presiune din partea / ArhitecturiiPlatformIOS & Android & Desktop BrowserType Web / HTML5Runs on IPhone/IpadAndroid phonesRegular desktopOS versionIOS: 4.x, 5.x Android: 2.xTechnologies HTML5 JavaScriptJQuery Mobile Phone Gap Google Chart APIGeolocation Web services JSON19 20. Ce soluii sunt? 20 21. Aplicaii browser / Single PageResponsabiliti Client Responsabiliti Server Continutul / markup-ul Asigur datelecomplet sau partial bazat Persistenpe datele de la backend Validri Componente usabile o Autocomplete o Date selector o ... Animaie Logic aplicaie 22. Web Application Framework"A web application framework ("WAF") is asoftware framework that is designed tosupport the development of dynamicwebsites, web applications and webservices. The framework aims to alleviatethe overhead associated with commonactivities performed in Web development.(Wikipedia)22 23. Web Application FrameworkFunctionalitio Templatingo Access la baza de dateo Managementul sesiunii (session management)o Decuplare de componente / Pattern-uri(varianta de MVC de obicei)o Mapare URLo Internaionalizare (i18n)o Caching 23 24. Evoluie 24 25. Dezvoltarea de aplicaii JavaScript multitudine de optiuni putine standarde si convenii fiecare librarie propria interpretare de MVC o data adoptat un stack, devii dependent de el25 26. Dezvoltarea de aplicaii JavaScriptLibrriiFramework-uriBackboneEmberKnockoutAngularJSSpine BatmanCanJS MeteorSe adauga la proiect, adaugai impune / d o arhitecturfunctionalitate dar nu impune (structur de fiiere, .) iarhitectur ncearc s se ocupe de toateaspectele26 27. Backbone.js http://backbonejs.org Jeremy Ashkenas and DocumentCloud Foarte popular Open Source (MIT) Model View Minimal, doar 800 linii de cod Modele persistabile REST cu mecanism simplu de rutare Depinde de / se foloseste mpreuna cu:o _underscore.jso JQueryo template engine (_.template, Mustache, Handlebars) 28. Backbone.js modele obin proceseaz i stocheaz datele view-uri, afiseaza datele route, navigheaz, salveaz i restaureaz starea aplicaieifolosind url-urile 29. Backbone.js Backbone.Modelo fetching, processing and storing datao modificari in date -> change eventso syncronizare standard via REST 30. Backbone.jsClase de baz Backbone.Eventso callback registration, event dispatcho methode: on, off, trigger Backbone.Collectiono liste de modele care public change events (add, remove,reset) 31. Backbone.js 32. Backbone.jsBackbone.View tine referint la un element DOM i face rendering-ul la datele dinmodel tie despre modelul sau respectiv coleciile de care in Gestioneaza evenimentele DOM (user input) Observa evenimentele din modele (binding) Apeleaz metode din modele sau declanseaz evenimente pe ele 33. Backbone.jsClase de baz Backbone.Routero Observ modificrile de URL i declaneaz evenimente lamodificarea luio Mapeaz URL-uri pe methode JavaScripto De cele mai multe ori constituie parte din controller(instaniaz modele i view-urile) Backbone.Historyo HTML5 History (pushState / popState)o fallback pe modificarile hash-lui din URI # 34. Backbone.js 35. Backbone.jsAria ResponsabilitateOOP & Functional Programming UnderscoreDOM ScriptingJQueryHTML TemplatingUnderscore, Handlebars, API CommunicationBackbone*Application StructureBackbone*Routing & HistoryBackboneModel-View-Binding BackboneModularization & DependencyRequireJS, management35 36. Backbone.js extrem de configurabil si flexibilo nu in direcia convenion over configuration abordare intenionat minimalist nu e o soluie complet / independent 36 37. Eember.js http://emberjs.com/ Construit De Yehuda Katz of Ruby on Rails Tot de ce ai nevoie pentru a construi o aplicaie webambiioasa Construit pe JQuery Rdcinile le are in Sproutcore2 / COCOA Open Source / MIT Approx 40k minimizat si gzipat Framework MVC Opinionated / The Ember Way 38. Ember.js 38 39. Ember.js Gndit foarte bine pentru cum s-i descompui paginile intr-oierarhie de controale si cum sa le legi intr-un system bazatepe state-uri Convention over configuration o elimin deciziile triviale o reduce codul applicaiei o crete predictibilitatea execuiei Librrie sofisticat pentru comunicare, access la date(Ember.data) n dezvoltare Intenionat pentru a controla intraga pagin nu insulie decontinut dinamic39 40. Ember.js Ember.View o noiunea de hierarhie parrent view / child view o delegate events o asigura renderingul o componentele sunt reutilizabile compozabile o automatizri la automatic cleanup la toate binding-urile si observerii registrati de sipe copii eliminarea automata a referinelor pentru a elimina sursele deprobleme de memorie o evenimente de lifecycle inainte de rendering inainte de distrugere 40 41. Ember.js Routele o traditionale nu sunt cele mai fiabile ca mechanism Suplinite cu state charts o un obiect / stare o strile sunt modelate hierarhic o raspund la evenimente o poate trece in alta stare Beneficii? o Nu poti fii in 2 stari in acelasi timp o Te fortez s gndeti ce evenimente sunt valide in care stri o Permite verificri (fail fast, evenimente inregistate pe stri dar netratate)41 42. Ember.jsRoutes42 43. Ember.jsClase 43 44. Ember.jsMixins44 45. Ember.jsComputed properties 45 46. Ember.jsNamespaces46 47. Ember.jsObserveri 47 48. Ember.jsBinding 48 49. Ember.js Ember.Application Ember.HistoryLocation Ember.Array Ember.Logger Ember.ArrayController Ember.Mixin Ember.ArrayProxy Ember.MutableArray Ember.Binding Ember.MutableEnumerable Ember.Checkbox Ember.Namespace Ember.CollectionView Ember.NativeArray Ember.Comparable Ember.NoneLocation Ember.ComputedProperty Ember.Object Ember.ContainerView Ember.ObjectController Ember.Controller Ember.ObjectProxy Ember.ControllerMixin Ember.Observable Ember.Copyable Ember.RenderBuffer Ember.CoreObject Ember.Routable Ember.Deferred Ember.Route Ember.Enumerable Ember.Router Ember.Error Ember.Select Ember.Evented Ember.Set Ember.Freezable Ember.SortableMixin Ember.Handlebars Ember.State Ember.Handlebars.helpers Ember.StateManager Ember.HashLocation Ember.TargetActionSupport Ember.TextArea Ember.TextField Ember.View49 50. Ember.jsAria ResponsabilitateOOP & Functional Programming EmberDOM ScriptingJQueryHTML TemplatingHandlebarsAPI CommunicationEmberApplication StructureEmberRouting & HistoryEmberModel-View-Binding EmberModularization & DependencyRequireJS, management 50 51. Angular.js http://www.angularjs.org Creat si folosit de ctre Google bazat pe JQuery MVW* (Whatever) Include propriul templateing system approx 500k IE8+, Chrome, FF, Safari, Opera Databinging (mai naturale) Modelele sunt obiecte normale JavaScript Dependency Injection Conceptual este un polyfill intre ce fac browserele astazi si cevor face nativ in anii urmtori Nu impune o arhitectur sau layout Poate lucra n insulie mici de pagin 51 52. Angular.jsTemplate52 53. Angular.jsRutare53 54. Angular.jsAria ResponsabilitateOOP & Functional Programming AngularDOM ScriptingJQueryHTML TemplatingHandlebarsAPI CommunicationEmberApplication StructureEmberRouting & HistoryEmberModel-View-Binding EmberModularization & DependencyRequireJS, management 54 55. http://addyosmani.github.com/todomvc/55 56. Diamond SponsorsPlatinum SponsorsGold SponsorsTraining Partners Media PartnersOther Partners