Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript
1 like607 views
Documentul oferă o prezentare detaliată a instrumentelor software și bibliotecilor disponibile pentru programarea web la nivel de client utilizând JavaScript. Se discută despre instrumente pentru editare, depanare, testare, documentare și optimizare a codului, precum și despre biblioteci mai populare precum jQuery. În plus, se menționează diverse tehnici și soluții pentru gestionarea eficientă a aplicațiilor web și pentru creșterea performanței acestora.
![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 Buragawww.purl.org/net/busaco
{
Forma generală a răspunsului JSON transmis de Flickr:
}](https://image.slidesharecdn.com/web11-programareweb-javascript-inginerie-jquery-140116061901-phpapp01/85/Dezvoltarea-aplicatiilor-Web-la-nivel-de-client-cursul-10-Ingineria-dezvoltarii-aplicatiilor-JavaScript-71-320.jpg)
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript
- 1. Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client inginerie software în contextul JavaScript
- 2. Alan J. Perlis Dr. Sabin Buragawww.purl.org/net/busaco “There are two ways to write error-free programs; only the third one works.”
- 3. Dr. Sabin Buragawww.purl.org/net/busaco Ce instrumente software și biblioteci JavaScript pot fi folosite în contextul programării Web la nivel de client?
- 4. Editare de cod & dezvoltare de aplicații Web Depanare Testare Documentare a codului Compresie Optimizare Dr. Sabin Buragawww.purl.org/net/busaco instrumente
- 5. 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 Buragawww.purl.org/net/busaco instrumente: editare unele oferă și partajarea codului-sursă cu alți dezvoltatori
- 6. 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 Buragawww.purl.org/net/busaco instrumente: depanare
- 7. Firebug (Lite) http://getfirebug.com/ a se considera și instrumentele de depanare incluse în unele navigatoare Web exemplu notabil: Chrome Developer Tools Dr. Sabin Buragawww.purl.org/net/busaco instrumente: depanare
- 8. 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 Buragawww.purl.org/net/busaco instrumente: testare
- 9. 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 Buragawww.purl.org/net/busaco instrumente: testare
- 10. Verificarea corectitudinii codului JavaScript sunt interzise diverse facilități: numere exprimate în baza 8, folosirea construcțiilor with, arguments.callee etc. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 11. Modul de procesare strict: modifică semantica programelor nu este impus de vreun browser Web Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 12. Verificare statică instrumente de referință: JSLint – http://www.jslint.com/ JSHint – http://www.jshint.com/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 13. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare opțiuni JSHint
- 14. Suport pentru unit testing exemplificări: Jasmine JSTest.NET QUnit Sinon.js Tyrtle Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 15. Testare cross-browser a aplicațiilor Web instrumente disponibile gratuit Adobe BrowserLab, Browsera, BrowserShots, Microsoft SuperPreview, Spoon Browser Sandbox,… Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 16. Testare cross-browser a aplicațiilor Web aplicații comerciale – exemplificări: BrowserStack, Cloud Testing, CrossBrowserTesting Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
- 17. 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 Buragawww.purl.org/net/busaco instrumente: documentarea codului
- 18. Software pentru documentarea programelor JSDoc Toolkit jGrouseDoc YUIDoc Dr. Sabin Buragawww.purl.org/net/busaco instrumente: documentarea codului
- 19. Instrumente privind compresia/minimizarea Online Javascript Compression Tool YUI Compressor Scriptalizer detalii în articolul A. Powell, Understanding Compression and Minification (mai 2012): Dr. Sabin Buragawww.purl.org/net/busaco instrumente: compresie de cod www.aaron-powell.com/javascript/understanding-compression-and-minification
- 20. Transformarea codului JS într-unul optimizat exemplu de referință: Closure Compiler https://developers.google.com/closure/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: optimizare javascript
- 21. 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 Buragawww.purl.org/net/busaco instrumente
- 22. Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat exemple: Grunt, Yeoman Phantom.js, Selenium Dr. Sabin Buragawww.purl.org/net/busaco instrumente
- 23. 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 Buragawww.purl.org/net/busaco instrumente
- 24. 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 Buragawww.purl.org/net/busaco instrumente
- 25. 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 Buragawww.purl.org/net/busaco instrumente
- 26. 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 Buragawww.purl.org/net/busaco instrumente
- 27. 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 Buragawww.purl.org/net/busaco instrumente
- 28. Limbaje aliniate altor paradigme exemplu: programare funcțională – ClosureScript https://github.com/clojure/clojurescript Dr. Sabin Buragawww.purl.org/net/busaco instrumente
- 29. conceperea “stratificată” a aplicațiilor JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
- 30. inițial: interacțiune minimală, fără JavaScript adăugarea progresivă a facilităților, în funcție de context Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
- 31. înaintea folosirii oricărei tehnici dorite, de testat suportul oferit de navigator: JavaScript, cookie-uri, clase/metode DOM, Ajax etc. Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
- 32. Dr. Sabin Buragawww.purl.org/net/busaco N-am putea recurge la biblioteci JavaScript specifice?
- 33. 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 Buragawww.purl.org/net/busaco Biblioteci generale privind prezentarea conținutului și manipularea arborelui DOM
- 34. Chroma D3 Dance Data Envision Processing.js Raphaël http://selection.datavisualization.ch/ Dr. Sabin Buragawww.purl.org/net/busaco Biblioteci pentru vizualizarea datelor
- 35. 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 Buragawww.purl.org/net/busaco Multe alte biblioteci JavaScript specializate
- 36. Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JavaScript: http://javascriptlibraries.com/ developers.google.com/speed/libraries/ microjs.com
- 37. Dr. Sabin Buragawww.purl.org/net/busaco jQuery aspecte esențiale (o prezentare succintă)
- 38. scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3 Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 39. oferă un API concis, dar extensibil, ușor de folosit nu intră în conflict cu alte biblioteci JavaScript disponibil open source Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 40. detalii tehnice + documentații: http://jquery.com/ http://learn.jquery.com/ http://jqfundamentals.com/ http://www.learningjquery.com/ Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 41. 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 Buragawww.purl.org/net/busaco jQuery
- 42. accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $() Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 43. 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 Buragawww.purl.org/net/busaco jQuery
- 44. selectarea nodurilor dorite recurge la convențiile privitoare la selectorii CSS – nivelul 2 și nivelul 3 http://docs.jquery.com/Selectors Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 45. 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 Buragawww.purl.org/net/busaco jQuery
- 46. 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 Buragawww.purl.org/net/busaco jQuery
- 47. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').size () mărimea colecției obținute Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 48. 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 Buragawww.purl.org/net/busaco jQuery
- 49. 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 Buragawww.purl.org/net/busaco jQuery
- 50. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 51. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('a.menu').addClass ('vizitat') adăugarea unei clase CSS Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 52. 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 Buragawww.purl.org/net/busaco jQuery
- 53. 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 Buragawww.purl.org/net/busaco jQuery
- 54. traversarea arborelui DOM al paginii Web: next () prev () parent () Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 55. 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 Buragawww.purl.org/net/busaco jQuery
- 56. 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 Buragawww.purl.org/net/busaco jQuery
- 57. „î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 Buragawww.purl.org/net/busaco jQuery
- 58. „î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 Buragawww.purl.org/net/busaco jQuery
- 59. suportul pentru transferuri asincrone – Ajax: încărcare asincronă a unui document $('div#stiri').load ('stiri.html'); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 60. suportul pentru transferuri asincrone – Ajax: încărcare prin GET $.get (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 61. suportul pentru transferuri asincrone – Ajax: încărcare via POST $.post (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 62. suportul pentru transferuri asincrone – Ajax: preluare răspuns în format JSON $.getJSON (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 63. 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 Buragawww.purl.org/net/busaco jQuery
- 64. suportul pentru transferuri asincrone – Ajax: metoda cea mai generală (low level) $.ajax (url, parametri); detalii la http://api.jquery.com/jQuery.ajax/ Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 65. Dr. Sabin Buragawww.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 } });
- 66. astfel, pot fi implementate mash-up-uri la nivel de client Dr. Sabin Buragawww.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 } });
- 67. suportul pentru transferuri asincrone – Ajax: evenimente Ajax locale – tratate de obiectul Ajax instanțiat beforeSend, success, error, complete Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 68. 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 Buragawww.purl.org/net/busaco jQuery
- 69. Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit vezi exemplele din arhiva asociată acestei prezentări Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz
- 70. 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 Buragawww.purl.org/net/busaco studiu de caz
- 71. 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 Buragawww.purl.org/net/busaco { Forma generală a răspunsului JSON transmis de Flickr: }
- 72. studiu de caz Dr. Sabin Buragawww.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"); }); });
- 73. Dr. Sabin Buragawww.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)
- 74. efectuarea de animații simple: $('h1').hide ('slow'); $('h1').slideDown ('fast'); $('h1').fadeOut (2000); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
- 75. 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 Buragawww.purl.org/net/busaco jQuery
- 76. Dr. Sabin Buragawww.purl.org/net/busaco disponibilitatea unei suite largi de plug-in-uri http://plugins.jquery.com/
- 77. Dr. Sabin Buragawww.purl.org/net/busaco șabloane de proiectare pentru JavaScript
- 78. creaționale Builder, Prototype, Singleton structurale Adapter, Bridge, Decorator, Façade, Flyweight, Proxy comportamentale Command, Iterator, Mediator, Observer, State, Visitor Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare traditionale
- 79. MVC (Model-View-Controller) MVP (Model-View-Presenter) MVVM (Model View ViewModel) Dr. Sabin Buragawww.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/
- 80. 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 Buragawww.purl.org/net/busaco Șabloane de proiectare MV*
- 81. 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 Buragawww.purl.org/net/busaco Backbone.Events
- 82. 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 Buragawww.purl.org/net/busaco Backbone.Router – “leagă” URL-uri la rute (cod) după Jeff Carouth (2012)
- 83. Dr. Sabin Buragawww.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)
- 84. 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 Buragawww.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)
- 85. Backbone.Collection – reprezintă o colecție de modele Dr. Sabin Buragawww.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)
- 86. exemplificări: Dust.js – http://akdubya.github.io/dustjs/ Handlebars – http://handlebarsjs.com/ Mustache.js – http://github.com/janl/mustache.js Dr. Sabin Buragawww.purl.org/net/busaco Backbone permite folosirea oricărui sistem JavaScript de templating
- 87. aspect de interes: modularizarea codului (loose coupling) specificarea modulelor JS se realizează via limbajul AMD (Asynchronous Module Definition) Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
- 88. 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 Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
- 89. 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 Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
- 90. detalii și exemple – inclusiv pentru jQuery – în cartea A. Osmani, Learning JavaScript Design Patterns (2012) http://addyosmani.com/resources/essentialjsdesignpatterns/book/ Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare în contextul JavaScript
- 91. 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 Buragawww.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
- 92. 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 Buragawww.purl.org/net/busaco Alte facilități și extinderi
- 93. Dr. Sabin Buragawww.purl.org/net/busaco Care este viitorul limbajului JavaScript?
- 94. specificație în stadiu de ciornă (Rev 21, noiembrie 2013) Dr. Sabin Buragawww.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
- 95. 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 Buragawww.purl.org/net/busaco EcmaScript 6 (ES6)
- 96. vezi și proiectul Traceur – https://github.com/google/traceur-compiler (JavaScript.next-to-JavaScript-of-today compiler) Dr. Sabin Buragawww.purl.org/net/busaco suportul actual pentru ES6 oferit de navigatoarele Web http://kangax.github.io/es5-compat-table/es6/
- 97. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: suita de tehnologii HTML5 (prima parte)