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
Public
Classification:

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. 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 reverse
engineering un port de JavaScript numit Jscript
4

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. Caracteristici și categorii de aplicații
Despre ce anume vorbim?
● Aplicații web traditionale (incl. AJAX)
(Thick Server)
● Aplicații browser (Single Page)

7. Aplicații web traditionale (Web 2.0) /
Thick Page
Responsabilităț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. Platforma evoluează rapid

9. Direcții de presiune asupra aplicațiilor
conventionale
1. Așteptări crescute din partea UI si UX
2. Așteptări crescute din partea vitezei de
reacție
3. Cerințe noi în privința disponibilității
aplicațiilor pe platforme noi care implică
modificări de arhitectură
9

10. Presiune din partea UI / UX
10

11. Presiune din partea UI / UX
11

12. Presiune din partea UI / UX
12

13. Presiune din partea UI / UX
13

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/Th
e-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 reacție
15

16. Presiune din partea / Vitezei de reacție
16

17. Presiune din partea / Vitezei de reacție
17

18. Presiune din partea / Vitezei de reacție
18

19. Presiune din partea / Arhitecturii
Platform
IOS & Android &
Desktop Browser
Type
Web / HTML5
Runs on
IPhone/Ipad
Android phones
Regular desktop
OS version
IOS: 4.x, 5.x
Android: 2.x
Technologies
HTML5
JavaScript
JQuery Mobile
Phone Gap
Google Chart API
Geolocation
Web services
JSON
19

20. Ce soluții sunt?
20

21. Aplicații browser / Single Page
Responsabilităț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. Web Application Framework
"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)
22

23. Web Application Framework
Functionalități
o Templating
o Access la baza de date
o Managementul sesiunii (session management)
o Decuplare de componente / Pattern-uri
(varianta de MVC de obicei)
o Mapare URL
o Internaționalizare (i18n)
o Caching
23

24. Evoluție
24

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

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. 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. Backbone.js
● Backbone.Model
o fetching, processing and storing data
o modificari in date -> change events
o syncronizare standard via REST

30. 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)

31. Backbone.js

32. 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

33. 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 #

34. Backbone.js

35. Backbone.js
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 RequireJS, …
management
35

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. 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. Ember.js
38

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. 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. 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. Ember.js
Routes
42

43. Ember.js
Clase
43

44. Ember.js
Mixins
44

45. Ember.js
Computed properties
45

46. Ember.js
Namespaces
46

47. Ember.js
Observeri
47

48. Ember.js
Binding
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.View
49

50. Ember.js
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 RequireJS, …
management
50

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. Angular.js
Template
52

53. Angular.js
Rutare
53

54. Angular.js
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 RequireJS, …
management
54

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

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