Workshop Ideare e creare Web Applications, Introduzione ad AngularJSGiovanni Buffa
Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS:
- Metodologie innovative di ideazione e creazione di Web Applications;
- Sfide e problemi del lavoro in team;
- Introduzione ad AngularJS e alle sue componenti principali;
- Dimostrazione pratica di una WebApp
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSGiovanni Buffa
Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS:
- Metodologie innovative di ideazione e creazione di Web Applications;
- Sfide e problemi del lavoro in team;
- Introduzione ad AngularJS e alle sue componenti principali;
- Dimostrazione pratica di una WebApp
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Codemotion
Matteo Ronchi e Fabio Biondi ci spiegano come padroneggiare le tecniche per creare componenti ed architetture avanzate in AngularJS.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Per info sul Bootcamp AngularJS Advanced Class clicca qui: https://goo.gl/NHbv9D
Scrivici a training@codemotion.it
Tw: @codemotionTR
A prima vista, MVC “is all about the presentation layer”. In realtà, per trarre il massimo giovamento da questo toolkit è necessario progettare l’intera soluzione utilizzando criteri ad hoc.
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
by Davide Cerbo e Stefano Linguerri
La programmazione web sta facendo passi da gigante e oggi l’utente si aspetta che l’esperienza di utilizzo si avvicini sempre di più a quella a cui è abituato nei classici applicativi desktop. Il mondo degli sviluppatori ha risposto inventanto una nuova sigla: RIA, cioè Rich Internet Application. Google non è stata a guardare e ha fornito la sua risposta a questa esigenza donando alla community Google Web Toolkit. Questo nuovo framework permette di sviluppare in Java tutta l’interfaccia utente per poi ottenere un codice javascript che funzionerà su qualsiasi browser web senza l’installazione di plugin aggiuntivi. In questa presentazione vedremo:
* perchè sviluppare applicazioni RIA
* perchè usare GWT
* come GWT utilizza AJAX per comunicare con il server
* le ottimizzazione che avremo utilizzando GWT
* come uscire dal browser con Google Gear e Mozilla Prism
* e non solo…
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Codemotion
Matteo Ronchi e Fabio Biondi ci spiegano come padroneggiare le tecniche per creare componenti ed architetture avanzate in AngularJS.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Per info sul Bootcamp AngularJS Advanced Class clicca qui: https://goo.gl/NHbv9D
Scrivici a training@codemotion.it
Tw: @codemotionTR
A prima vista, MVC “is all about the presentation layer”. In realtà, per trarre il massimo giovamento da questo toolkit è necessario progettare l’intera soluzione utilizzando criteri ad hoc.
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
by Davide Cerbo e Stefano Linguerri
La programmazione web sta facendo passi da gigante e oggi l’utente si aspetta che l’esperienza di utilizzo si avvicini sempre di più a quella a cui è abituato nei classici applicativi desktop. Il mondo degli sviluppatori ha risposto inventanto una nuova sigla: RIA, cioè Rich Internet Application. Google non è stata a guardare e ha fornito la sua risposta a questa esigenza donando alla community Google Web Toolkit. Questo nuovo framework permette di sviluppare in Java tutta l’interfaccia utente per poi ottenere un codice javascript che funzionerà su qualsiasi browser web senza l’installazione di plugin aggiuntivi. In questa presentazione vedremo:
* perchè sviluppare applicazioni RIA
* perchè usare GWT
* come GWT utilizza AJAX per comunicare con il server
* le ottimizzazione che avremo utilizzando GWT
* come uscire dal browser con Google Gear e Mozilla Prism
* e non solo…
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
Programmazione web libera dai frameworkFrancesca1980
Un nuovo progetto web parte quasi sempre con la domanda "che framework usiamo?" Diamo per scontato che non si possa sviluppare per il web senza fare uso di framework. Ma che succederebbe se decidessimo di sviluppare senza framework? Potremmo ottenere maggiore controllo e qualità, meno rischi e meno costi. Serve "solo" la volontà di imparare a programmare bene. Darò alcune dritte con Java e TDD.
Node.js REST interface for MongoDB, we modified mongodb-rest (https://github.com/tdegrunt/mongodb-rest) to manage more operation:
counting elements
"distinct" operations
excel/csv export
list of available db collection
list of keys of a specific query
Multithreading support
It's now also possible to search by date range and are managed sort operations.
Coding a php ajax json application to connect a mysql db.
Sviluppare una applicazione web con php e json per accedere ad un db mysql. L'anticamera per poi realizzare app gestionali.
MongoDB User Group Padova - Overviews iniziale su MongoDBStefano Dindo
MongoDB è un database non relazionale, orientato ai documenti. Classificato come un database di tipo NoSQL, MongoDB si allontana dalla struttura tradizionale basata su tabelle dei database relazionali in favore di documenti in stile JSON con schema dinamico (MongoDB chiama il formato BSON), rendendo l'integrazione di dati di alcuni tipi di applicazioni più facile e veloce.
Lo scopo del MongoDB User Group Padova è quello di condividere esperienze sulla tecnologia MongoDB.
Questa presentazione, usata durante il primo evento dello User Group, è stata usata per introdurre i partecipanti sulle procedure di installazione ed i concetti di base su MongoDB.
2. Intro
● AngularJS web apps sono interamente client-side
applications!
● Senza un back end saremmo limitati a mostrare e
utilizzare solo le info presenti a load time.
● Angularjs fornisce servizi per la comunicazione con il
server:
o $http;
o $resource;
● Ci sono inoltre servizi di terze parti:
o restangular
3. $http
$http è un servizio che facilita la comunicazione con il
server via
● XMLHttpRequest;
● JSONP.
E’ un wrapper del XMLHttpRequest object.
4. $http
// Simple GET request example
$http({
method: 'GET',
url: '/api/users'
})
.success(function(data, status, headers, config)
{
// this callback will be called
asynchronously when the response is available
})
.error(function(data, status, headers, config) {
// called asynchronously if an error
occurs or server returns response with an error
status
});
// Simple GET request example
$http({
method: 'GET',
url: '/api/users'
})
.then(function(resp) {
// resp is response object
}, function(resp){
// resp with error
});
5. $http - Shortcut Methods
● get
o $http.get('/someUrl', config)
● post
o $http.post('/someUrl', someObject, config)
● delete
o $http.delete('/someUrl', config)
● ...
7. $http - Cache
Di default il servizio $http non usa la cache.
E’ possibile impostare la cache per
● request
o $http.get('/api/getUser’, {cache: true})
● per applicazione
o .config(function($httpProvider, $cacheFactory) {
$httpProvider.defaults.cache = true
}
Default cache: $cacheFactory
9. Web App sempre più RESTful
● L’approccio REST è venuto alla ribalta negli ultimi anni
ed è attualmente molto usato
● RESTful VS. SOAP - REST propone una visione del
Web incentrata sul concetto di risorsa mentre i SOAP
Web Service mettono in risalto il concetto di servizio.
● Angularjs propone il servizio $resource
10. RESTful
● Apparso la prima volta nel 2000 nella tesi di Roy
Fielding
● Definisce una serie di principi:
o Identificazione delle risorse
o Utilizzo esplicito dei metodi HTTP
o Risorse autodescrittive
o Collegamenti tra risorse
o Comunicazione senza stato
● Il WWW è un esempio concreto di questi principi
11. Servizi RESTful
● In una architettura REST è definita una mappatura uno ad uno tra
le tipiche operazioni CRUD e i metodi http
o POST - Create
o GET - Read
o PUT - Update
o DELETE - Delete
● Un oggetto è identificabile univocamente attraverso una URI
● Nessun vincolo sulle modalità di rappresentazione di una risorsa
● Diversi formati di rappresentazione: XML, JSON, HTML, … .
12. $resource
$resource è una factory che incapsula i servizi $http e
aggiunge supporto per l’interazione con i servizi RESTful
server-side
Richiede
● L’importazione della lib angular-resource.js
● La definizione della dipendenza dal modulo ngResource
o angular.module('myApp', ['ngResource']);
13. $resource
Sintassi
$resource(url, [paramDefaults], [actions], options);
Dove:
● url può essere parametrizzato mediante il simbolo : Es:
https://api.mongolab.com/api/1/databases/angworkshop/collections/contat
to/:id
● actions è un hash che permette di indicare comportamenti custom che estendono le action di
default di resource.
{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}
14. $resource - [actions]
● action – {string} – Nome dell’azione
● method – {string} – Case insensitive HTTP method (e.g. GET, POST, PUT, DELETE, JSONP,
etc).
● params – {Object} – Set opzionale di parametri..
● isArray – {boolean} – True se il result è un array
● ...
{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}
17. $resource - Cache
Analoga alla cache $http. Può assumere i valori:
● false/true - $cacheFactory
● custom cache
18. Restangular
Libreria esterna.
Si propone di rendere ancora più semplice la
comunicazione con il mondo esterno.
Richiede
● L’importazione della lib restangular.js
● La definizione della dipendenza dal modulo restangular
o angular.module('myApp', ['restangular']);
19. Perché Restangular
The idea is that Restangular can also handle all of your URLs, so that you don't have to know anything about them.
Suppose that you have something like this for cars : /users/123/cars/456
In $resource, You'd have to construct that URL manually and you'd also have to construct the $resource object for this manually.
Restangular helps you in this by "remembering" the URLs.
So if you do in some place
Restangular.one("users", 123).get()
.then(function(user) {
$scope.user = user;
});
// Some other code //Automatically does the request to
/users/123/cars as it remembers in which object you're asking it.
$scope.user.getList('cars')
Martin Gontovnikas www.stackoverflow.com
21. Approfondimenti: promise
// Callback example
asyncCall(function(err, data1){
if(err) return callback(err);
anotherAsyncCall(function(err2, data2){
if(err2) return calllback(err2);
oneMoreAsyncCall(function(err3, data3){
if(err3) return callback(err3);
// and so on
});
});
});
Problemi callback:
● una scarsa leggibilità del
codice
● difficoltà di composizione delle
callback
● difficoltà di gestione degli errori
e di debug
22. Approfondimenti: promise
Sono oggetti che rappresentano il risultato di una chiamata di funzione
asincrona.
Stato:
● pending è lo stato in cui non è stato ancora ottenuto il risultato della
chiamata asincrona
● resolved in questo stato la chiamata asincrona ha prodotto un risultato
23. Approfondimenti: promise
// promise example
asyncCall()
.then(function(data1){
// do something...
return anotherAsyncCall();
})
.then(function(data2){
// do something...
return oneMoreAsyncCall();
}).fail(function(err) {
// handle any error resulting from any of the above
calls
})
.done();
Non nativamente supportate da
javascript
Bisogna utilizzare la libreria “Q”
Vantaggi:
● codice più leggibile
24. Approfondimenti: XMLHttpRequest
● Insieme di API Javascript disegnato da Microsoft e
adottato da Google, Apple e Mozilla
● Consentono di scambiare dati con il server senza dover
ricaricare l’intera pagina
● A discapito del nome può essere usato per recuperare
diversi formati di file (es. JSON)
25. Approfondimenti: JSON
Acronimo di JavaScript Object Notation, è un formato
adatto all'interscambio di dati fra applicazioni client-server
// JSON example
{name1: value, name2: [{nameAr1: value}, {nameAr2:value}]}
26. Approfondimenti: JSONP
Same-domain-policy impedisce a script scaricati dalla rete di
accedere, tramite qualsiasi tipo di richiesta HTTP, a risorse che
si trovano su server diversi rispetto a quello iniziale che ha
inviato lo script.
JSONP Acronimo di JavaScript Object Notation with Padding è
una tecnica che permette di ovviare a questa limitazione
permettendo a un browser di accedere, ovviamente con alcuni
limiti, a risorse remote indipendentemente dall’host di origine.
27. Approfondimenti: Service, Factory e Provider
● I tre servizi sono in realtà un unico servizio: provider
● factory e service sono implementazioni differenti di
provider
● vengono registrati come singleton all'interno
dell'applicazione AngularJS
28. Service
Dal punto di vista sintattico un Services restituisce un oggetto singleton che rimane in vita fino alla
chiusura del browser.
Sintassi:
mymodule.service('serviceName', function([d1,...,dn]))
dove
● function([d1,..,dn]) è il costruttore della funzione che verrà istanziata;
● e [d1,...,dn] è un array di 0 o più dipendenze.
.
29. Service - Example
La più semplice implementazione di provider, rappresenta l'istanza di una funzione creata usando
l'operatore new
angular.module(‘app', [])
.service(‘myService’, function(a){
...
}]);
Angular lo inizializza così: var myServiceSingleton = new myService();
30. Factory
Una Factory è una funzione responsabile della creazione di un nuovo Servizio.
La sintassi per definire una Factory è la seguente
mymodule.factory(“serviceID”, function([d1,...,dn]))
dove
● function([d1,...,dn]) è la funzione che angular richiamerà per creare una nuova istanza
del servizio;
● e [d1,...,dn] è un array di 0 o più dipendenze.
Un classico esempio d’uso di una Factory è per creare un nuovo servizio
che dipende da $resource.
32. Provider
Il provider è definito come un tipo custom configurabile in fase di configurazione che implementa il
metodo $get. Questo metodo altro non è che una funzione Factory.
La sintassi per definire un provider è la seguente:
mymodule.provider(“providerName”, function([d1,...,dn]))
dove
● f([d1,...,dn]) è una funzione che crea una nuova istanza di un servizio;
● e [d1,...,dn] è un array di 0 o più dipendenze.
Nel pratico una funzione Provider è utile per isolare il Service creato dal resto dell’applicazione e
consentire l’intercambiabilità di Service che implementano la stessa interfaccia o il comportamento
dello stesso in modo configurabile e trasparente per il resto dell’applicazione.
33. Provider - Example
angular.module('app',[]).provider('myProvider', function() {
var PREFIX = 'https://api.mongolab.com/api/angworkshop/collections/';
// API accessibili in fase di configurazione
this.setPrefix = function setPrefix(value) {
PREFIX = value;
};
this.$get = function myProviderFactory() {
return return {
say = function say(msg) {
return PREFIX + msg;
}
};
};});
Angular lo inizializza così var myProviderSingleton = myProvider();
Editor's Notes
La sintassi è la seguente La funzione ritorna una promise che ha due helper methods: success and error - o then
Tutti ritornano una promise e accettano dei parametri opzionali
Angular fa fronte a questa “esigenza” con $resource
NOTA: questo non vuol dire che con il service $http non è possibile interagire con servizi RESTBasta pensare che il core di $resource è $httpTuttavia $resource ne facilita l’uso essendo stato creato ad hoc
uno script scaricato dal dominio google.com potrà accedere solamente a file che rispondano a URL che inizino con google.com.