• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript
 

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

on

  • 341 views

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Statistics

Views

Total Views
341
Views on SlideShare
341
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript Presentation Transcript

    • Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client inginerie software în contextul JavaScript
    • Alan J. Perlis Dr. Sabin Buragawww.purl.org/net/busaco “There are two ways to write error-free programs; only the third one works.”
    • Dr. Sabin Buragawww.purl.org/net/busaco Ce instrumente software și biblioteci JavaScript pot fi folosite în contextul programării Web la nivel de client?
    • Editare de cod & dezvoltare de aplicații Web Depanare Testare Documentare a codului Compresie Optimizare Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • 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. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: editare unele oferă și partajarea codului-sursă cu alți dezvoltatori
    • Utilizarea consolei JS obiectul console oferit de browser metode utile: log (), error(), warn(), info(), time(), timeEnd(), trace(), group(), groupEnd() https://developer.mozilla.org/docs/DOM/console Dr. Sabin Buragawww.purl.org/net/busaco instrumente: depanare
    • Firebug (Lite) http://getfirebug.com/ a se considera și instrumentele de depanare incluse în unele navigatoare Web exemplu notabil: Chrome Developer Tools Dr. Sabin Buragawww.purl.org/net/busaco instrumente: depanare
    • Verificarea corectitudinii codului JavaScript constructia "use strict"; indică interpretorului că se va utiliza varianta strictă a limbajului disponibilă începând cu ECMAScript versiunea 5 Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • 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ă Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Verificarea corectitudinii codului JavaScript sunt interzise diverse facilități: numere exprimate în baza 8, folosirea construcțiilor with, arguments.callee etc. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Modul de procesare strict: modifică semantica programelor nu este impus de vreun browser Web Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Verificare statică instrumente de referință: JSLint – http://www.jslint.com/ JSHint – http://www.jshint.com/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare opțiuni JSHint
    • Suport pentru unit testing exemplificări: Jasmine JSTest.NET QUnit Sinon.js Tyrtle Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Testare cross-browser a aplicațiilor Web instrumente disponibile gratuit Adobe BrowserLab, Browsera, BrowserShots, Microsoft SuperPreview, Spoon Browser Sandbox,… Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Testare cross-browser a aplicațiilor Web aplicații comerciale – exemplificări: BrowserStack, Cloud Testing, CrossBrowserTesting Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
    • Standarde de redactare a codului JavaScript exemple: Crock’s Code Conventions for JavaScript Google JavaScript Style Guide Idiomatic.js ghiduri specifice – e.g., jQuery Core Style Guide Dr. Sabin Buragawww.purl.org/net/busaco instrumente: documentarea codului
    • Software pentru documentarea programelor JSDoc Toolkit jGrouseDoc YUIDoc Dr. Sabin Buragawww.purl.org/net/busaco instrumente: documentarea codului
    • Instrumente privind compresia/minimizarea Online Javascript Compression Tool YUI Compressor Scriptalizer detalii în articolul A. Powell, Understanding Compression and Minification (mai 2012): Dr. Sabin Buragawww.purl.org/net/busaco instrumente: compresie de cod www.aaron-powell.com/javascript/understanding-compression-and-minification
    • Transformarea codului JS într-unul optimizat exemplu de referință: Closure Compiler https://developers.google.com/closure/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: optimizare javascript
    • Managementul de pachete JavaScript pentru dezvoltarea 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/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat exemple: Grunt, Yeoman Phantom.js, Selenium Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Facilitarea dezvoltării de aplicații Web la 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/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Suport pentru creșterea performanței asm.js (Mozilla, 2012) subset JavaScript ce poate fi utilizat ca limbaj de nivel scă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/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Alte limbaje pentru dezvoltarea de aplicații Web la 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 Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • 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/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Portarea altor aplicații în JavaScript JSIL – compilator care transformă aplicațiile .NET în programe JavaScript rulând independent de browser http://jsil.org/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • Limbaje aliniate altor paradigme exemplu: programare funcțională – ClosureScript https://github.com/clojure/clojurescript Dr. Sabin Buragawww.purl.org/net/busaco instrumente
    • conceperea “stratificată” a aplicațiilor JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
    • inițial: interacțiune minimală, fără JavaScript adăugarea progresivă a facilităților, în funcție de context Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
    • Dr. Sabin Buragawww.purl.org/net/busaco N-am putea recurge la biblioteci JavaScript specifice?
    • Dojo: dojotoolkit.org jQuery: jquery.com Prototype: prototypejs.org Rico: openrico.org Script.aculo.us: script.aculo.us YUI: developer.yahoo.net/yui/ Dr. Sabin Buragawww.purl.org/net/busaco Biblioteci generale privind prezentarea conținutului și manipularea arborelui DOM
    • Chroma D3 Dance Data Envision Processing.js Raphaël http://selection.datavisualization.ch/ Dr. Sabin Buragawww.purl.org/net/busaco Biblioteci pentru vizualizarea datelor
    • procesarea formularelor Web facilitarea transferurilor asincrone de date tehnici criptografice grafice (plotting) realizarea de efecte vizuale generarea de conținut grafic 2D/3D dezvoltare de jocuri (e.g., game engines) … Dr. Sabin Buragawww.purl.org/net/busaco Multe alte biblioteci JavaScript specializate
    • Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JavaScript: http://javascriptlibraries.com/ developers.google.com/speed/libraries/ microjs.com
    • Dr. Sabin Buragawww.purl.org/net/busaco jQuery aspecte esențiale (o prezentare succintă)
    • scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3 Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • oferă un API concis, dar extensibil, ușor de folosit nu intră în conflict cu alte biblioteci JavaScript disponibil open source Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • detalii tehnice + documentații: http://jquery.com/ http://learn.jquery.com/ http://jqfundamentals.com/ http://www.learningjquery.com/ Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $() Dr. Sabin Buragawww.purl.org/net/busaco 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 CSS metodă (funcționalitate) Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • selectarea nodurilor dorite recurge la convențiile privitoare la selectorii CSS – nivelul 2 și nivelul 3 http://docs.jquery.com/Selectors Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • selectarea nodurilor dorite recurge la convențiile privitoare 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. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').size () mărimea colecției obținute Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('a.menu').addClass ('vizitat') adăugarea unei clase CSS Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: poziție impară $('p:odd').css ('color', 'blue') modificarea unor proprietăți CSS Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • o serie de metode întorc rezultate privind 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • traversarea arborelui DOM al paginii Web: next () prev () parent () Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • evenimentul de disponibilitate a DOM-ului poate 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. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • „înlănțuirea” metodelor – chaining: atunci când o metodă întoarce o altă colecție, se poate folosi 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • suportul pentru transferuri asincrone – Ajax: încărcare asincronă a unui document $('div#stiri').load ('stiri.html'); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • suportul pentru transferuri asincrone – Ajax: încărcare prin GET $.get (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • suportul pentru transferuri asincrone – Ajax: încărcare via POST $.post (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • suportul pentru transferuri asincrone – Ajax: preluare răspuns în format JSON $.getJSON (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • suportul pentru transferuri asincrone – Ajax: metoda cea mai generală (low level) $.ajax (url, parametri); detalii la http://api.jquery.com/jQuery.ajax/ Dr. Sabin Buragawww.purl.org/net/busaco jQuery
    • Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco 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 } });
    • suportul pentru transferuri asincrone – Ajax: evenimente Ajax locale – tratate de obiectul Ajax instanțiat beforeSend, success, error, complete Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit vezi exemplele din arhiva asociată acestei prezentări Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz
    • Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit utilizăm URL-ul http://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/ Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz
    • interactiune web: ajax – studiu de caz "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": "...", tip de data XML Schema "published" : "2012-05-26T13:49:08Z", "author" : "...", "author_id" : "...", "tags" : "iasi romania informatica FII ..." }] Dr. Sabin Buragawww.purl.org/net/busaco { Forma generală a răspunsului JSON transmis de Flickr: }
    • studiu de caz Dr. Sabin Buragawww.purl.org/net/busaco // preluăm asincron imagini disponibile pe Flickr jQuery.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"); }); });
    • Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz un posibil rezultat obținut (inclusiv trasarea pas-cu-pas a execuției codului JavaScript via extensia Firebug)
    • efectuarea de animații simple: $('h1').hide ('slow'); $('h1').slideDown ('fast'); $('h1').fadeOut (2000); Dr. Sabin Buragawww.purl.org/net/busaco 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. Sabin Buragawww.purl.org/net/busaco jQuery
    • Dr. Sabin Buragawww.purl.org/net/busaco disponibilitatea unei suite largi de plug-in-uri http://plugins.jquery.com/
    • Dr. Sabin Buragawww.purl.org/net/busaco șabloane de proiectare pentru JavaScript
    • creaționale Builder, Prototype, Singleton structurale Adapter, Bridge, Decorator, Façade, Flyweight, Proxy comportamentale Command, Iterator, Mediator, Observer, State, Visitor Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare traditionale
    • MVC (Model-View-Controller) MVP (Model-View-Presenter) MVVM (Model View ViewModel) Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare MV* A. Osmani, Digesting JavaScript MVC (iunie 2012) http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/
    • MVC (Model-View-Controller) MVP (Model-View-Presenter) MVVM (Model View ViewModel) utilizare pragmatică via biblioteci/framework-uri precum Angular, Backbone, Ember, Spine, KnockoutJS Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare MV*
    • 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/ Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Events
    • 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 */ } }); Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Router – “leagă” URL-uri la rute (cod) după Jeff Carouth (2012)
    • Dr. Sabin Buragawww.purl.org/net/busaco 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)
    • var Student = Backbone.Model.extend ( { // date despre un student urlRoot: '/students', toString: function() { return this.get ('nume') + " " + this.get ('an') + " " + this.get ('nota'); } }); Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Model – conține informații sincronizate privind datele existente la nivel de server (backend) 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)
    • Backbone.Collection – reprezintă o colecție de modele Dr. Sabin Buragawww.purl.org/net/busaco 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 Ajax success: _.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)
    • exemplificări: Dust.js – http://akdubya.github.io/dustjs/ Handlebars – http://handlebarsjs.com/ Mustache.js – http://github.com/janl/mustache.js Dr. Sabin Buragawww.purl.org/net/busaco Backbone permite folosirea oricărui sistem JavaScript de templating
    • aspect de interes: modularizarea codului (loose coupling) specificarea modulelor JS se realizează via limbajul AMD (Asynchronous Module Definition) Dr. Sabin Buragawww.purl.org/net/busaco Ș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. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
    • aspect de interes: modularizarea codului (loose coupling) alternativ, se poate recurge la CommonJS un format de declarare a modulelor și pachetelor reutilizabile la nivel de server Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
    • detalii și exemple – inclusiv pentru jQuery – în cartea A. Osmani, Learning JavaScript Design Patterns (2012) http://addyosmani.com/resources/essentialjsdesignpatterns/book/ Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare în contextul JavaScript
    • framework-uri & biblioteci JavaScript exemplu notabil: jQuery Mobile instrumente independente de platformă Apache Cordova (PhoneGap) – http://cordova.apache.org/ Titanium – http://www.appcelerator.com/titanium/ Dr. Sabin Buragawww.purl.org/net/busaco JavaScript în contextul Web-ului mobil utilizând API-uri JavaScript oferite de platformă Amazon Fire OS, Microsoft Windows 8, Mozilla Firefox OS
    • definirea de macro-uri: Sweet.js securitate: 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. Sabin Buragawww.purl.org/net/busaco Alte facilități și extinderi
    • Dr. Sabin Buragawww.purl.org/net/busaco Care este viitorul limbajului JavaScript?
    • specificație în stadiu de ciornă (Rev 21, noiembrie 2013) Dr. Sabin Buragawww.purl.org/net/busaco EcmaScript 6 (ES6) 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
    • definirea de clase – perspectiva paradigmei obiectuale parametri cu valori implicite și parametri multipli iteratori & generatori noi tipuri de date (e.g., map, set, proxy) modularizarea codului: module + importuri …și altele Dr. Sabin Buragawww.purl.org/net/busaco EcmaScript 6 (ES6)
    • vezi și proiectul Traceur – https://github.com/google/traceur-compiler (JavaScript.next-to-JavaScript-of-today compiler) Dr. Sabin Buragawww.purl.org/net/busaco suportul actual pentru ES6 oferit de navigatoarele Web http://kangax.github.io/es5-compat-table/es6/
    • Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: suita de tehnologii HTML5 (prima parte)