Argomenti talk
● evitare operazioni lunghe e noiose
● automazione
● produttività
● routine di lavoro efficiente
● applicazioni web
Bisogna lavorare molto su...
Slide 4
Slide 4 text
… prigrizia!
Image courtesy of koratmember at FreeDigitalPhotos.net
Slide 5
Slide 5 text
Obiettivi
● soluzioni generiche e riusabili
● evitare operazioni manuali
● delegare lavoro ai computer
● strumenti per migliorare esperienza sviluppo
In pratica (valido solo per gli informatici :)
● > prigrizia, > produttività
Slide 6
Slide 6 text
Sviluppo web...
molti minimizzano (una paginetta html,
jquery)...
Image courtesy of koratmember at FreeDigitalPhotos.net
Slide 7
Slide 7 text
Sviluppo web… realtà
è dura!
Image courtesy of Naypong at FreeDigitalPhotos.net
Slide 8
Slide 8 text
Sviluppo web - in realtà
● scaffolding
● gestione librerie terze parti
● test automatici
● code linting
● altre perdite di tempo “nascoste”
● gestione dipendenze dev vs production
● setup ambiente mock
Slide 9
Slide 9 text
Sviluppo web (deploy) - 1
● html minificato
● ridurre numero download risorse e banda
● auditing
● immagini ottimizzate
● css concatenati e minificati
● ...
Slide 10
Slide 10 text
Sviluppo web (deploy) - 2
● javascript concatenati e minificati
● problematiche cache (revving)
● CDN
● uncss regole css non utilizzate
● altre tecniche avanzate front end legate alle
prestazioni (talk Addy Osmani)
● ...
Slide 11
Slide 11 text
Yeoman!
http://yeoman.io
“The web's scaffolding tool
for modern webapps”
Non si tratta solo di uno
strumento ma di un nuovo
modo di lavorare!
Slide 12
Slide 12 text
Yeoman
Composto da 3 tool principali:
● yo, scaffolding
● grunt, build/task system (o gulp)
● bower/npm, package manager e gestore
dipendenze
Slide 13
Slide 13 text
Yo!
● Esempi:
○ yo angular
○ yo webapp
○ …
● centinaia di generatori
disponibili e sottocomandi
● scrivi il tuo generatore!
Risultati
● boostrap iniziale veloce e di qualità
● linting automatico del codice javascript
● reload automatico server e browser
● setup test javascript
● ambiente di lavoro e produzione RIPETIBILE
● build versione PRODUZIONE
● compass + sass ready
Slide 28
Slide 28 text
Tutto gratis
… senza perdere tempo e mal di testa!
Slide 29
Slide 29 text
Yeoman - altro
● Estendi il tuo workflow
○ numerosi plugin disponibili
○ sviluppa nuovi task
● Esempio:
○ pageres: screenshot automatici a diverse risoluzioni
○ grunt-aws-s3: deploy automatico AWS S3 +
CloudFront
○ json-server: prototipazione rapida
Slide 30
Slide 30 text
Yeoman - pageres
● pageres: “Capture screenshots of websites in various resolutions. A good way to make sure your
websites are responsive.”
● Origine foto: https://twitter.com/nikmd23/status/520138885490548736
Slide 31
Slide 31 text
Yeoman - json-server
Supporta query ricerca (es: ?attr=5)
Slide 32
Slide 32 text
Framework web?
● non solo html statico…
● Esempi di integrazione con un framework
○ NodeJS/Express (Javascript)
○ loopback.io (Javascript)
○ Pyramid (Python)
○ Plone (Python)
● Adattabile a qualsiasi framework con un
minimo di lavoro
Slide 33
Slide 33 text
NodeJS
● piattaforma basata su Javascript (V8)
● event-driven
● non-blocking I/O model
● data-intensive real-time applications that run
across distributed devices
Slide 34
Slide 34 text
ExpressJS
● framework web basato su NodeJS
● minimale
● unopinionated (database, templating, ecc)
● molto popolare
● ha un proprio generatore di progetti (non
basato su Yeoman) http://expressjs.
com/starter/generator.html
Slide 35
Slide 35 text
ExpressJS - esempio
Slide 36
Slide 36 text
express-angular
express-angular: esempio (didattico)
integrazione NodeJS + ExpressJS +
AngularJS con workflow Yeoman:
● blog post: http://bit.ly/16WZ40Q
● codice: http://bit.ly/ZBymwX
Slide 37
Slide 37 text
Premesse express-angular
● illustrati passi necessari per adattare uno
scaffold generato con express con un
progetto Yeoman su http://bit.ly/16WZ40Q
● si tratta solo di uno studio di fattibilità (puro
scopo dimostrativo)
● un po’datato ma utile per capire (vecchia
versione di Express)
Slide 38
Slide 38 text
express-angular
Slide 39
Slide 39 text
express-angular
● app di esempio
(solo studio di
fattibilità)
● ok per SPA
limitate
● produzione/dev
● Yeoman ready
Slide 40
Slide 40 text
loopback.io
● framework basato su ExpressJS
● indicato per model-driven apps fortemente
dinamiche
● generazione API REST tramite CLI
● Android, iOS, JavaScript SDKs
● generazione automatica Javascript (client
side) per comunicazioni con end-point REST
loopback.io (Angular SDK)
● endpoint REST generato tramite CLI (es:
users)
● grunt-loopback-angular: generazione
automatica Javascript (client side) che
interagisce con l’end-point REST server side
(!!!)
Slide 43
Slide 43 text
loopback.io (grunt conf)
Slide 44
Slide 44 text
loopback.io (AngularJS)
Wow!!!
Slide 45
Slide 45 text
Pyramid (1)
http://trypyramid.com
● framework web minimale
● “start small, finish big”
● database e template agnostico
● architettura pluggable ed estensibile (no
fork)
● molto flessibile (url dispatch vs traversal)
Slide 46
Slide 46 text
Pyramid (2)
● utilizza librerie standard (non implementa il
suo ORM, request object, ecc)
● uno dei primi framework con supporto
Python3
● documentato e testato (http://docs.
pylonsproject.org/projects/pyramid/en/latest/)
Slide 47
Slide 47 text
Pyramid - progetti
● intranet & knowledge management (http:
//karlproject.org)
● Web application framework + CMS (http:
//kotti.pylonsproject.org)
● applicazioni web verticalizzate in genere
Slide 48
Slide 48 text
Pyramid - librerie
Librerie utili per lo sviluppo web:
● rest_toolkit
● pyramid_sqlalchemy
Slide 49
Slide 49 text
Pyramid - minimale
Slide 50
Slide 50 text
PSS
pyramid_starter_seed: esempio integrazione
framework Pyramid + Yeoman + soluzione
riusabile (kickstart)
● blog - http://bit.ly/1AR2Oiu
● codice - http://bit.ly/1raI7cJ
Slide 51
Slide 51 text
Premesse PSS
● basato sullo scaffold standard Pyramid
● adotta tecnica uncss
● soluzione riusabile
○ installa
○ customizza
○ cambia nome al progetto con uno script di clone e
rilascia
Vantaggi PSS
Rispetto a scaffold originale produzione:
● html minificato (~7Kb -> ~4Kb)
● immagini ottimizzate
● switch automatico CDN
● plugin javascript Bootstrap componibili
● uncss
● può essere fatto molto di più...
Slide 61
Slide 61 text
Riassunto PSS
Sviluppo
● esperienza di sviluppo migliorata
● kickstart nuovi progetti basati su AS
Produzione
● risparmiati ~38 Kb (su una base di partenza
già pronta e ottimizzata per andare in
produzione)
Premesse AS
● basato sullo scaffold standard Plone
● soluzione riusabile
○ installa
○ customizza
○ cambia nome al progetto con uno script di clone e
rilascia
Slide 71
Slide 71 text
Prerequisiti AS
● NodeJS (npm, grunt, bower)
● Python
● Plone (vedi documentazione ufficiale per
installazione)
Vantaggi AS (1)
● pattern riusabile ed estensibile per
integrazione Plone + Angular + Yeoman
● leggero (~57 Kb totali per prima request)
● html minificato (~2.1Kb -> ~0.9Kb)
● immagini ottimizzate
● switch automatico CDN
● plugin javascript Bootstrap componibili
Slide 78
Slide 78 text
Vantaggi AS (2)
● uncss
● file revving
● integra soluzione javascript i18n
● ottima soluzione per SPA (da associare a
content type, REST per applicazioni più
evolute)
Slide 79
Slide 79 text
Riassunto AS
Sviluppo
● esperienza di sviluppo migliorata (Angular e
Yeoman integrati)
● kickstart nuovi progetti basati su AS
Produzione
● già ottimizzato
Slide 80
Slide 80 text
Clone AS
Installa AS, modificalo aggiungendo nuove
funzionalità (per esempio: AngularJS, REST,
autenticazione, modelli, ecc) e rilascia:
● $ collective_angular_starter_clone your.
awesomeplugin