Introduzione alle Single Page Application

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Introduzione alle Single Page Application"

Transcript

1 Introduzione alle Single Page Application Abstract Introduzione al mondo delle Single Page Application attraverso DurandalJS, RequireJS, BreezeJS, QJS, etc.. Alberto Acerbis for TheDiligence - 2 dicembre 2013

2 Sommario Cos è una SPA... 2 DurandalJS... 3 Struttura di una SPA con DurandalJS... 3 Creazione di una pagina... 4 Creazione del ViewModel... 4 Creazione della View... 6 Il Sistema di Routing... 7 BreezeJS... 9 Caratteristiche principali... 9 EntityManager... 9 Entity Data Binding Query Salvataggio dei Dati Metadata Promise Vs Callback Function Modules in RequireJS Fonti... 18

3 Cos è una SPA Una SPA è un'applicazione che prevede un modello di sviluppo completamente diverso dalle classiche applicazioni web. In una SPA l'applicazione è suddivisa in due layer principali con responsabilità ben precise: il client e il server. Il client ha la responsabilità di mostrare i dati all'utente e di permettere a questo di interagire con i dati stessi. Il server ha il compito di fornire le API di accesso ai dati che sono accedute dal client sia per leggere che per scrivere. Il layer client, e questa è la grande novità, è sviluppato completamente in JavaScript, HTML e CSS e quindi gira interamente sul browser. Il layer server può essere invece sviluppato utilizzando qualunque piattaforma server (Web API, ASP.NET MVC, ma anche servizi basati su Java o PHP o altro ancora). Client e server comunicano sfruttando normali richieste AJAX (in genere tramite il protocollo REST). Sviluppare una SPA da zero significa doversi occupare di diversi aspetti come il binding dei dati all interfaccia, e di questo ne abbiamo parlato al primo incontro introducendo KnockoutJS, la navigazione tra le pagine, il download dei file JavaScript e HTML necessari, la compatibilità tra i browser. Tutto questo richiede un approfondita conoscenza di JavaScript, oltre che un buon monte ore di tempo disponibile. La standardizzazione, e la continua diffusione di JavaScript, hanno fortunatamente permesso la creazione di framework che si occupano di gestire la maggior parte delle complessità infrastrutturali di un SPA lasciando a noi il compito di scrivere il codice di business. Di questi framework ne esistono ormai diversi, uno di questi, AngularJS, lo abbiamo visto nella presentazione di Gianni, oggi ci occuperemo di DurandalJS.

4 DurandalJS DurandalJS è un framework sviluppato dal team Caliburn.Micro, tanto per intenderci gli stessi di MVVM. La potenza di questo framework consiste nel fatto che il team non ho reinventato nulla, come cita il sito ufficiale, non hanno reinventato la ruota da zero, bensì ha riutilizzato framework già largamente diffusi sul web, come KnockoutJS, RequireJS e jquery e li ha uniti sotto un unico cappello. 1. JQuery viene sfruttato per le promise e per la manipolazione del DOM. 2. KnockoutJS per l implementazione del pattern MVVM. 3. RequireJS per la modularizzazione del codice. Di suo, DurandalJS, implementa un meccanismo di navigazione e un servizio di messaggistica, oltre che un sistema di routing che mappi gli url alle relative view, un meccanismo di popup, uno splash screen e altri aspetti più o meno secondari. Struttura di una SPA con DurandalJS Il template di DurandalJS nell ambiente di Visual Studio genera una applicazione ASP.NET MVC classica a cui aggiunge HTML, CSS e JavaScript, oltre a classi lato server e lato client. Dal punto di vista del server genera un controller, una view e una classe che genera un bundle. Il controller, con l originale nome di DurandalController, ha un solo metodo (index) che non fa altro che richiamare la view all interno della quale è ospitata la SPA. La view è estremamente semplice <body> <div <script src="/app/durandal/amd/require.js" data-main="app/main"></script> </body>

5 Nella view è dichiarato un tag div all interno del quale verranno visualizzate le pagine dell applicazione, lo script del bundle generato dal template e infine il tag script responsabile dell avvio dell applicazione. Per quanto riguarda il bundle c è poco da aggiungere, la classe generata dal template non fa altro che prendere i file JavaScript necessari al template stesso e includerli nel bundle scripts/vendor.js che è poi quello utilizzato dalla view vista nel codice precedente. Da sottolineare che nel bundle non vi è presenza dei file JavaScript di Durandal questi infatti vengono caricati all occorrenza tramite Require.js. Vedremo in seguito l importanza di questa libreria. Molto più interessante è osservare cosa è successo lato client. I file necessari a Durandal sono inclusi un due cartelle App e Scripts. Nella cartella Scripts sono contenuti i file a cui Durandal si appoggia (RequireJS, KnockoutJS); i file JS strettamente appartenenti a Durandal si trovano in una sottocartella che prende il nome di Durandal. Questa cartella si può trovare nella cartella Scripts, nel caso del template Durandal, nella cartella App nel caso del template HotTowel, di John Papa, che è un implementazione di Durandal. Nella cartella App c è il file che viene lanciato al caricamento della SPA (main.js) e poi ci sono le View, che non sono altro che pagine HTML ridotte, con i relativi viewmodels, contenuti nella cartella ViewModels. Anche in questo caso ci sono alcune piccole differenza fra il template Durandal ed il template HotTowel, il secondo risulta avere una struttura un poco più ordinata e logica a mio avviso. Il nostro codice andrà a popolare sostanzialmente queste due cartelle. Creazione di una pagina La creazione di una pagina si articola in tre azioni 1. Creazione del ViewModel 2. Creazione della View 3. Aggiunta al sistema di routing Creazione del ViewModel Si tratta del file JavaScript contenente la logica della pagina. In esso vengono invocati i servizi per recuperare e/o modificare i dati. Il ViewModel espone anche le proprietà che compongono i dati che successivamente vengono collegati sulla View; in genere si tratta di observable o observabearray di Knockout in modo da poter sfruttare pienamente il relativo meccanismo di routing di quest ultimo.

6 define(['services/datacontext'], function (datacontext) { var coaches = ko.observablearray(); var activate = function () { // go get local data, if we have it return datacontext.getcoachpartials(speakers); ; var refresh = function () { return datacontext.getcoachpartials(speakers, true); ; var vm = { activate: activate, coaches: coaches, title: 'Coaches', refresh: refresh ; ); return vm; Dall esempio di codice possiamo vedere che un ViewModel non è altro che un modulo creato tramite la funzione define di RequireJS. Questa funzione accetta in input una lista di stringhe che rappresentano il riferimento a altri file JavaScript che non sono altro che moduli caricati sempre da RequireJS e sono quelli da cui il nostro ViewModel dipende. L ultimo parametro della funzione define è un callback che viene invocato quando RequireJS finisce di scaricare i file. Ad ogni parametro del callback corrisponde un istanza delle dipendenze specificate prima. Il callback deve restituire un oggetto che è quello che poi viene collegato alla View. Questo oggetto, come anticipato, può contenere sia proprietà che metodi che possono quindi essere invocati dalla View tramite la sintassi di KnockoutJS. Ci sono poi una serie di metodi opzionali che, se presenti, vengono invocati dal motore di DurandalJS, i più importanti sono 1. canactivate: invocato per specificare se la pagina può essere aperta

7 2. activate: invocato quando si naviga verso la pagina legata al ViewModel 3. candeactivate: invocato per specificare se si può abbandonare la pagina 4. deactivate: invocato quando si esce dalla pagina legata al ViewModel. E importante sottolineare che i metodi canactivae e candeactivate possono restituire un boolean o una promise, che a sua volta restituisce un boolean una volta risolta, mentri i metodi activate e deactivate possono o no restituire nulla, oppure una promise. Ovviamente, in accordo con i principi della programmazione asincrona, per tutti i metodi, nel caso venga restituita una promise, DurandalJS attende la risoluzione della stessa prima di proseguire nella pipeline. Fra i metodi elencati quello che praticamente è sempre presente è activate in quanto è il responsabile dei dai che vengono inizialmente visualizzati sulla View. Il file ViewModel, nel nostro caso coaches.js, dev essere salvato nella cartella ViewModels; deve perché, come vedremo, il sistema di routing di DurandalJS prevede questa disposizione dei file. Creazione della View La View è un file HTML, senza i tag di inizializzazione. Ricordiamoci che stiamo sviluppando una SPA, quindi tutta l applicazione è contenuta all interno di una singola pagina, perciò non avrebbe senso continuare a definire nuove pagine che SPA sarebbe!?!?! La View contiene il markup necessario a mostrare all utente i dati esposti dal ViewModel e si trova, fisicamente, nella cartella App/Views. L associazione tra la View ed il ViewModel viene risolta automaticamente da DurandalJS. Innanzitutto Durandal sfrutta il nome dei file per risolvere questa associazione, quindi i file che hanno lo stesso nome che si trovano nelle cartelle Views e ViewModels, vengono automaticamente associati fra loro. In seguito, grazie a KnockoutJS, Durandal associa i dati del ViewModel alla View, quindi è chiaro che noi dobbiamo rispettare la sintassi di KnockoutJS per decidere come visualizzare i nostri dati all utente <section class="view"> <header> <a class="btn btn-info btn-force-refresh pull-right" data-bind="click: refresh" href="#"><i class="icon-refresh"></i> Refresh</a> <h3 class="page-title" data-bind="text: title"></h3> <div class="article-counter"> <address data-bind="text: speakers().length"></address> <address>found</address>

8 </div> </header> <section class="view-list" data-bind="foreach: coaches"> <article class="article-container-full-width"> <div> <img data-bind="attr: { src: imagename " class="img-polaroid"/> <address data-bind="text: firstname"></address> <address data-bind="text: lastname"></address> </div> </article> </section> </section> Come si può vedere il codice delle View è estremamente semplice. Non abbiamo fatto altro che sfruttare Knockout per legare le proprietà del ViewMode agli oggetti della View e viceversa Le complessità ovviamente possono aumentare con l aumentare della complessità dell interfaccia, ma KnockoutJS mette a disposizione diversi meccanismi per semplificare lo sviluppo dell interfaccia, primo fra tutti il meccanismo dei custom binding dove i binding di base non siano applicabili; ovviamente l obiettivo è mantenere il codice delle interfacce il più pulito possibile. Il Sistema di Routing Di cosa stiamo parlando? Del modulo di DurandalJS che si occupa di trasformare un url in una richiesta a una specifica associazione View/ViewModels nella nostra SPA. Nel template originale la configurazione del routing è contenuta nel file shell.js, io preferisco creare un file separato, in genere config.js, dove specificare i parametri di configurazione della mia SPA. In ogni caso, al di là delle scelte personali di ognuno di noi, vediamo come si configura questo modulo var routes = [{ url: 'sessions', moduleid: 'viewmodels/sessions', name: 'Sessions', visible: true,

9 caption: 'Sessions', settings: { caption: '<i class="icon-book"></i> Sessions', { url: 'coaches', moduleid: 'viewmodels/coaches', name: 'Coaches', caption: 'Coaches', visible: true, settings: { caption: '<i class="icon-user"></i> Coaches', { url: 'sessiondetail/:id', moduleid: 'viewmodels/sessiondetail', name: 'Edit Session', caption: 'Edit Session', visible: false, { url: 'sessionadd', moduleid: 'viewmodels/sessionadd', name: 'Add Session', visible: false, caption: 'Add Session', settings: { admin: true, caption: '<i class="icon-plus"></i> Add Session' ];

10 BreezeJS Breeze è una libreria JavaScript che consente di gestire i dati nelle applicazioni Rich Client. L obiettivo principale di Breeze è quello di permettere la condivisione dei dati fra una pagina ed un altra senza necessariamente passare sempre dal server, e la navigabilità in essi, ossia fornire oggetti grafici complessi. Caratteristiche principali Creare oggetti lato client che rispecchiano il modello lato server. Breeze crea questi oggetti dinamicamente e lega le proprietà di questi oggetti alla UI della nostra applicazione (KnockuotJS nel nostro caso). In questo modo ogni oggetto di Breeze sa quando e quale dato è cambiato al suo interno. Permette la scrittura di Query in JavaScript, con tutte le fetures del caso, come ordinamento, filtro, raggruppamento, etc. Implementa OData (Open Data Protocol) in modo da poter espandere il risultato di una query con entità correlate. Permette di salvare un oggetto, o un gruppo di più entità, con una sola transizione. Crea una cache dei dai lato Client riducendo drasticamente la necessità di continui round-trip clientserver per recuperare dati già presenti lato Client alla transizione da una pagina ad un altra. Permette di estendere il modello con metodi, proprietà ed eventi personalizzati, è opensource cos altro volete? EntityManager E l oggetto che permette, lato Client, di accedere ai dati e crearne una cache Breeze si crea una sua struttura di Metadati, un file json che ricava con l Action Metadata nel controller che si crea, per poter navigare all interno della struttura dei dati che preleva Tipicamente si recuperano i dati da un database, o da un qualsiasi servizio di persistenza remoto, tramite una query eseguita con EntityManager; si presentano questi dati all utente tramite i meccanismi messi a disposizione dalle View, KnockouJS è uno di questi; si abilita la possibilità di manipolare questi dati con tutte le operazioni CRUD possibili e periodicamente si salvano le modifiche in sospeso con una sola transizione verso il database. EntityManager è sia un gateway per il servizio di persistenza dei dati che una cache delle entità su cui si intende lavorare lato Client. Gli oggetti interrogati e salvati sono entità mantenute nella Cache di EntityManager; queste entità possono entrare nel nostro EntityManager a seguito di una query, oppure a seguito di un operazione di inserimento lato client, o da un altro EntityManager della nostra App.

11 Queste entità liberano la cache, escono dal nostro EntityManager a seguito di un intervento da parte nostra, oppure perché contrassegnate come cancellate dopo un operazione di persistenza dei dati. La cache di EntityManager è interrogabile allo stesso modo in cui si interrogano i dati sul server remoto, con la sola unica grande differenza che è locale, quindi nessun round-trip Client-Server! Entity Un entità rappresenta un oggetto significativo nel modello della nostra applicazione. Potrebbe trattarsi di semplici dati, di relazioni fra entità (Cliente e relativi Ordini), di regole (una proprietà richiesta per convalidare il dato). Un entità in Breeze è un oggetto con le proprietà dei dati e le proprietà di navigazione che restituiscono entità correlate. Oltre alle normali proprietà relative ai dati, stringhe numeri, valori in genere, sono presente proprietà di navigazione fra le entità correlate nella cache di EntityManager. L esempio classico è costituito dall anagrafica Cliente con i relativi Ordini. Un entità Breeze è costituita anche da un suo kernel, una entity-ness, che rappresenta il suo entityaspect che serve al motore di Breeze per gestire l entità stessa. E possibile intervenire su questo kernel e influenzare il comportamento di Breeze nel manipolare l Entity stessa (a vostro rischio e pericolo). L aspetto più importante di una Entity è il suo EntityState. Questa proprietà indica se si tratta di un nuovo oggetto che è stato aggiunto, oppure se si tratta di un oggetto già presente ma che è stato modificato. E possibile esaminare i valori originali di un oggetto preesistente e ripristinare l entità al suo stato originale chiamando l istruzione entityaspect.rejectchanges(). Data Binding Breeze si basa principalmente sulle proprietà di Binding per intercettare le modifiche apportare lato client alle entità, il che significa che le proprietà che si vogliono trattare devono essere di tipo observable. Le proprietà in Breeze ovviamente lo sono. In ambito.net, lo sappiamo, questo meccanismo è garantito dall evento PropertyChanged, ma in JavaScript non vi è alcun meccanismo standard che implementi questa funzionalità. Ogni framework adotta la propria implementazione (KnockuotJS, AngularJS, BackboneJS, etc.). Breeze è in grado di lavorare con tutti questi framework, lasciando a noi la libertà di scegliere quello che più ci aggrada.

12 Query E possibile recuperare i dati da un server remoto componendo una query nella sintassi indicata da Breeze ed eseguendola attraverso un oggetto EntityManager var query = breeze.entityquery().from("coaches").where("name", "startswith", "A").orderBy("Name"); var manager = new breeze.entitymanager(servicename); manager.executequery(query).then(querysucceeded).fail(queryfailed); La prima cosa che possiamo notare è che si tratta di una chiamata asincrona, il metodo executequery restituisce una promise e invoca il metodo querysucceded nel caso l operazione vada a buon fine, oppure il metodo queryfailed in caso contrario. Breeze risolve questa query dentro con una richiesta HTTP GET, tipicamente si tratta di un servizio WebAPI con endpoint opportunamente configurato verso il nostro servizio di persistenza dei dati (SQL Server, MongoDB,..). La sintassi O-Data della query è supportata da WebAPI, ma anche da WCF e altri servizi non necessariamente.net compatibili. Ovviamente è possibile scrivere anche query complesse, sempre sfruttando la sintassi indicata da Breeze Salvataggio dei Dati Breeze aggiunge, modifica, elimina le entity nella cache di un EntityManager, mai direttamente sulla fonte dati remota. Tutto quello che fa è modificare l EntityState di una Entity. Tutte le modifiche vengono conservate e gestite nella cache sino alla chiamata del metodo SaveChanges() del nostro EntityManager.

13 manager.savechanges().then(savesucceeded).fail(savefailed); Ancora una volta possiamo notare che si tratta di un metodo asincrono che restituisce una promise, nel modo del tutto equivalente a quanto visto in precedenza per il recupero dei dati attraverso l esecuzione di una query. Ho già detto in precedenza che Breeze è in grado di persistere dati di una singola entità, o un batch di più entità fra loro relazionate, tutto in un unica transizione, consentendo un notevole risparmio di tempo ed un inutile round trip. Metadata Il Metadata di Breeze descrive i tipi di entità, e le relative relazioni fra di esse, in un modello di dati. Breeze necessita di questi metadati per comunicare con il servizio di persistenza durante l esecuzione di query. Si tratta di un insieme di informazioni che Breeze richiede autonomamente al server e che vengono restituite in formato json puro. Grazie a questi metadati creare un nuovo oggetto all interno di un entità diventa un operazione estremamente semplice con Breeze var newcoach = manager.createentity('coach', {CoachName='New Hero');

14 Promise Vs Callback Chiunque abbia scritto un minimo di codice JavaScript avrà scritto qualcosa di simile function getarticoli(callback, errorback){ $.ajax({ ); url: "/mywebapp/allspares.json", datatype: "json", success: function(data) {, // Sfrutto la callback per gestire la risposta della chiamamta ajax if (data.spares) { // OK: Abbiamo recuperato i dati, quindi possiamo invocare la callback if (typeof callback == "function" { callback(data.spares); else if (typeof errorback == "function") { errorback(new Error("Nessun Articolo Trovato"); error: function(jqxhr, textstatus, errorthrown) if (typeof errorback == "function") { errorback(errorthrown); La funzione getarticoli() dell esempio non ritorna nessun valore. L uso delle callback ci obbliga a scrivere codice strettamente accoppiato; dobbiamo conoscere esattamente dove inserire la chiamata alla callback per sortire l effetto desiderato e questo ci preclude la strada al riutilizzo del codice che stiamo scrivendo, cosa che a noi programmatori sfaticati e pigri non piace affatto! Per nostra fortuna le nuove librerie JavaScript ci offrono un alternativa alle callback, ovvero le promise, una promessa.

15 Una promise è un oggetto che rappresenta il valore di un azione asincrona, una cambiale per informazioni. Lo strumento messo a disposizione da jquery per implementare il meccanismo delle promise è l oggetto Deferred. L esempio riportato sopra, con l uso delle promise diventa function getarticoli(){ // Creo un'istanza dell'oggetto Deferred var deferred = new $.Deferred(); // Non faccio altro che invocare la mia funzione tramite Ajax... esattamente come prima $.ajax({ url: "/mywebapp/allspares.json", datatype: "json", success: function(data) { if (data.spares) { deferred.resolve(data.spares); else { deferred.reject(new Error("Nessun Articolo Trovato"));, error: function(jqxhr, textstatus, errorthrown) { deferred.reject(errorthrown); ); // Restituisco la promessa che rappresenta l'anagrafica articoli return deferred.promise(); La differenza fondamentale rispetto al primo approccio è la presenza di un valore di ritorno, cosa assolutamente non prevista nella versione basata sulle callback.

16 L oggetto che viene restituito è la cambiale, ovvero la promessa che il nostro utente potrà utilizzare per ottenere le informazioni che appunto gli abbiamo promesso, non appena queste saranno disponibili. La Deferred è il meccanismo con cui gestisco la promessa; posso creare una promessa che poi restituisco al mio utente, proprio come se lavorassi in maniera asincrona. Sarà l utente, avendo ora a disposizione questo oggetto, a collegare ad esso una callback per accedere ai valori richiesti: getarticoli().then (function (spare) { for (var i = 0, l = spares.length, i <l, i + +) { //... code code code and code more ); Si potrebbe obiettare dicendo che alla fine è ancora una callback quella che mi serve. Certamente! Ma a invocare e consumare la callback ora è il codice che ha invocato il tutto, la mia funzione non è assolutamente accoppiata con esso; in questo modo abbiamo astratto la funzione di estrazione articoli e possiamo riutilizzarla ognivolta che ci tornerà comodo, decidendo di volta in volta quale funzione attaccare tramite callback. La libreria che ci permette di gestire le promise è Q.js

17 Function Modules in RequireJS La caratteristica principale di RequireJS è la possibilità di definire un modulo come funzione. Se in un primo momento questo può sembrare una caratteristica piuttosto semplice, come in effetti lo è, ci sono alcuni aspetti pratici in cui tornare una funzione come modulo può rivelarsi piuttosto utile. L implementazione di una funzione come modulo è piuttosto semplice // random.js define(function(){ ); return function(min, max){ return Math.floor((Math.random()*max)+min); Dopo di che il modulo può essere richiamato nel modo seguente: require(['random'], function(random){ console.log(random(1,10)): ); Un modulo può essere utilizzato come mezzo conveniente per creare uno specifico tipo di oggetto su una entità in base a determinate condizioni. Prendiamo questo semplice esempio che, dato uno specifico ruolo, restituisce un implementazione corrispondente della View // app/views/editors/editorfactory.js define(function(require){ var editors = { 'admin' : require('editors/admineditorview'), 'user' : require('editors/usereditorview'), 'guest' : require('editors/guesteditorview'), // additional implementations... ; return function(role){ try {

18 ); return new editors[role]; catch(error) { throw new Error('Unknown Role Specified.'); Il ViewModels può semplicemente invocare il modulo per recuperare l appropriata implementazione della View in base al ruolo specificato define(function(require){ var factory = require('editors/editorfactory'); return Backbone.View.extend({ render: function(){ //... view rendering this.editor = factory(this.model.get('role')); this.editor.render(); ); ); La definizione di funzioni come modulo semplifica notevolmente l implementazione del codice, consentendo una scrittura del codice più semplice, facilmente testabile e manutenibile.

19 Fonti

Progettazione di Sistemi Interattivi. Gli strati e la rete. Struttura e supporti all implementazione di applicazioni in rete (cenni)

Progettazione di Sistemi Interattivi. Gli strati e la rete. Struttura e supporti all implementazione di applicazioni in rete (cenni) Progettazione di Sistemi Interattivi Struttura e supporti all implementazione di applicazioni in rete (cenni) Docente: Daniela Fogli Gli strati e la rete Stratificazione da un altro punto di vista: i calcolatori

Dettagli

Ajax. Introdotta da Microsoft nel 1998 è stata standardizzata e adottata da tutti i browser moderni.

Ajax. Introdotta da Microsoft nel 1998 è stata standardizzata e adottata da tutti i browser moderni. Ajax AJAX (Asynchronous JavaScript And XML) è una tecnica fondamentale per la creazione di siti e applicazioni web ad alta interattività, che consente di evitare di ricaricare intere pagine ad ogni richiesta

Dettagli

Breve introduzione allo sviluppo WEB. a cura di Ciro Attanasio - ciro.attanasio@email.cz

Breve introduzione allo sviluppo WEB. a cura di Ciro Attanasio - ciro.attanasio@email.cz Breve introduzione allo sviluppo WEB a cura di Ciro Attanasio - ciro.attanasio@email.cz Partiamo (1 di 1) Come funziona il WEB e quali tecnologie lo compongono Cos è un Client (1 di 2) Un client, in informatica,

Dettagli

SWIM v2 Design Document

SWIM v2 Design Document PROGETTO DI INGEGNERIA DEL SOFTWARE 2 SWIM v2 DD Design Document Matteo Danelli Daniel Cantoni 22 Dicembre 2012 1 Indice Progettazione concettuale Modello ER Entità e relazioni nel dettaglio User Feedback

Dettagli

MODEL-VIEW-CONTROLLER PROBLEMA

MODEL-VIEW-CONTROLLER PROBLEMA MODEL VIEW CONTROLLER DESIGN PATTERN MODEL-VIEW-CONTROLLER INGEGNERIA DEL SOFTWARE Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2013 2014 rcardin@math.unipd.it

Dettagli

Introduzione ad AJAX

Introduzione ad AJAX Introduzione ad AJAX Asynchronous Javascript And XML (PWLS 6.9, 6.10) Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 1 Limitazioni delle applicazioni web tradizionali

Dettagli

CakePHP - 101 Creare un'applicazione con CakePHP. massimoi@impronta48.it http://impronta48.it

CakePHP - 101 Creare un'applicazione con CakePHP. massimoi@impronta48.it http://impronta48.it CakePHP - 101 Creare un'applicazione con CakePHP massimoi@impronta48.it http://impronta48.it Come Installare cakephp 1.3.x 1) Mi collego a https://github.com/cakephp/cakephp/archives/1.3 2) Salvo il file

Dettagli

Flavio De Paoli depaoli@disco.unimib.it

Flavio De Paoli depaoli@disco.unimib.it Flavio De Paoli depaoli@disco.unimib.it 1 Il web come architettura di riferimento Architettura di una applicazione web Tecnologie lato server: Script (PHP, Pyton, Perl), Servlet/JSP, ASP Tecnologie lato

Dettagli

Sviluppo di applicazioni web con il pattern Model-View-Controller. Gabriele Pellegrinetti

Sviluppo di applicazioni web con il pattern Model-View-Controller. Gabriele Pellegrinetti Sviluppo di applicazioni web con il pattern Model-View-Controller Gabriele Pellegrinetti 2 MVC: come funziona e quali sono vantaggi che derivano dal suo utilizzo? La grande diffusione della tecnologia

Dettagli

Port Community System del Porto di Ravenna CONFIGURAZIONE

Port Community System del Porto di Ravenna CONFIGURAZIONE Port Community System del Porto di Ravenna CONFIGURAZIONE SOMMARIO Indicazioni generali... 3 Dipendenze software... 4 Lato server... 4 Lato client... 4 Organizzazione del sistema... 5 Struttura delle directory...

Dettagli

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0 AJAX Goy - a.a. 2006/2007 Servizi Web 1 Cos'è il Web 2.0 Web 2.0 = termine introdotto per la prima volta nel 2004 come titolo di una conferenza promossa dalla casa editrice O Reilly L'idea è che ci si

Dettagli

Corso su LINQ Lezione 16. Introduzione

Corso su LINQ Lezione 16. Introduzione LINQ to SQL Introduzione Con questa lezione introduciamo il flavor LINQ to SQL. Dopo aver visto quindi tutte le funzionalità e gli operatori di LINQ to Object, affronteremo ora la tematica riguardante

Dettagli

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER L architettura CLIENT SERVER è l architettura standard dei sistemi di rete, dove i computer detti SERVER forniscono servizi, e computer detti CLIENT, richiedono

Dettagli

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo

Dettagli

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer Tecnologie per il Web Il web: architettura e tecnologie principali Una analisi delle principali tecnologie per il web Tecnologie di base http, ssl, browser, server, firewall e proxy Tecnologie lato client

Dettagli

Corso di Informatica Modulo T3 B1 Programmazione web

Corso di Informatica Modulo T3 B1 Programmazione web Corso di Informatica Modulo T3 B1 Programmazione web 1 Prerequisiti Architettura client/server Elementi del linguaggio HTML web server SQL server Concetti generali sulle basi di dati 2 1 Introduzione Lo

Dettagli

Tecnologie e Programmazione Web

Tecnologie e Programmazione Web Presentazione 1 Tecnologie e Programmazione Web Html, JavaScript e PHP RgLUG Ragusa Linux Users Group SOftware LIbero RAgusa http://www.solira.org - Nunzio Brugaletta (ennebi) - Reti 2 Scopi di una rete

Dettagli

Corso Android Corso Online Sviluppo su Cellulari con Android

Corso Android Corso Online Sviluppo su Cellulari con Android Corso Android Corso Online Sviluppo su Cellulari con Android Accademia Futuro info@accademiafuturo.it Programma Generale del Corso di Sviluppo su Cellulari con Android Programma Base Modulo Uno - Programmazione

Dettagli

DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18.

DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18. PERIODO : DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18.00 A CHI E RIVOLTO IL CORSO Questo progetto si rivolge a tutti

Dettagli

Corso Analista Programmatore Java Corso Online Analista Programmatore Java

Corso Analista Programmatore Java Corso Online Analista Programmatore Java Corso Analista Programmatore Java Corso Online Analista Programmatore Java Accademia Futuro info@accademiafuturo.it Programma Generale del Corso Analista Programmatore Java Tematiche Trattate Modulo Uno

Dettagli

Questo punto richiederebbe uno sviluppo molto articolato che però a mio avviso va al di là delle possibilità fornite al candidato dal tempo a disposizione. Mi limiterò quindi ad indicare dei criteri di

Dettagli

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER PROGRAMMA DEL CORSO MASTER WEB DEVELOPER Il corso Master Web Developer con Certificazione internazionale Adobe Dreamweaver prepara lo studente a entrare nel mondo dello sviluppo Web (blog, siti, portali).

Dettagli

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database Corso di Informatica Modulo T3 B3 Programmazione lato server 1 Prerequisiti Architettura client/server Conoscenze generali sui database 2 1 Introduzione Lo scopo di questa Unità è descrivere gli strumenti

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

Design Patterns. Sommario. Architettura a 3 Livelli Concetti Generali Presentazione Dominio Sorgente Dati DIB 1. Design Patterns DIB 2

Design Patterns. Sommario. Architettura a 3 Livelli Concetti Generali Presentazione Dominio Sorgente Dati DIB 1. Design Patterns DIB 2 DIB 1 Sommario Architettura a 3 Livelli Concetti Generali Presentazione Dominio Sorgente Dati DIB 2 Architettura a 3 Livelli DIB 3 Architettura a 3 Livelli Presentazione Gestione dell interazione degli

Dettagli

Una soluzione WEB-GIS per la pubblicazione di dati statistici della Regione Sardegna

Una soluzione WEB-GIS per la pubblicazione di dati statistici della Regione Sardegna Una soluzione WEB-GIS per la pubblicazione di dati statistici della Regione Sardegna Sergio Loddo, Luca Devola GFOSS - Cagliari, 27 febbraio 2009 Indice 1. Presentazione 2. Progetto 3. Architettura, metodologia

Dettagli

Corso di Applicazioni Telematiche

Corso di Applicazioni Telematiche Asynchronous JavaScript Technology and XML: Ajax Corso di Applicazioni Telematiche A.A. 2010-11 Prof. Simon Pietro Romano Università degli Studi di Napoli Federico II Facoltà di Ingegneria Rich Internet

Dettagli

Corso analista programmatore Java. Corso analista programmatore Java Programma

Corso analista programmatore Java. Corso analista programmatore Java Programma Corso analista programmatore Java Programma 1.1 Obiettivo e modalità di fruizione L obiettivo del corso è di fornire le conoscenze tecniche e metodologiche per svolgere la professione di Programmatore

Dettagli

Guida pratica all utilizzo di Zeroshell

Guida pratica all utilizzo di Zeroshell Guida pratica all utilizzo di Zeroshell Il sistema operativo multifunzionale creato da Fulvio.Ricciardi@zeroshell.net www.zeroshell.net Proteggere una piccola rete con stile ( Autore: cristiancolombini@libero.it

Dettagli

Framework di Middleware. per Architetture Enterprise

Framework di Middleware. per Architetture Enterprise Framework di Middleware per Architetture Enterprise Corso di Ingegneria del Software A.A.2011-2012 Un po di storia 1998: Sun Microsystem comprende l importanza del World Wide Web come possibile interfaccia

Dettagli

JUG Ancona Italy. Andrea Del Bene. Jug Marche

JUG Ancona Italy. Andrea Del Bene. Jug Marche JUG Ancona Italy SpringMVC AndreaDelBene JugMarche Cos'èSpringMVC? Spring MVC è il sotto-framework di Spring che permetti di servirsi del Framework Spring per realizzare applicazioni web. Possiamo quindi

Dettagli

RenderCAD S.r.l. Formazione

RenderCAD S.r.l. Formazione Corso Descrizione La durata di questo corso è complessivamente di ore 150 di cui 85 ore di teoria, 35 ore di pratica e 30 ore di stage in azienda. Nel nostro territorio esiste una richiesta di tale figura,

Dettagli

Componenti Web: client-side e server-side

Componenti Web: client-side e server-side Componenti Web: client-side e server-side side Attività di applicazioni web Applicazioni web: un insieme di componenti che interagiscono attraverso una rete (geografica) Sono applicazioni distribuite logicamente

Dettagli

Internet Architettura del www

Internet Architettura del www Internet Architettura del www Internet è una rete di computer. Il World Wide Web è l insieme di servizi che si basa sull architettura di internet. In una rete, ogni nodo (detto host) è connesso a tutti

Dettagli

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web parte 1 Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web (1) Modello a tre livelli in cui le interazioni tra livello presentazione e livello applicazione sono mediate

Dettagli

INTRODUZIONE AI PRINCIPI DELLO SVILUPPO DI APPLICAZIONI WEB INTERATTIVE

INTRODUZIONE AI PRINCIPI DELLO SVILUPPO DI APPLICAZIONI WEB INTERATTIVE INTRODUZIONE AI PRINCIPI DELLO SVILUPPO DI APPLICAZIONI WEB INTERATTIVE ( I.D. Falconi ~ 21.12.2013) INTRODUZIONE AD AJAX Le caratteristiche di una applicazione Ajax sono sostanzialmente due: aggiornare

Dettagli

OSSIF WEB. Manuale query builder

OSSIF WEB. Manuale query builder OSSIF WEB Manuale query builder - Maggio 2010 1) Sommario 1) SOMMARIO... 2 INTRODUZIONE... 3 Scopo del documento... 3 Struttura del documento... 3 Descrizione dell interfaccia grafica... 3 SELEZIONE DI

Dettagli

Nicolò Carandini HTTP, Web Services e RestSharp (II parte) 1

Nicolò Carandini HTTP, Web Services e RestSharp (II parte) 1 Nicolò Carandini HTTP, Web Services e RestSharp (II parte) 1 HTTP, Web Services e RestSharp Dopo aver descritto nella prima parte di quest articolo 1 le basi su cui poggia la comunicazione nel Word Wide

Dettagli

Mobile & Technology. Area di formazione. Corso ios base. Corso ios avanzato. Il mondo delle App: idee, creatività, business.

Mobile & Technology. Area di formazione. Corso ios base. Corso ios avanzato. Il mondo delle App: idee, creatività, business. Area di formazione Mobile & Technology 01 02 03 04 05 Corso ios base Corso ios avanzato Il mondo delle App: idee, creatività, business Progetto App AngularJS - Up and running 01 Corso ios base Ore: 24

Dettagli

Programmabilità di rete con l'infrastruttura Cisco basata sulle applicazioni

Programmabilità di rete con l'infrastruttura Cisco basata sulle applicazioni White paper Programmabilità di rete con l'infrastruttura Cisco basata sulle applicazioni Panoramica Questo documento analizza il supporto alla programmabilità nell'infrastruttura ACI (Application Centric

Dettagli

Ministero dell Istruzione dell Università e della Ricerca M070 ESAME DI STATO DI ISTITUTO TECNICO INDUSTRIALE

Ministero dell Istruzione dell Università e della Ricerca M070 ESAME DI STATO DI ISTITUTO TECNICO INDUSTRIALE Pag. 1/1 Sessione ordinaria 2010 Seconda prova scritta Ministero dell Istruzione dell Università e della Ricerca M070 ESAME DI STATO DI ISTITUTO TECNICO INDUSTRIALE CORSO DI ORDINAMENTO Indirizzo: INFORMATICA

Dettagli

SVN server, per Florim, è installato su server di test, anche se la sua configurazione può avvenire in qualsiasi ambiente.

SVN server, per Florim, è installato su server di test, anche se la sua configurazione può avvenire in qualsiasi ambiente. Siti FLORIM SVN Subversion Il sistema di versioning viene illustrato nell immagine seguente: Sistema locale dello sviluppatore, si parla di working copy ( copia dei file dal server in produzione) SVN server,

Dettagli

PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso (@riccardotasso)

PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso (@riccardotasso) PER RINNOVARE IL SITO DEL JUG TRENTO Riccardo Tasso (@riccardotasso) ANGULARJS lightweight framework 100% javascript supporto per i browser moderni (> IE 8) licenza MIT (permissiva) (by Google) ANGULARJS

Dettagli

Attacchi alle applicazioni web: SQL injection e Cross-site scripting (XSS)

Attacchi alle applicazioni web: SQL injection e Cross-site scripting (XSS) UNIVERSITÀ DEGLI STUDI DI CATANIA Facoltà di Ingegneria Corso di laurea Specialistica in Ingegneria Informatica Tesina di Sicurezza nei Sistemi informativi Simona Ullo Attacchi alle applicazioni web: SQL

Dettagli

Corso Programmazione Java Android. Programma

Corso Programmazione Java Android. Programma Corso Programmazione Java Android Programma 1.1 Obiettivo e modalità di fruizione L obiettivo del corso è di fornire le conoscenze tecniche e metodologiche per svolgere la professione di Programmatore

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Reverse Engineering di Rich Internet Applications basate su AJAX

Reverse Engineering di Rich Internet Applications basate su AJAX Facoltà di Ingegneria Corso di Studi in Ingegneria Informatica tesi di laurea Reverse Engineering di Rich Internet Applications basate su AJAX Anno Accademico: 2006/2007 relatore Ch.mo prof. Anna Rita

Dettagli

Corso Android Corso Online Programmatore Android

Corso Android Corso Online Programmatore Android Corso Android Corso Online Programmatore Android Accademia Domani Via Pietro Blaserna, 101-00146 ROMA (RM) info@accademiadomani.it Programma Generale del Corso Modulo Uno - Programmazione J2ee 1) Programmazione

Dettagli

Sviluppo Applicazioni Mobile Lezione 12 JDBC. Dr. Paolo Casoto, Ph.D - 2012

Sviluppo Applicazioni Mobile Lezione 12 JDBC. Dr. Paolo Casoto, Ph.D - 2012 + Sviluppo Applicazioni Mobile Lezione 12 JDBC + Cosa vediamo nella lezione di oggi Oggi analizzeremo insieme una specifica tecnologia Java per l accesso e la manipolazione di basi di dati relazionali

Dettagli

*** QUESTO DOCUMENTO E' INCOMPLETO ED IN FASE AMPLIAMENTO CONTINUO. ***

*** QUESTO DOCUMENTO E' INCOMPLETO ED IN FASE AMPLIAMENTO CONTINUO. *** *** QUESTO DOCUMENTO E' INCOMPLETO ED IN FASE AMPLIAMENTO CONTINUO. *** PREFAZIONE Questo progetto nasce perchè mi sono reso conto dell'importanza che i motori di ricerca hanno su Internet. Internet rappresenta

Dettagli

Guida Utente della PddConsole. Guida Utente della PddConsole

Guida Utente della PddConsole. Guida Utente della PddConsole Guida Utente della PddConsole i Guida Utente della PddConsole Guida Utente della PddConsole ii Copyright 2005-2014 Link.it srl Guida Utente della PddConsole iii Indice 1 Introduzione 1 2 Prerequisiti per

Dettagli

Programmazione Java Avanzata

Programmazione Java Avanzata Programmazione Java Avanzata Accesso ai Dati Ing. Giuseppe D'Aquì Testi Consigliati Eclipse In Action Core J2EE Patterns - DAO [http://java.sun.com/blueprints/corej2eepatterns/patterns/dataaccessobject.html]

Dettagli

Lezione di Basi di Dati 1 18/11/2008 - TECNOLOGIE PER IL WEB: CGI - AJAX SERVLETS & JSP

Lezione di Basi di Dati 1 18/11/2008 - TECNOLOGIE PER IL WEB: CGI - AJAX SERVLETS & JSP EVOLUZIONE DEL WEB: PAGINE STATICHE vs PAGINE DINAMICHE Il Web è nato a supporto dei fisici, perché potessero scambiare tra loro le informazioni inerenti le loro sperimentazioni. L HTTP è nato inizialmente

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag