Remus Pereni - Remus Pereni - JavaScript, from dark ages to renaissance, the web apps revolution

839 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
839
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Amazon / 2011 / 49 Miliarte / 500 mil pierduteEmag / 2011 / 145 mil euro / 1.4 mil pierdute
  • Remus Pereni - Remus Pereni - JavaScript, from dark ages to renaissance, the web apps revolution

    1. 1. JavaScript, from dark ages to renaissance, the web apps revolution Occasion: CodeCamp Iasi Date: 10-11-2012 Present: Remus Pereni / Software Architect / remus.pereni@tss-yonder.com PublicClassification:
    2. 2. Vom povesti despre:● Diferite modalități de a construi aplicații web● De ce JavaScript?● Librarii și framework-uri● BootstrapJS● EmberJS● AngularJS 2
    3. 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. 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 reverse engineering un port de JavaScript numit Jscript 4
    5. 5. Un pic de istorie● 1996 Netscape + Sun propun standardizarea limbajului la ECMA (European Computer Manufacturers Association)● 1997 Standardizare aceptata si noua denumire EcmaScript● Standardizarea acopera doar limbajul in sine.● API-ul de access la DOM -> W3.org 5
    6. 6. Caracteristici și categorii de aplicațiiDespre ce anume vorbim?● Aplicații web traditionale (incl. AJAX) (Thick Server)● Aplicații browser (Single Page)
    7. 7. Aplicații web traditionale (Web 2.0) / Thick PageResponsabilități Client Responsabilități Server● Refresh parțial de conținut ● Asigură datele● Validări ● Persistență● Componente usabile ● Continutul / markup-ul o Autocomplete complet sau partial pentru o Date selector client o ...● Animație
    8. 8. Platforma evoluează rapid
    9. 9. Direcții de presiune asupra aplicațiilor conventionale1. Așteptări crescute din partea UI si UX2. Așteptări crescute din partea vitezei de reacție3. Cerințe noi în privința disponibilității aplicațiilor pe platforme noi care implică modificări de arhitectură 9
    10. 10. Presiune din partea UI / UX 10
    11. 11. Presiune din partea UI / UX 11
    12. 12. Presiune din partea UI / UX 12
    13. 13. Presiune din partea UI / UX 13
    14. 14. Presiune din partea / Vitezei de reacție“According 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. 15. Presiune din partea / Vitezei de reacție 15
    16. 16. Presiune din partea / Vitezei de reacție 16
    17. 17. Presiune din partea / Vitezei de reacție 17
    18. 18. Presiune din partea / Vitezei de reacție 18
    19. 19. Presiune din partea / ArhitecturiiPlatform IOS & Android & Desktop BrowserType Web / HTML5Runs on IPhone/Ipad Android phones Regular desktopOS version IOS: 4.x, 5.x Android: 2.xTechnologies HTML5 JavaScript JQuery Mobile Phone Gap Google Chart API Geolocation Web services JSON 19
    20. 20. Ce soluții sunt? 20
    21. 21. Aplicații browser / Single PageResponsabilități Client Responsabilități Server● Continutul / markup-ul ● Asigură datele complet sau partial bazat ● Persistență pe datele de la backend● Validări● Componente usabile o Autocomplete o Date selector o ...● Animație● Logică aplicație
    22. 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. 23. Web Application FrameworkFunctionalitățio Templatingo Access la baza de dateo Managementul sesiunii (session management)o Decuplare de componente / Pattern-uri (varianta de MVC de obicei)o Mapare URLo Internaționalizare (i18n)o Caching 23
    24. 24. Evoluție 24
    25. 25. Dezvoltarea de aplicații JavaScript● multitudine de optiuni● putine standarde si convenții● fiecare librarie propria interpretare de MVC● o data adoptat un stack, devii dependent de el 25
    26. 26. Dezvoltarea de aplicații JavaScriptLibrării Framework-uriBackbone EmberKnockout AngularJSSpine BatmanCanJS MeteorSe adauga la proiect, adauga Îți impune / dă o arhitecturăfunctionalitate dar nu impune (structură de fișiere, ….) șiarhitectură încearcă să se ocupe de toate aspectele 26
    27. 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.js o JQuery o template engine (_.template, Mustache, Handlebars)
    28. 28. Backbone.js● modele obțin procesează și stochează datele● view-uri, afiseaza datele● route, navighează, salvează și restaurează starea aplicației folosind url-urile
    29. 29. Backbone.js● Backbone.Model o fetching, processing and storing data o modificari in date -> change events o syncronizare standard via REST
    30. 30. Backbone.jsClase de bază● Backbone.Events o callback registration, event dispatch o methode: on, off, trigger● Backbone.Collection o liste de modele care publică change events (add, remove, reset)
    31. 31. Backbone.js
    32. 32. Backbone.jsBackbone.View● tine referintă la un element DOM și face rendering-ul la datele din model● Știe despre modelul sau respectiv colecțiile de care țin● Gestioneaza evenimentele DOM (user input)● Observa evenimentele din modele (binding)● Apelează metode din modele sau declansează evenimente pe ele
    33. 33. Backbone.jsClase de bază● Backbone.Router o Observă modificările de URL și declanșează evenimente la modificarea lui o Mapează URL-uri pe methode JavaScript o De cele mai multe ori constituie parte din controller (instanțiază modele și view-urile)● Backbone.History o HTML5 History (pushState / popState) o fallback pe modificarile hash-lui din URI #
    34. 34. Backbone.js
    35. 35. Backbone.jsAria ResponsabilitateOOP & Functional Programming UnderscoreDOM Scripting JQueryHTML Templating Underscore, Handlebars, …API Communication Backbone*Application Structure Backbone*Routing & History BackboneModel-View-Binding BackboneModularization & Dependency RequireJS, …management 35
    36. 36. Backbone.js● extrem de configurabil si flexibil o nu in direcția “convențion over configuration”● abordare intenționat minimalistă● nu e o soluție completă / independentă 36
    37. 37. Eember.js● http://emberjs.com/● Construit De Yehuda Katz of Ruby on Rails● Tot de ce ai nevoie pentru a construi o aplicație web ambițioasa● Construit pe JQuery● Rădăcinile le are in Sproutcore2 / COCOA● Open Source / MIT● Approx 40k minimizat si gzipat● Framework MVC● Opinionated / “The Ember Way”
    38. 38. Ember.js 38
    39. 39. Ember.js● Gândit foarte bine pentru cum să-ți descompui paginile intr-o ierarhie de controale si cum sa le legi intr-un system bazate pe state-uri● Convention over configuration o elimină deciziile triviale o reduce codul applicației o crește predictibilitatea execuției● Librărie sofisticată pentru comunicare, access la date (Ember.data) în dezvoltare● Intenționată pentru a controla intraga pagină nu insulițe de continut dinamic 39
    40. 40. Ember.js● Ember.View o noțiunea de hierarhie • parrent view / child view o delegate events o asigura renderingul o componentele sunt • reutilizabile • compozabile o automatizări la • automatic cleanup la toate binding-urile si observerii registrati de si pe copii • eliminarea automata a referințelor pentru a elimina sursele de probleme de memorie o evenimente de lifecycle • inainte de rendering • inainte de distrugere • … 40
    41. 41. Ember.js● Routele o traditionale nu sunt cele mai fiabile ca mechanism● Suplinite cu state charts o un obiect / stare o stările 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ă gândești ce evenimente sunt valide in care stări o Permite verificări (fail fast, evenimente inregistate pe stări dar netratate) 41
    42. 42. Ember.jsRoutes 42
    43. 43. Ember.jsClase 43
    44. 44. Ember.jsMixins 44
    45. 45. Ember.jsComputed properties 45
    46. 46. Ember.jsNamespaces 46
    47. 47. Ember.jsObserveri 47
    48. 48. Ember.jsBinding 48
    49. 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.View 49
    50. 50. Ember.jsAria ResponsabilitateOOP & Functional Programming EmberDOM Scripting JQueryHTML Templating HandlebarsAPI Communication EmberApplication Structure EmberRouting & History EmberModel-View-Binding EmberModularization & Dependency RequireJS, …management 50
    51. 51. Angular.js● http://www.angularjs.org● Creat si folosit de către 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 ce vor face nativ in anii următori● Nu impune o arhitectură sau layout● Poate lucra în insulițe mici de pagină 51
    52. 52. Angular.jsTemplate 52
    53. 53. Angular.jsRutare 53
    54. 54. Angular.jsAria ResponsabilitateOOP & Functional Programming AngularDOM Scripting JQueryHTML Templating HandlebarsAPI Communication EmberApplication Structure EmberRouting & History EmberModel-View-Binding EmberModularization & Dependency RequireJS, …management 54
    55. 55. http://addyosmani.github.com/todomvc/ 55
    56. 56. Diamond SponsorsPlatinum Sponsors Gold SponsorsTraining Partners Media Partners Other Partners

    ×