Ho cominciato a studiarmi un pò Mustache per Javascript, caricando i dati tramite AJAX.
Oltre a Mustache.js, avremmo bisogno anche di jQuery; infine useremo un file di template esterno (giusto per fare un esempio più completo.
Mustache.js lo potete scaricare da GitHub (ho dovuto copiarlo in locale, il caricamento remoto non mi funzionava).
Specifichiamo cha parliamo della versione di 2 di Vue.js.
Lo sto cominciando a vedere adesso, quindi non so quante differenze ci siano con la versione 1.
Comunque, vediamo come effettuare richieste AJAX e di conseguenza riepire una tabella.
Socket.io ha la possibilità di inviare messaggi a tutti i client connessi (broadcasting) in maniera veramente easy.
Penso sia più facile visualizzare un esempio; partiamo dal Javascript:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var clients = 0;
app.get('/', function (req, res) {
res.sendFile('index.html', {root: __dirname});
});
io.on('connection', function (socket) {
clients++;
io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
socket.on('disconnect', function () {
clients--;
io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});Con Socket.io è possibile intercettare / emettere eventi, ed agire di conseguenza.
Ne vediamo tre esempi.
Il primo riguarda l'evento message, che è un evento built-in del framework:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile('index.html', {root: __dirname});
});
io.on('connection', function (socket) {
console.log('A user connected');
setTimeout(function () {
socket.send("Messaggio dopo 3 secondi");
}, 3000);
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});Socket.io è un framework per Node.js per la costruzione di applicazioni realtime.
Il suo uso di base non è molto difficile, ed è tutto in linea con il modo di programmare di Node.js.
Oggi vediamo un'introduzione.
Iniziamo con il creare il progetto:
$ mkdir TestSocket
$ cd TestSocket
$ npm initMithril è un framework per Javascript per la costruzione di siti single-page.
E' un framework completo e al contempo molto leggero.
Vediamo qualche esempio, cominciando dal classico Hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mithril</title>
</head>
<body>
<script src="//unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
m.render(root, "Hello world");
</script>
</body>
</html>Le applicazioni create con Electron, arrivano già con un menu "pre-confezionato".
Ovviamente è possibile crearne uno personalizzato.
Vediamo come crearne uno (se volete avere una base su Electron, leggete questo articolo):
const {app, BrowserWindow, Menu, dialog} = require('electron');
const path = require('path');
const url = require('url');
let win;
const template = [
{
label: 'File',
submenu: [
{
label: 'Apri',
click() {
dialog.showOpenDialog({properties:
[
'openFile',
'openDirectory',
'multiSelections'
]}
)
}
}
]
},
{
label: 'Edit',
submenu: [
{role: 'undo'},
{role: 'redo'},
{type: 'separator'},
{role: 'cut'},
{role: 'copy'},
{role: 'paste'},
{role: 'pasteandmatchstyle'},
{role: 'delete'},
{role: 'selectall'}
]
},
{
label: 'View',
submenu: [
{role: 'reload'},
{role: 'forcereload'},
{role: 'toggledevtools'},
{type: 'separator'},
{role: 'resetzoom'},
{role: 'zoomin'},
{role: 'zoomout'},
{type: 'separator'},
{role: 'togglefullscreen'}
]
},
{
role: 'window',
submenu: [
{role: 'minimize'},
{role: 'close'}
]
},
{
role: 'help',
submenu: [
{
label: 'My Blog',
click() {
require('electron').shell.openExternal('https://www.mattepuffo.com')
}
}
]
}
];
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{role: 'about'},
{type: 'separator'},
{role: 'services', submenu: []},
{type: 'separator'},
{role: 'hide'},
{role: 'hideothers'},
{role: 'unhide'},
{type: 'separator'},
{role: 'quit'}
]
});
// Edit menu
template[1].submenu.push(
{type: 'separator'},
{
label: 'Speech',
submenu: [
{role: 'startspeaking'},
{role: 'stopspeaking'}
]
}
);
// Window menu
template[3].submenu = [
{role: 'close'},
{role: 'minimize'},
{role: 'zoom'},
{type: 'separator'},
{role: 'front'}
];
}
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
Attivate e disattivate il menu per vedere le differenze con quello base.
Ovviamente potete modificarlo a vostro piacimento.
Enjoy!
Electron è un framework, basato su Node.js, per la creazione di applicazione desktop usando Javascript e HTML.
Se pensate che su questo framework si basano programmi del callibro di Atom.io, Visual Studio Code e GitHub Desktop, vi renderete conto delle sue potenzialità.
Oggi vediamo un'introduzione basica.
Prima di tutto installiamo Electron (conviene farlo a livello globale):
# npm -g install electron
L'oggetto Map, è un oggetto composto da record key/value, ed esiste in quasi tutti i linguaggi.
In Javascript è simile a Object, ma con alcune differenze.
Di cui, una delle più importanti, è che in Map è possibile usare valori primitivi, oggetti e funzioni, sia come chiave che come valore.
Inoltre dispone di alcuni metodi specifici che Object non ha.
Spulciandomi la documentazione ufficiale, ho visto che è possibile disegnare su Google Maps includendo nelle nostre pagina una libreria apposita: drawing!
Viene inclusa direttamente con Google Maps, passandolo come parametro:
<script
src="https://maps.googleapis.com/maps/api/js?libraries=drawing">
</script>Più sotto vi ho messo un esempio di pagina tutto incluso:
Creative Commons Attribution-Noncommercial-Share Alike 2.5.
.
';