Post on 13-May-2015
description
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
inginerie software în contextul JavaScript
programare Web la nivel de client
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“There are two ways to write error-free programs; only the third one works.”
Alan J. Perlis
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce instrumente software și biblioteci JavaScriptpot fi folosite în contextul programării Web
la nivel de client?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Editare de cod & dezvoltare de aplicații WebDepanare
TestareDocumentare a codului
CompresieOptimizare
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pentru desktop: Aptana Studio, JS Development Tools (plug-in Eclipse),
Sublime Text, Visual Studio (Express Edition),…
Disponibile pe Web: Cloud9 IDE, Codepen, JS Bin, JS Fiddle etc.
unele oferă și partajarea codului-sursă cu alți dezvoltatori
instrumente: editare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizarea consolei JSobiectul console oferit de browser
metode utile: log (), error(), warn(), info(),time(), timeEnd(), trace(), group(), groupEnd()
https://developer.mozilla.org/docs/DOM/console
instrumente: depanare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Firebug (Lite)http://getfirebug.com/
a se considera și instrumentele de depanareincluse în unele navigatoare Web
exemplu notabil: Chrome Developer Tools
instrumente: depanare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Verificarea corectitudinii codului JavaScript
constructia "use strict"; indică interpretoruluică se va utiliza varianta strictă a limbajului
disponibilă începând cu ECMAScript versiunea 5
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Verificarea corectitudinii codului JavaScript
erorile de programare (e.g., crearea accidentalăa variabilelor globale, nume identice de proprietăți etc.)
vor conduce la emiterea de excepții
"use strict";
variabilaAiurea = "Ah! "; // emite ReferenceError
var obiect = { prop: 1, prop: 2 }; // eroare de sintaxă
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Verificarea corectitudinii codului JavaScript
sunt interzise diverse facilități: numere exprimate în baza 8,
folosirea construcțiilor with, arguments.callee
etc.
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modul de procesare strict:
modifică semantica programelor
nu este impus de vreun browser Web
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Verificare statică
instrumente de referință: JSLint – http://www.jslint.com/
JSHint – http://www.jshint.com/
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
instrumente: testare
opțiuniJSHint
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Suport pentru unit testing
exemplificări:Jasmine
JSTest.NETQUnit
Sinon.jsTyrtle
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Testare cross-browser a aplicațiilor Web
instrumente disponibile gratuitAdobe BrowserLab, Browsera, BrowserShots,
Microsoft SuperPreview, Spoon Browser Sandbox,…
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Testare cross-browser a aplicațiilor Web
aplicații comerciale – exemplificări:BrowserStack, Cloud Testing, CrossBrowserTesting
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standarde de redactare a codului JavaScript
exemple:Crock’s Code Conventions for JavaScript
Google JavaScript Style GuideIdiomatic.js
ghiduri specifice – e.g., jQuery Core Style Guide
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Software pentru documentarea programelor
JSDoc ToolkitjGrouseDoc
YUIDoc
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Instrumente privind compresia/minimizarea
Online Javascript Compression ToolYUI Compressor
Scriptalizer
detalii în articolul A. Powell, Understanding Compression and Minification (mai 2012):
www.aaron-powell.com/javascript/understanding-compression-and-minification
instrumente: compresie de cod
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Transformarea codului JS într-unul optimizat
exemplu de referință:Closure Compiler
https://developers.google.com/closure/
instrumente: optimizare javascript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Managementul de pachete JavaScript pentrudezvoltarea de aplicații Web la nivel de client
căutare, instalare, compilare, verificare a dependențelor
exemplificări:Bower – http://bower.io/
Ender – http://ender.jit.su/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat
exemple: Grunt, Yeoman
Phantom.js, Selenium
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Facilitarea dezvoltării de aplicații Webla nivel de client similare celor desktop
exemplificări notabile:Cappuccino – http://cappuccino.org/
SproutCore – http://www.sproutcore.com/
în contextul jocurilor, a se experimenta Mandreel:http://www.mandreel.com/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Suport pentru creșterea performanței
asm.js (Mozilla, 2012) subset JavaScript ce poate fi utilizat ca limbaj de nivelscăzut, eficient – în spiritul limbajului de asamblare
scop: dezvoltarea de aplicații (e.g., jocuri) sofisticate rulate în cadrul browser-ului Web
http://asmjs.org/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alte limbaje pentru dezvoltarea de aplicații Webla nivel de client:
CoffeeScript (Jeremy Ashkenas, 2009)http://coffeescript.org/
TypeScript (Microsoft, 2012)http://www.typescriptlang.org/
limbaje de programare care se compilează în JavaScript
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Portarea altor aplicații în JavaScript
Emscripten – compilator LLVM generând cod JS(e.g., programe C/C++, Lua, Python, Ruby etc.
ce se pot compila în JavaScript)
http://emscripten.org/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Portarea altor aplicații în JavaScript
JSIL – compilator care transformă aplicațiile .NET în programe JavaScript rulând independent de browser
http://jsil.org/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Limbaje aliniate altor paradigme
exemplu:programare funcțională – ClosureScript
https://github.com/clojure/clojurescript
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Graceful degradation & progressive enhancement
conceperea “stratificată” a aplicațiilor JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Graceful degradation & progressive enhancement
inițial: interacțiune minimală, fără JavaScript
adăugarea progresivă a facilităților, în funcție de context
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Graceful degradation & progressive enhancement
înaintea folosirii oricărei tehnici dorite,de testat suportul oferit de navigator:
JavaScript, cookie-uri, clase/metode DOM, Ajax etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
N-am putea recurge labiblioteci JavaScript specifice?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Biblioteci generale privind prezentareaconținutului și manipularea arborelui DOM
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: openrico.org
Script.aculo.us: script.aculo.us
YUI: developer.yahoo.net/yui/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Biblioteci pentru vizualizarea datelor
ChromaD3
DanceData
EnvisionProcessing.js
Raphaël
http://selection.datavisualization.ch/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Multe alte biblioteci JavaScript specializate
procesarea formularelor Webfacilitarea transferurilor asincrone de date
tehnici criptograficegrafice (plotting)
realizarea de efecte vizualegenerarea de conținut grafic 2D/3D
dezvoltare de jocuri (e.g., game engines)…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
colecții de (micro-)biblioteciJavaScript:
http://javascriptlibraries.com/developers.google.com/speed/libraries/
microjs.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
aspecte esențiale (o prezentare succintă)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
scop principal:manipularea facilă a documentului HTML
pe baza selectorilor CSS – nivelul 3
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
oferă un API concis, dar extensibil, ușor de folosit
nu intră în conflict cu alte biblioteci JavaScript
disponibil open source
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
detalii tehnice + documentații:http://jquery.com/
http://learn.jquery.com/
http://jqfundamentals.com/
http://www.learningjquery.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
filosofie inițială:focalizarea asupra interacțiunii dintre codul JavaScript
și constructiile (X)HTML
aproape fiecare operație urmează șablonul:“găsește ceva” + “execută ceva cu ceea ce-ai găsit”
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
accesul la nodurile documentului HTML se realizeazăvia funcția jQuery() – notație prescurtată: $()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
accesul la nodurile documentului HTML se realizeazăvia funcția jQuery() – notație prescurtată: $()
// liniile de tabel de pe poziții pare vor fi redate
// via proprietățile de stil CSS din clasa ‘fundal-gri’
$("table tr:nth-child(even)").addClass("fundal-gri");
obiect jQuery selector CSSmetodă
(funcționalitate)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
selectarea nodurilor dorite recurge la convențiileprivitoare la selectorii CSS – nivelul 2 și nivelul 3
http://docs.jquery.com/Selectors
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
selectarea nodurilor dorite recurge la convențiileprivitoare la selectorii CSS – nivelul 2 și nivelul 3
$(div.info) – toate elementele <div class="info">
$(div#adresa) – elementul <div id="adresa">
$(div h1) – în contextul: <div> care include <h1>
$(div#cap > p) – context: <div id="cap"> cu descend. <p>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
selectori “magici”:
poziție – :first :last
antet – :header
vizibilitate – :hidden :visible
animație – :animated
formulare – :input :text :password :radio :submit
conținut – :contains (…)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('div.info').size ()
mărimea colecției obținute
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('div.info').each (function (div) { … })
iterare via o funcție – aici: anonimă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('div.info').html ('<em>Winter Web Workshop</em> la FII')
inserare de construcții HTML
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('img.foto').attr ('src', '/anonim.png')
alterarea unui atribut
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('a.menu').addClass ('vizitat')
adăugarea unei clase CSS
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:
$('p:odd').css ('color', 'blue')
modificarea unor proprietăți CSS
poziție impară
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
o serie de metode întorc rezultateprivind primul nod selectat:
var latime = $('table').width (); // lățimea tabelului
var src = $('img#profil').attr ('src'); // URL-ul unei imagini
var ultimP = $('p:last').html (); // conținutul ultimului <p>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
traversarea arborelui DOM al paginii Web:
next ()
prev ()
parent ()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
asocierea de funcții de tratare a evenimentelor
// evenimentul click asupra unui element <a>
$('a').click ( function(ev) {
$(this).css({ backgroundColor: 'yellow' });
ev.preventDefault (); // previne comportamentul implicit
});
$('a:first').click ();
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
evenimentul de disponibilitate a DOM-uluipoate fi tratat via ready()
// atunci când documentul e pregătit de prelucrare…
$(document).ready( function() {
// … stabilim afișarea diferențiată a liniilor de tabel
$("table tr:nth-child(even)").addClass("fundal-gri");
});
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
„înlănțuirea” metodelor – chaining:
majoritatea metodelor întorc un alt obiect jQuery(uzual, reprezentând aceeași colecție)
metodele pot fi „înlănțuite”
$('div.info').hide().addClass('eliminat');
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
„înlănțuirea” metodelor – chaining:
atunci când o metodă întoarce o altă colecție, se poatefolosi end () pentru a avea acces la colecția precedentă
$('#intro').css ('color', 'gray').
find ('a').addClass ('important').end ().
find ('em').css ('color', 'red').end ()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
încărcare asincronă a unui document
$('div#stiri').load ('stiri.html');
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
încărcare prin GET
$.get (url, parametri, funcție-callback);
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
încărcare via POST
$.post (url, parametri, funcție-callback);
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
preluare răspuns în format JSON
$.getJSON (url, parametri, funcție-callback);
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
metoda cea mai generală (low level)
$.ajax (url, parametri);
o serie de parametri de interes: async, cache, complete, crossDomain, data, error, statusCode, success,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
metoda cea mai generală (low level)
$.ajax (url, parametri);
detalii la http://api.jquery.com/jQuery.ajax/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://undeva.info/ServiciuWeb/Resursa",
data: "{…}", // datele de intrare trimise serviciului
dataType: "json", // așteptăm răspunsul în format JSON
success: function (data) { // funcție apelată la transfer cu succes
$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML
}
});
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://undeva.info/ServiciuWeb/Resursa",
data: "{…}", // datele de intrare trimise serviciului
dataType: "json", // așteptăm răspunsul în format JSON
success: function (data) { // funcție apelată la transfer cu succes
$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML
}
});
astfel, pot fi implementate mash-up-uri la nivel de client
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
evenimente Ajax
locale – tratate de obiectul Ajax instanțiat
beforeSend, success, error, complete
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
suportul pentru transferuri asincrone – Ajax:
evenimente Ajax
globale – transmise tuturor elementelor din DOM
ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxStop,…
amănunte la http://docs.jquery.com/Ajax_Events
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit
studiu de caz
vezi exemplele din arhiva asociată acestei prezentări
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit
utilizăm URL-ulhttp://api.flickr.com/services/feeds/photos_public.gne
pentru a obține informații despre imagini(formate disponibile: Atom, CSV, JSON, XML,…)
vezi http://www.flickr.com/services/feeds/docs/photos_public/
studiu de caz
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interactiune web: ajax – studiu de caz
Forma generală a răspunsului JSON transmis de Flickr:{
"title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2013-12-06T13:33:07Z", "generator" : "http://www.flickr.com/", "items" : [ {
"title" : "...","link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken": "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z","author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."
} ]}
tip de data XML Schema
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// preluăm asincron imagini disponibile pe FlickrjQuery.getJSON
("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // datele de intrare transmise serviciului Web tags: "iasi, romania, informatica", format: "json"
}, // funcția anonimă ce va procesa datele JSON trimise asincron de Flickr function (data) { // iterăm fiecare informație obținută de la serviciul Web $.each (data.items, function (numar, foto) {
// creăm un element <img> având ca valoare a atributului "src" // adresa Web inclusă în datele JSON obținute; // acest <img> va fi adăugat la elementul cu id="imagini" din pagină$ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title)
.appendTo ("#imagini"); });
});
studiu de caz
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
un posibil rezultat obținut (inclusiv trasarea pas-cu-pasa execuției codului JavaScript via extensia Firebug)
studiu de caz
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
efectuarea de animații simple:
$('h1').hide ('slow');
$('h1').slideDown ('fast');
$('h1').fadeOut (2000);
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
jQuery
efectuarea de animații simple:acțiunile pot fi specificate și de programator
$("#reclama").animate ({
width: "+=100px",
opacity: 0.4,
fontSize: "3em",
borderWidth: "10px"
}, 1500);
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
disponibilitatea unei suite largi de plug-in-urihttp://plugins.jquery.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
șabloane de proiectare pentru JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare traditionale
creaționaleBuilder, Prototype, Singleton
structuraleAdapter, Bridge, Decorator, Façade, Flyweight, Proxy
comportamentaleCommand, Iterator, Mediator, Observer, State, Visitor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare MV*
MVC (Model-View-Controller)MVP (Model-View-Presenter)
MVVM (Model View ViewModel)
A. Osmani, Digesting JavaScript MVC (iunie 2012)http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare MV*
MVC (Model-View-Controller)MVP (Model-View-Presenter)
MVVM (Model View ViewModel)
utilizare pragmatică via biblioteci/framework-uriprecum Angular, Backbone, Ember, Spine, KnockoutJS
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
arhitectura unei aplicații Web ce recurge la Backbone.js http://backbonejs.org/
A. Osmani, Developing Backbone.js Applications, O’Reilly, 2013:http://addyosmani.github.io/backbone-fundamentals/
Backbone.Events
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Backbone.Router – “leagă” URL-uri la rute (cod)
var RouterStud = Backbone.Router.extend({
routes: {
"": "index", // pagina principală – http://sit.info
"students": "studenti", // e.g., http://sit.info/students
"students/:id": "student" // e.g., http://sit.info/students/:69
},
index: function() { /* afișează pagina de start */ },
studenti: function() { /* listează toți studenții */ },
student: function(id) { /* afișează informații despre un student */ }
});
după Jeff Carouth (2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Backbone.View – preia datele și generează codul HTML(eventual, recurgând la template-uri) pe baza DOM-ului;
suplimentar, reacționează la evenimente
var StudView = Backbone.View.extend ( {
tagName: "li", // conținutul generat va fi inclus în <li>
className: "stud", // numele clasei CSS utilizate
events: { 'click': 'clic' }, // evenimente ce vor fi tratate (aici: click)
render: function () { // generează conținutul
this.$el.html (this.nume ());
return this;
},
clic: function () { alert ('Ai dat click…'); },
nume: function () { // returnează numele studentului (via model)
return this.model.toString ();
}
}); după Jeff Carouth (2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Backbone.Model – conține informații sincronizateprivind datele existente la nivel de server (backend)
var Student = Backbone.Model.extend ( { // date despre un student
urlRoot: '/students',
toString: function() {
return this.get ('nume') + " " + this.get ('an') + " " + this.get ('nota');
}
});
var StudView = Backbone.View.extend ( { // legătura dintre model & view
initialize: function () {
// evenimentul de modificare a datelor conduce la re-afișarea lor
this.model.on ('change', this.render, this);
}
…
});după Jeff Carouth (2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Backbone.Collection – reprezintă o colecție de modele
var Studenti = Backbone.Collection.extend ({ url: '/students', model: Student } );
var StudentiView = Backbone.View.extend ( {initialize: function () {
this.collection = new Studenti ();this.collection.fetch ( { // preia date de la server via Ajaxsuccess: _.bind (function (raspuns, status, xhr) { this.render(); }, this)
});},render: function () {
this.collection.each (this.genereazaStudent, this);},genereazaStudent: function (model) {
var studView = new StudView ( { model: model });this.$el.append (studView.el);
}}); după Jeff Carouth (2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Backbone permite folosireaoricărui sistem JavaScript de templating
exemplificări:Dust.js – http://akdubya.github.io/dustjs/
Handlebars – http://handlebarsjs.com/
Mustache.js – http://github.com/janl/mustache.js
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
specificarea modulelor JS se realizeazăvia limbajul AMD (Asynchronous Module Definition)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
specificarea modulelor JS se realizeazăvia limbajul AMD (Asynchronous Module Definition)
încărcare de cod folosind biblioteci specifice: curl.js, PINF, RequireJS,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
alternativ, se poate recurge la CommonJSun format de declarare a modulelor și pachetelor
reutilizabile la nivel de server
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare în contextul JavaScript
detalii și exemple – inclusiv pentru jQuery – în carteaA. Osmani, Learning JavaScript Design Patterns (2012)
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript în contextul Web-ului mobil
framework-uri & biblioteci JavaScriptexemplu notabil: jQuery Mobile
instrumente independente de platformăApache Cordova (PhoneGap) – http://cordova.apache.org/
Titanium – http://www.appcelerator.com/titanium/
utilizând API-uri JavaScript oferite de platformăAmazon Fire OS, Microsoft Windows 8, Mozilla Firefox OS
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alte facilități și extinderi
definirea de macro-uri: Sweet.jssecuritate: ADsafe, FBJS, Gatekeeper etc.
execuție asincronă a codului: Streamline.js, StratifiedJS,… extensii: ContextJS, JavaScript++, JS2, Objective-J
limbaje inspirate de JS: Coco, Jack, Move, Zedscript etc.
multe altele la http://altjs.org/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care este viitorul limbajului JavaScript?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
EcmaScript 6 (ES6)
specificație în stadiu de ciornă (Rev 21, noiembrie 2013)
wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
https://people.mozilla.org/~jorendorff/es6-draft.html
o prezentare succintă: Angus Croll, ES6 Uncensored (noiembrie 2013)
https://speakerdeck.com/anguscroll/es6-uncensored
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
EcmaScript 6 (ES6)
definirea de clase – perspectiva paradigmei obiectualeparametri cu valori implicite și parametri multipli
iteratori & generatorinoi tipuri de date (e.g., map, set, proxy)
modularizarea codului: module + importuri
…și altele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
suportul actual pentru ES6 oferit de navigatoarele Webhttp://kangax.github.io/es5-compat-table/es6/
vezi și proiectul Traceur – https://github.com/google/traceur-compiler
(JavaScript.next-to-JavaScript-of-today compiler)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: suita de tehnologii HTML5 (prima parte)