remus pereni - remus pereni - javascript, from dark ages to renaissance, the web apps revolution
Embed Size (px)
DESCRIPTION
TRANSCRIPT

Occasion:Date:
Present:Classification:
JavaScript, from dark ages to renaissance, the web apps revolution
CodeCamp Iasi10-11-2012Remus Pereni / Software Architect / [email protected]

2
● Diferite modalități de a construi aplicații web● De ce JavaScript?● Librarii și framework-uri● BootstrapJS● EmberJS● AngularJS
Vom povesti despre:

● 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
Un pic de istorie

4
● 1995 Netscape / Brendan Eich● Rol?
o comunicare cu / dinspre Appleti Javao 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
Un pic de istorie

5
● 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
Un pic de istorie

Despre ce anume vorbim?●Aplicații web traditionale (incl. AJAX)
(Thick Server)●Aplicații browser (Single Page)
Caracteristici și categorii de aplicații

Responsabilități Client● Refresh parțial de conținut● Validări● Componente usabileoAutocompleteoDate selectoro ...
● Animație
Aplicații web traditionale (Web 2.0) / Thick Page
Responsabilități Server● Asigură datele● Persistență● Continutul / markup-ul
complet sau partial pentru client

Platforma evoluează rapid

9
1. 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ă
Direcții de presiune asupra aplicațiilor conventionale

10
Presiune din partea UI / UX

11
Presiune din partea UI / UX

12
Presiune din partea UI / UX

13
Presiune din partea UI / UX

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 is slower 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)

15
Presiune din partea / Vitezei de reacție

16
Presiune din partea / Vitezei de reacție

17
Presiune din partea / Vitezei de reacție

18
Presiune din partea / Vitezei de reacție

19
Presiune din partea / Arhitecturii
PlatformIOS & Android &
Desktop Browser
TypeWeb / HTML5
Runs onIPhone/Ipad
Android phones Regular desktop
OS versionIOS: 4.x, 5.xAndroid: 2.x
TechnologiesHTML5
JavaScriptJQuery Mobile
Phone GapGoogle Chart API
GeolocationWeb services
JSON

20
Ce soluții sunt?

Responsabilități Client● Continutul / markup-ul
complet sau partial bazat pe datele de la backend
● Validări● Componente usabileoAutocompleteoDate selectoro ...
● Animație● Logică aplicație
Aplicații browser / Single Page
Responsabilități Server● Asigură datele● Persistență

22
"A web application framework ("WAF") is a software framework that is designed to support the development of dynamic websites, web applications and web services. The framework aims to alleviate the overhead associated with common activities performed in Web development.” (Wikipedia)
Web Application Framework

23
Functionalităț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
Web Application Framework

24
Evoluție

25
● multitudine de optiuni● putine standarde si convenții● fiecare librarie propria interpretare de MVC● o data adoptat un stack, devii dependent de el
Dezvoltarea de aplicații JavaScript

26
Librării Framework-uri
Backbone Ember
Knockout AngularJS
Spine Batman
CanJS Meteor
Se adauga la proiect, adauga functionalitate dar nu impune arhitectură
Îți impune / dă o arhitectură (structură de fișiere, ….) și încearcă să se ocupe de toate aspectele
Dezvoltarea de aplicații JavaScript

●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)
Backbone.js

●modele obțin procesează și stochează datele
●view-uri, afiseaza datele
●route, navighează, salvează și restaurează starea aplicației folosind url-urile
Backbone.js

●Backbone.Model
o fetching, processing and storing data
o modificari in date -> change events
o syncronizare standard via REST
Backbone.js

Clase 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)
Backbone.js

Backbone.js

Backbone.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
Backbone.js

Clase 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 #
Backbone.js

Backbone.js

35
Aria Responsabilitate
OOP & Functional Programming Underscore
DOM Scripting JQuery
HTML Templating Underscore, Handlebars, …
API Communication Backbone*
Application Structure Backbone*
Routing & History Backbone
Model-View-Binding Backbone
Modularization & Dependency management
RequireJS, …
Backbone.js

36
●extrem de configurabil si flexibilo nu in direcția “convențion over configuration”
●abordare intenționat minimalistă
●nu e o soluție completă / independentă
Backbone.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”
Eember.js

38
Ember.js

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 configurationo elimină deciziile trivialeo reduce codul applicațieio 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

40
Ember.js
● Ember.Viewo noțiunea de hierarhie
• parrent view / child viewo delegate eventso 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 memorieo evenimente de lifecycle
• inainte de rendering• inainte de distrugere• …

41
● Routeleo traditionale nu sunt cele mai
fiabile ca mechanism
● Suplinite cu state chartso un obiect / stareo stările sunt modelate hierarhico raspund la evenimenteo poate trece in alta stare
● Beneficii?oNu poti fii in 2 stari in acelasi
timpo 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)
Ember.js

42
Ember.js
Routes

43
Ember.js
Clase

44
Ember.js
Mixins

45
Ember.js
Computed properties

46
Ember.js
Namespaces

47
Ember.js
Observeri

48
Ember.js
Binding

49
● Ember.Application● Ember.Array● Ember.ArrayController● Ember.ArrayProxy● Ember.Binding● Ember.Checkbox● Ember.CollectionView● Ember.Comparable● Ember.ComputedProperty● Ember.ContainerView● Ember.Controller● Ember.ControllerMixin● Ember.Copyable● Ember.CoreObject● Ember.Deferred● Ember.Enumerable● Ember.Error● Ember.Evented● Ember.Freezable● Ember.Handlebars● Ember.Handlebars.helpers● Ember.HashLocation
Ember.js
● Ember.HistoryLocation● Ember.Logger● Ember.Mixin● Ember.MutableArray● Ember.MutableEnumerable● Ember.Namespace● Ember.NativeArray● Ember.NoneLocation● Ember.Object● Ember.ObjectController● Ember.ObjectProxy● Ember.Observable● Ember.RenderBuffer● Ember.Routable● Ember.Route● Ember.Router● Ember.Select● Ember.Set● Ember.SortableMixin● Ember.State● Ember.StateManager● Ember.TargetActionSupport● Ember.TextArea● Ember.TextField● Ember.View

50
Aria Responsabilitate
OOP & Functional Programming Ember
DOM Scripting JQuery
HTML Templating Handlebars
API Communication Ember
Application Structure Ember
Routing & History Ember
Model-View-Binding Ember
Modularization & Dependency management
RequireJS, …
Ember.js

51
● 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ă
Angular.js

52
Angular.js
Template

53
Angular.js
Rutare

54
Aria Responsabilitate
OOP & Functional Programming Angular
DOM Scripting JQuery
HTML Templating Handlebars
API Communication Ember
Application Structure Ember
Routing & History Ember
Model-View-Binding Ember
Modularization & Dependency management
RequireJS, …
Angular.js

55
http://addyosmani.github.com/todomvc/

Diamond Sponsors
Platinum Sponsors Gold Sponsors
Training Partners Media Partners Other Partners