An overview of technologies and best practices for the development of a full-stack web application using JavaScript. How to realize an entire Application Server with a single programming language, the use of event-driven logic and the potential of Node.js.
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
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.
An overview of technologies and best practices for the development of a full-stack web application using JavaScript. How to realize an entire Application Server with a single programming language, the use of event-driven logic and the potential of Node.js.
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
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.
Talk di Luca Lusso | Drupal Day Roma 2011
Snellire il carico del server per generare e restituire un json da usare per un autocompletamento. Notificare che un nodo è stato appena creato a tutti gli utenti che stanno visitando il sito in questo momento. Oppure ancora mettere a disposizione degli utenti una chat in tempo reale. Tutto questo (e molto altro) si può delegare ad un processo esterno a Drupal per aumentare velocità di interazione e diminuire il carico del server.
Durante il talk si vedrà come installare e usare node.js e come integrarlo con Drupal. Verrà mostrato il modulo nodejs presente nel repository di drupal.org
Javascript avanzato: sfruttare al massimo il webRoberto Messora
Javascript è uno dei linguaggi più sottovalutati e più incompresi dell'intero panorama dei linguaggi di programmazione, eppure è anche uno dei più utilizzati.
Da una parte le molteplici e differenti declinazioni degli strumenti di navigazione web, dall'altra l'infelice scelta storica di usare il termine "script", hanno contribuito alla creazione del mito di un linguaggio poco rigoroso, al servizio di ogni sorta di trucco o pezza di codice.
La verità invece racconta di un linguaggio dinamico ad oggetti a tutti gli effetti, con caratteristiche molto interessanti, seppur con qualche difetto, ma soprattutto un linguaggio che, sull'onda di HTML5, rivestirà se possibile ancora più importanza nell'immediato futuro.
In questa sessione verranno presentati aspetti poco conosciuti, ma molto importanti, di Javascript (scoping, hoisting, closures, ecc.), verranno presentati alcuni design patterns che permettono di strutturare in maniera intelligente le nostre librerie applicative in funzione della manutenibilità e delle performance, senza tralasciare, ove possibile, uno sguardo ad alcuni framework come jQuery o KnockoutJS.
Simple Cloud API: accesso semplificato al cloud computingFrancesca1980
In questa sessione verrà presentato il progetto open source Simple Cloud API per l'accesso semplificato ai servizi di cloud computing. Il progetto, nato dalla volontà di Zend Technologies, IBM e Microsoft, offre un API semplificata per l'accesso a differenti servizi di cloud computing. I servizi attualmente implementati sono di File Storage, Document Storage e Simple Queue sui sistemi cloud di Amazon, Windows Azure e Nirvanix (in futuro anche Rackspace e GoGrid). Nella presentazione, dopo una breve introduzione ai servizi di cloud computing ed alla loro rilevanza dal punto di vista dello sviluppo delle applicazioni web, verranno presentati degli esempi in PHP per l'utilizzo del Simple Cloud API
Talk di Luca Lusso | Drupal Day Roma 2011
Snellire il carico del server per generare e restituire un json da usare per un autocompletamento. Notificare che un nodo è stato appena creato a tutti gli utenti che stanno visitando il sito in questo momento. Oppure ancora mettere a disposizione degli utenti una chat in tempo reale. Tutto questo (e molto altro) si può delegare ad un processo esterno a Drupal per aumentare velocità di interazione e diminuire il carico del server.
Durante il talk si vedrà come installare e usare node.js e come integrarlo con Drupal. Verrà mostrato il modulo nodejs presente nel repository di drupal.org
Javascript avanzato: sfruttare al massimo il webRoberto Messora
Javascript è uno dei linguaggi più sottovalutati e più incompresi dell'intero panorama dei linguaggi di programmazione, eppure è anche uno dei più utilizzati.
Da una parte le molteplici e differenti declinazioni degli strumenti di navigazione web, dall'altra l'infelice scelta storica di usare il termine "script", hanno contribuito alla creazione del mito di un linguaggio poco rigoroso, al servizio di ogni sorta di trucco o pezza di codice.
La verità invece racconta di un linguaggio dinamico ad oggetti a tutti gli effetti, con caratteristiche molto interessanti, seppur con qualche difetto, ma soprattutto un linguaggio che, sull'onda di HTML5, rivestirà se possibile ancora più importanza nell'immediato futuro.
In questa sessione verranno presentati aspetti poco conosciuti, ma molto importanti, di Javascript (scoping, hoisting, closures, ecc.), verranno presentati alcuni design patterns che permettono di strutturare in maniera intelligente le nostre librerie applicative in funzione della manutenibilità e delle performance, senza tralasciare, ove possibile, uno sguardo ad alcuni framework come jQuery o KnockoutJS.
Simple Cloud API: accesso semplificato al cloud computingFrancesca1980
In questa sessione verrà presentato il progetto open source Simple Cloud API per l'accesso semplificato ai servizi di cloud computing. Il progetto, nato dalla volontà di Zend Technologies, IBM e Microsoft, offre un API semplificata per l'accesso a differenti servizi di cloud computing. I servizi attualmente implementati sono di File Storage, Document Storage e Simple Queue sui sistemi cloud di Amazon, Windows Azure e Nirvanix (in futuro anche Rackspace e GoGrid). Nella presentazione, dopo una breve introduzione ai servizi di cloud computing ed alla loro rilevanza dal punto di vista dello sviluppo delle applicazioni web, verranno presentati degli esempi in PHP per l'utilizzo del Simple Cloud API
Twig is the template engine used by Drupal 8 and other modern PHP applications. Twig's expressiveness, consistency and secure-by-default policy are still unparalleled among PHP's template engines.
In this session you'll learn advanced techniques, tips and tricks useful for real-world applications and uncommonly used features that will allow you to master Twig.
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
The HTTP protocol was created in 1990 and led to the establishment of the World Wide Web by English physicist Tim Berners-Lee. It led to what is now the world's most used language, HTML (Hyper Text Markup Language). HTML5 is being developed as the next major revision of HTML: what is it about? What will it change?
Coding Day May 26th Un'architettura scalabile e modulare per il cssVendini-Italy
Scrivere HTML e CSS usando un approccio mantenibile e modulare puo migliorare l'efficienza del team e minimizzare, al crescere dei progetti, problemi come avere un unico file CSS monolitico con tutte le regole o l'impossibilità di riusare componenti
Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
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. JavaScript?
E’ un linguaggio di
scripting lato-client,
interpretato da un
browser web
3. A cosa serve?
Rende le nostre pagine
interattive
Rispondono alle azioni degli utenti
4. CLIENT SERVER
Quando l’elaborazione è a carico del server
5. CLIENT SERVER
Quando l’elaborazione è a carico del client
6. • Come standard nasce alla fine degli anni 90
Standardizzazione del
Microsoft linguaggio da parte
Sun Microsystem e propone 2 dell’ECMA(1)
Java linguaggi Nasce ECMAScript
Sviluppatori di alternativi
Mosaic: primo Mosaic VBScript e Adozione e
browser a fondano Netscape Jscript in riconoscimento dello
interfaccia Netscape Navigator 2.0 e Internet standard da parte
grafica Communicatio JavaScript 1.0 Explorer 3.0 dell’ISO(2)
n Corporation
1992 1994 1995 1996 1997/1998
(1) ECMA – European Computer Manufacturers Association
(2) ISO – Internation Organization for Standardization
Quando è nato?
7. • Nella pagina HTML dentro un tag <script>:
<script type=‘text/javascript’>
…
</script> 1 Da preferire per mantenere
la separazione tra codice
2 HTML e codice di scripting
Se JavaScript è
coinvolto nella
costruzione del
layout della
pagina
Dove scrivo il codice JavaScript?
8. • In file esterni (file di testo con estensione .js)
– Per alleggerire la pagina HTML
– Per utilizzare il codice in più pagine
– Per ottimizzare il caricamento delle pagine con lo
stesso codice (il file viene salvato nella cache del
browser – se attiva)
• Il codice viene reso disponibile nella pagina
attraverso la seguente sintassi prima della
fine del tag <head>
<script type="text/javascript" src=“my_first_jsfile.js"></script>
Dove scrivo il codice javascript???
11. un po’ di codice …
…
<script type=‘text/javascript’>
var d = new Date();
var time = d.getHours();
if (time < 18) {
document.write(‘<h1>Buongiorno</h1>’);
} else {
document.write(‘<h1>Buonasera</h1>’);
}
</script>
…
12. meglio se in una funzione:
…
function greetings() {
var d = new Date();
var time = d.getHours();
if (time < 18) {
document.write(‘<h1>Buongiorno</h1>’);
} else {
document.write(‘<h1>Buonasera</h1>’);
}
}
…
13. • Una variabile dichiarata all’interno di una
funzione ha validità locale per quella
funzione
• Se dichiaro una variabile esternamente
questa ha validità globale
• Se non dichiaro la variabile non viene fatta
distinzione tra locale e globale e assume
validità su tutta la pagina
Ambito delle variabili
14. • Il DOM descrive come i diversi oggetti di una
pagina sono collegati tra loro
<html>
<head> <body>
<title> <meta> <ul> <h1>
<li> <li>
Document Object Model
16. DOM
Tutto il contenuto presente in una pagina
HTML è rappresentato da un document, il
document è costituito da nodi
17. DOM
Tutto il contenuto presente in una pagina
HTML è rappresentato da un document, il
document è costituito da nodi, ogni tag è
un nodo di tipo element
18. <span class=“nota”>
Struttura di un nodo
</span>
element
span text
attribute
Struttura di un
class=“nota” nodo
19. proprietà di un nodo
nodeValue childNodes
Il valore salvato nel Insieme dei nodi figli
nodo (eccetto per il del nodo corrente
tipo element)
firstChild
Primo nodo figlio del
nodeType
nodo corrente
Il tipo di nodo, ovvero
TEXT, ELEMENT o
ATTRIBUTE espresso in lastChild
numero Ultimo nodo figlio del
nodo corrente
20. Il DOM può
essere
manipolato
con
JavaScript
al fine di
modificare il
contenuto di una
pagina HTML
21. <p id=‘ora’>Ore 17:33</p>
1• Recupero l’elemento tramite l’id:
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
22. <p id=‘ora’>Ore 17:33</p>
2• Passo al primo nodo figlio per avere il testo
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
23. <p id=‘ora’>Ore 17:33</p>
3• Assegno tramite la proprietà nodeValue il
nuovo valore:
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
25. <p id=‘ora’>Ore 17:33</p>
2• Rimuovo tutti gli elementi figli del nodo
corrente
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
…
Modificare il testo di un elemento
26. <p id=‘ora’>Ore 17:33</p>
3• Creo un nuovo nodo di tipo testo
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);
Modificare il testo di un elemento
27. <p id=‘ora’>Ore 17:33</p>
4• Aggiungo il nuovo nodo al nodo principale
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);
el.appendChild(textNode);
Modificare il testo di un elemento
29. 1• Recupero tutti gli elementi <a>:
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
30. 2• Per ogni elemento verifico se l’attributo
target è già definito
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
31. 3• Se non è già stato definito, imposto il valore
a _blank
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
32. 3• Se non è già stato definito, imposto il valore
a _blank
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
} Posso scriverlo anche così: a.target = ‘_blank’;
}
Modificare il testo di un elemento
33. ma
come faccio a far eseguire la
funzione al caricamento
della pagina?
39. • Prova a cliccare il pulsante …
function trick() {
var btn= document.getElementById(‘btn’);
var y = Math.floor(Math.random() * 100);
btn.style.position = ‘absolute’;
btn.style.top = y + ‘px’;
};
Questo è un event handler
…
<input type=‘button’ id=‘btn’ value=‘Clicca qui’
onmouseover=‘trick()’ onclick=‘alert(“Hai vinto!”)’ />
Giocare un po’ con gli eventi
45. • Proviamo a simulare il funzionamento di un
semaforo con JavaScript:
– premendo il tasto 'V' far scattare il verde
– premendo il tasto 'R' far arrivare il rosso
– aggiungere il giallo tra il verde e il rosso con una
attesa di 4 secondi
Controllare il tempo con JavaScript
46. • Tutto l’HTML che ci serve:
<h1>Semaforo</h1>
<table id=‘semaphore’>
<tr>
<td id=‘red’ class=‘on’> </td>
</tr>
<tr>
<td id=‘yellow’> </td>
</tr>
<tr>
<td id=‘green’> </td>
</tr>
</table>
Controllare il tempo con JavaScript
47. • Tutti i CSS che ci servono:
#semaphore { #red.on {
background-color:#000; background-color: red;
margin:20px; }
border-spacing:5px;
} #yellow.on {
background-color: #ffAE00;
#semaphore td { }
width:30px;
height:30px; #green.on {
background-color:#333; background-color: green;
} }
Controllare il tempo con JavaScript
48. 1• Adesso, intercettiamo con JavaScript la
pressione di un tasto:
function keyDown(e) {
var key = String.fromCharCode(event.keyCode);
if(key == 'V') { go(); }
else if(key == 'R')
{
decelerate();
setTimeout('stop()',4000);
}
}
document.onkeydown = keyDown;
Controllare il tempo con JavaScript
49. 2• Scriviamo una funzione che spenga tutte le
luci del semaforo:
function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) {
lights[i].className = '';
}
}
Controllare il tempo con JavaScript
50. 3• Per concludere scriviamo le funzioni per
cambiare gli stati del semaforo:
function stop() {
clear();
document.getElementById('red').className = 'on';
}
function decelerate() {
clear();
document.getElementById('yellow').className = 'on';
}
function go() {
if(!document.getElementById('yellow').className) {
clear();
document.getElementById('green').className = 'on';
}
}
Controllare il tempo con JavaScript
52. “change the way that you write JavaScript”
document.getElementsByTagName(‘a’)
lo possiamo scrivere
così:
53. Trova gli elementi
usando i selettori CSS
Seleziona per Id
$(‘#semaphore’)
Seleziona per class
$(‘.on’)
Seleziona per tipo di tag
$(‘a’)
Come con i CSS
$(‘#semaphore td’)
54. Esegui un’operazione
sugli elementi trovati
Manipolazione del DOM
.before(), .appendTo()
Attributi
.addClass(), .attr(), .val()
Gestione eventi
.click(), .bind()
Animazioni
.hide(), .fadeOut(), .animate()
55. function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) {
lights[i].className = '';
}
}
Rimuovo la classe specifica
function clear() {
$(‘td’).removeClass(‘on’);
}
56. • Vi ricordate il problema di assegnare un
event handler all’evento onload senza
sovrascriverne i precedenti?
document.onload = a_InBlank;
• Con jQuery diventa:
$(document).ready(a_InBlank);
oppure
$(a_InBlank); Questo è unobtrusive
JavaScript al 100%
Eseguire codice al caricamento della pagina
57. Credits
Le immagini contenute in questa presentazione
hanno licenza Creative Commons
Slide 7: http://www.flickr.com/photos/pisosantacruz/414375220/
Slide 20: http://www.flickr.com/photos/32347177@N02/5438832695/
Slide 37: http://www.flickr.com/photos/59951793@N00/2035571848/in/photostream/
Slide 38: http://www.flickr.com/photos/gato-gato-gato/4166319893/in/photostream/
Slide 40: http://www.flickr.com/photos/50251125@N08/6303643943/
Slide 43: http://www.flickr.com/photos/28481088@N00/2641260615/in/photostream/
Slide 44: http://www.flickr.com/photos/darko_pevec/2221561604/
58. Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it