Grasso Frameworks Ajax

2,288 views

Published on

Giuseppe Grasso presenta tutte le framework ajax

Published in: Technology
  • Be the first to comment

Grasso Frameworks Ajax

  1. 1. Frameworks Ajax Autore: Giuseppe Grasso Professione: Domino Developer Sponsored by
  2. 2. Agenda <ul><li>Perché usare un Framework? </li></ul><ul><li>Cosa voglio? </li></ul><ul><li>Di cosa ho bisogno? </li></ul><ul><li>Pericoli </li></ul><ul><li>Frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks frameworks </li></ul>
  3. 3. Non reinventare la ruota <ul><li>Qualcun altro si occupa dei dettagli </li></ul><ul><ul><li>Incompatibilità fra i browser </li></ul></ul><ul><ul><li>Funzioni di basso livello </li></ul></ul><ul><ul><li>Patterns già coperti </li></ul></ul><ul><li>Concentrarsi sugli aspetti applicativi </li></ul>
  4. 4. <ul><li>Facilità di utilizzo </li></ul><ul><li>Integrazione con Domino </li></ul><ul><li>Personalizzazione </li></ul><ul><li>Affidabilità </li></ul><ul><li>Sicurezza </li></ul><ul><li>Maturità </li></ul><ul><li>Licenza Accettabile </li></ul>Cosa voglio in un framework?
  5. 5. A cosa mi serve? <ul><li>Aderenza agli standard </li></ul><ul><li>Usabilità </li></ul><ul><li>Interattività </li></ul><ul><li>User Experience </li></ul><ul><li>Risparmio </li></ul>
  6. 6. Dove lo metto <ul><li>Sul file system </li></ul><ul><ul><li>Domino/html/…. </li></ul></ul><ul><li>In un database nsf </li></ul><ul><ul><li>A manina </li></ul></ul><ul><ul><li>Uso webdav: http://www.dominopoint.it/Dominopoint/dominopoint_blog.nsf/dx/webdav_domino.htm </li></ul></ul><ul><li>Considerare: </li></ul><ul><li>Prestazioni </li></ul><ul><li>libertà di accesso al file system </li></ul><ul><li>facilità di manutenzione evolutiva </li></ul>
  7. 7. Performance <ul><li>Considerare: </li></ul><ul><li>Latenza e banda </li></ul><ul><li>Numero di connessioni concorrenti e di richieste sul server </li></ul><ul><li>Performance del browser: memoria e motore javascript </li></ul>
  8. 8. Compressione http: gzip <ul><li>Supporto nativo Domino </li></ul><ul><ul><li>Nascosto, per buoni motivi </li></ul></ul><ul><li>Servo i contenuti precedentemente compressi con gzip </li></ul><ul><ul><li>Occhio all’header http </li></ul></ul><ul><li>Introduco un reverse proxy davanti al server domino (es: apache) che si occupi di gzippare alcuni contenuti </li></ul><ul><ul><li>Performance, complessità </li></ul></ul>
  9. 9. Frameworks… <ul><li>Esistono più di 200 frameworks ajax </li></ul><ul><li>Orientati agli effetti </li></ul><ul><li>Orientati all’interfaccia (Widget) </li></ul><ul><li>Generici </li></ul><ul><li>specializzati </li></ul>
  10. 10. Prototype <ul><li>http://www.prototypejs.org/ </li></ul><ul><li>Uno dei primi e dei più usati </li></ul><ul><li>1 singolo file javascript </li></ul><ul><li>Altri sono basati su Prototype </li></ul><ul><li>Funzionalità di base </li></ul><ul><li>Facile da usare </li></ul><ul><li>Ben documentato: </li></ul><ul><ul><li>http://www.prototypejs.org/api </li></ul></ul><ul><ul><li>http://www.prototypejs.org/learn </li></ul></ul><ul><li>Licenza MIT-style </li></ul><ul><ul><li>Puoi farne quello che vuoi, tranne fargli causa </li></ul></ul>
  11. 11. Prototype: Utility Methods <ul><li>$(id | element) -> HTMLElement </li></ul><ul><ul><li>getElementById </li></ul></ul><ul><li>$$(cssRule...) -> [HTMLElement...] </li></ul><ul><li>$A(iterable) -> actualArray </li></ul><ul><ul><li>Array.from </li></ul></ul><ul><li>$F(element) -> value </li></ul><ul><ul><li>Form.Element.getValue </li></ul></ul><ul><li>$H([obj]) -> Hash </li></ul><ul><li>… </li></ul>
  12. 12. Prototype: cont… <ul><li>Ajax </li></ul><ul><ul><li>.PeriodicalUpdater, .Request, .Updater </li></ul></ul><ul><li>Array, Class, Date, Element, Element.Methods, Enumerable,Event, Form, Function, Hash, Insertion, Number, Object, ObjectRange, PeriodicalExecuter, Position, Prototype, String, Template, TimedObserver </li></ul>
  13. 13. script.aculo.us <ul><li>http://script.aculo.us/ </li></ul><ul><li>Basato su prototype </li></ul><ul><li>Nasce intorno a ruby on rails </li></ul><ul><li>Facile da usare </li></ul><ul><li>Ben documentato: </li></ul><ul><ul><li>http://wiki.script.aculo.us/scriptaculous/ </li></ul></ul><ul><ul><li>http://wiki.script.aculo.us/scriptaculous/show/Demos </li></ul></ul><ul><li>Licenza MIT-style </li></ul>
  14. 14. script.aculo.us cont… <ul><li>animation framework </li></ul><ul><ul><li>core & combination </li></ul></ul><ul><li>drag and drop </li></ul><ul><ul><li>draggables, droppables, sortables, slider </li></ul></ul><ul><li>Ajax controls </li></ul><ul><ul><li>autocompletions, in place editing </li></ul></ul><ul><li>DOM utilities </li></ul><ul><ul><li>Builder: crea nodi dom </li></ul></ul><ul><li>unit testing </li></ul>
  15. 15. mootools <ul><li>http://mootools.net/ </li></ul><ul><li>Compatto e modulare </li></ul><ul><ul><li>Download builder: scegli i moduli che ti servono. </li></ul></ul><ul><li>Orientata agli effetti </li></ul><ul><li>Facile da usare </li></ul><ul><li>Ben documentato: </li></ul><ul><ul><li>http://docs.mootools.net/ </li></ul></ul><ul><ul><li>http://demos.mootools.net/ </li></ul></ul><ul><li>Licenza MIT-style </li></ul>
  16. 16. Mootools cont… <ul><li>Accordion </li></ul><ul><li>Ajax, Ajax.Advanced, Ajax.Form </li></ul><ul><li>Asset.css, Asset.images </li></ul><ul><li>Chain, Chain.Periodical </li></ul><ul><li>Drag.Absolutely, Drag.Cart, DragDrop </li></ul><ul><li>Element.Event </li></ul><ul><li>Fx.Elements, Fx.Morph, Fx.Scroll, Fx.Slide, Fx.Styles, Fx.Transitions </li></ul><ul><li>Group </li></ul><ul><li>Hash.Cookie </li></ul><ul><li>Json.Remote </li></ul><ul><li>Mousewheel, MousewheelCustom </li></ul><ul><li>Periodical </li></ul><ul><li>Resizable </li></ul><ul><li>Scroller </li></ul><ul><li>Slider </li></ul><ul><li>Sortables </li></ul><ul><li>Tips </li></ul>
  17. 17. moo.fx 2 <ul><li>http://moofx.mad4milk.net/ </li></ul><ul><li>Inclusa in mootools, estende prototype. (l’fx. Di mootools) </li></ul><ul><li>Solo 3k </li></ul><ul><li>Made in Italy (Valerio Proietti) </li></ul><ul><li>Orientata agli effetti </li></ul><ul><li>Facile da usare (stile mootools) </li></ul><ul><li>Licenza MIT </li></ul>
  18. 18. Rico <ul><li>http://openrico.org/ </li></ul><ul><li>Orientata agli effetti </li></ul><ul><li>Estende prototype </li></ul><ul><li>Ben documentata </li></ul><ul><ul><li>http://openrico.org/demos </li></ul></ul><ul><ul><li>http://forum.openrico.org/ </li></ul></ul><ul><ul><li>Libro: Ajax in Action </li></ul></ul><ul><li>Licenza Opensource - Apache 2.0 </li></ul>
  19. 19. jQuery <ul><li>http://jquery.com/ (rialscio 1.2: 10/9/07) </li></ul><ul><li>Orientata agli effetti </li></ul><ul><li>Leggera </li></ul><ul><li>CSS3 compliant </li></ul><ul><li>Plugins: http://jquery.com/plugins/ </li></ul><ul><li>Ben documentata </li></ul><ul><ul><li>http://docs.jquery.com/Main_Page </li></ul></ul><ul><ul><li>http://docs.jquery.com/Tutorials </li></ul></ul><ul><ul><li>Libro: Learning jQuery Book </li></ul></ul><ul><li>Licenza MIT o GPL </li></ul>
  20. 20. jQuery cont… <ul><li>Mantiene le promesse: </li></ul><ul><ul><li>“ jQuery is designed to change the way that you write JavaScript.” </li></ul></ul><ul><ul><li>“ write less do more” </li></ul></ul><ul><li>Chainability: </li></ul><ul><ul><li>Ogni metodo in jQuery ritorna un oggetto : </li></ul></ul><ul><ul><li>$(&quot;p.surprise&quot;).addClass(&quot;ohmy&quot;).show(&quot;slow&quot;); </li></ul></ul><ul><li>Selectors, Attributes, Traversing, Manipulation, CSS, Events, Effects, Ajax, Utilities </li></ul>
  21. 21. ext <ul><li>http://extjs.com/ </li></ul><ul><li>Nasce come estensione delle Yahoo! User Interface (YUI) library , richiedeva una fra YUI, jQuery or Prototype/Script.aculo.us, dalla versione 1.1 include il suo core nativo. </li></ul><ul><li>Orientata alle applicazioni </li></ul><ul><li>Ben documentata </li></ul><ul><ul><li>http://extjs.com/forum/ </li></ul></ul><ul><ul><li>http:// extjs.com / learn / Ext_Manual </li></ul></ul><ul><ul><li>http://extjs.com/deploy/ext/docs/index.html </li></ul></ul><ul><li>Supporto commerciale </li></ul><ul><li>Licenza multipla: </li></ul><ul><ul><li>Commerciale </li></ul></ul><ul><ul><li>Open source LGPL 3.0 </li></ul></ul><ul><ul><li>OEM/reseller </li></ul></ul>
  22. 22. ext cont… <ul><li>Alcune funzioni base </li></ul><ul><li>Inoltre: </li></ul><ul><ul><li>Dialogs </li></ul></ul><ul><ul><li>Toolabar </li></ul></ul><ul><ul><li>Menu </li></ul></ul><ul><ul><li>Grid </li></ul></ul><ul><ul><li>Form </li></ul></ul><ul><ul><li>Combobox </li></ul></ul><ul><ul><li>Tree </li></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Resizable </li></ul></ul><ul><ul><li>TabPanel </li></ul></ul><ul><ul><li>Views </li></ul></ul><ul><ul><li>Localization </li></ul></ul><ul><ul><li>Debug </li></ul></ul><ul><li>Temi ed engine switchabili </li></ul>
  23. 23. ext.nd <ul><li>http://www.openntf.org/projects/pmt.nsf/ProjectLookup/Ext.nd </li></ul><ul><li>Un’estensione di ext orientata a Domino </li></ul><ul><li>Alpha 2 Revision 1 </li></ul><ul><li>Distribuita anche come .nsf </li></ul><ul><li>Consente un look & feel molto simile a Lotus Notes (basic) </li></ul><ul><li>Opensource </li></ul><ul><li>Implementa: </li></ul><ul><ul><li>Actionbar </li></ul></ul><ul><ul><li>Documenti </li></ul></ul><ul><ul><li>Moduli </li></ul></ul><ul><ul><li>Formule </li></ul></ul><ul><ul><li>Outline </li></ul></ul><ul><ul><li>Viste </li></ul></ul>
  24. 24. ext.nd <ul><li>http://openntf.org/extnd/names.nsf/main.html </li></ul>
  25. 25. d ō j ō <ul><li>http://dojotoolkit.org/ </li></ul><ul><li>(quasi) Maturo </li></ul><ul><ul><li>La 1.0 dovrebbe essere retrocompatibile con la 0.9 </li></ul></ul><ul><li>Usato da IBM in quickr e connections </li></ul><ul><ul><li>Ci gioca Vistalli: </li></ul></ul><ul><li>Orientata alle applicazioni </li></ul><ul><li>Pesante uso di Widget </li></ul><ul><li>Ben documentato: </li></ul><ul><ul><li>http://dojotoolkit.org/book/dojo-book-0-9-0 </li></ul></ul><ul><ul><li>http://dojotoolkit.org/forum </li></ul></ul><ul><li>Licenza MIT-style: Academic Free License 2.1 </li></ul>
  26. 26. d ō j ō <ul><li>Dijit </li></ul><ul><ul><li>Il motore widget costruito su dojo </li></ul></ul><ul><ul><li>Controlli, layout, validazione, temi accessibilità </li></ul></ul><ul><li>Dojox </li></ul><ul><ul><li>Il codice avanzato e/o sperimentale </li></ul></ul><ul><ul><li>Offline, FX e GFX </li></ul></ul>
  27. 27. D ō j ō: d ō j ō 4domino <ul><li>http://www.vistalli.it/blog/ vistalliblog.nsf / dx /dojo4domino.htm </li></ul>
  28. 28. Per favore, compilate il modulo di feedback… Potete vincere un Blackberry! Grazie!!!!
  29. 29. I Nostri Sponsor Gli Autori Daniele Grillo Claudio Meregalli Giuseppe Grasso Gli Speakers Daniele Vistalli Fabrizio Marchesano Giorgio Blangetti Stefano Mastella Enzo Stanzione Marco Fabbri Lui Davide Pannuto

×