Linux Day 2014 Torino - Strumenti per lo sviluppo web

Migliora la tua esperienza di sviluppatore web adottando strumenti avanzati per automatizzare operazioni ripetitive e noiose: scaffolding nuovi progetti, css performance tooling, live reload browser, javascript linting, merge e minificazione asset, uncss, cdn, integrazione con framework web e tematiche legate al deploy.

Transcript

1. Strumenti per lo sviluppo web Automatizza operazioni ripetitive e noiose
2. Mi presento Davide Moro • appassionato software libero • Python (Plone, Zope, Pyramid, Django) • Javascript (JQuery, AngularJS)
3. Argomenti talk • evitare operazioni lunghe e noiose • automazione • produttività • routine di lavoro efficiente • applicazioni web Bisogna lavorare molto su...
4. … prigrizia! Image courtesy of koratmember at FreeDigitalPhotos.net
5. 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à
6. Sviluppo web... molti minimizzano (una paginetta html, jquery)... Image courtesy of koratmember at FreeDigitalPhotos.net
7. Sviluppo web… realtà è dura! Image courtesy of Naypong at FreeDigitalPhotos.net
8. 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
9. Sviluppo web (deploy) - 1 • html minificato • ridurre numero download risorse e banda • auditing • immagini ottimizzate • css concatenati e minificati • ...
10. 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) • ...
11. 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!
12. Yeoman Composto da 3 tool principali: • yo, scaffolding • grunt, build/task system (o gulp) • bower/npm, package manager e gestore dipendenze
13. Yo! • Esempi: ◦ yo angular ◦ yo webapp ◦ … • centinaia di generatori disponibili e sottocomandi • scrivi il tuo generatore!
14. generator-angular (1) Struttura app:
15. generator-angular (2) app:
16. generator-angular (3) dist:
17. Grunt! Esempi: • grunt build • grunt serve • grunt test • grunt jshint • ecc
18. Gruntfile.js (task)
19. Gruntfile.js (pipeline)
20. jshint Errori di sintassi javascript o di stile prontamente segnalati
21. concat, cssmin, uncss Ridotto numero di request e banda
22. concat Uso di annotazioni direttamente nell’html per determinare i blocchi di css e js da concatenare, minificare, ecc. Esempio:
23. grunt-uncss Riduzione considerevole download size css (Twitter Bootstrap o altri framework UI)
24. cdnify Switch automatico CDN
25. Bower! Esempi: • bower search angular • bower install --save angular • bower install --save-dev angular-mocks
26. bower.json
27. 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
28. Tutto gratis … senza perdere tempo e mal di testa!
29. 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
30. 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
31. Yeoman - json-server Supporta query ricerca (es: ?attr=5)
32. 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
33. NodeJS • piattaforma basata su Javascript (V8) • event-driven • non-blocking I/O model • data-intensive real-time applications that run across distributed devices
34. 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
35. ExpressJS - esempio
36. express-angular express-angular: esempio (didattico) integrazione NodeJS + ExpressJS + AngularJS con workflow Yeoman: • blog post: http://bit.ly/16WZ40Q • codice: http://bit.ly/ZBymwX
37. 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)
38. express-angular
39. express-angular • app di esempio (solo studio di fattibilità) • ok per SPA limitate • produzione/dev • Yeoman ready
40. 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
41. loopback.io (2) • MySQL, Oracle, MongoDB, Postgres, … • Javascript lato client (AngularJS) • Login Facebook, Google, Github, … • Geolocalizzazione • Role-based access controls • Licenza MIT
42. 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 (!!!)
43. loopback.io (grunt conf)
44. loopback.io (AngularJS) Wow!!!
45. 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)
46. 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/)
47. Pyramid - progetti • intranet & knowledge management (http: //karlproject.org) • Web application framework + CMS (http: //kotti.pylonsproject.org) • applicazioni web verticalizzate in genere
48. Pyramid - librerie Librerie utili per lo sviluppo web: • rest_toolkit • pyramid_sqlalchemy
49. Pyramid - minimale
50. PSS pyramid_starter_seed: esempio integrazione framework Pyramid + Yeoman + soluzione riusabile (kickstart) • blog - http://bit.ly/1AR2Oiu • codice - http://bit.ly/1raI7cJ
51. 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
52. Prerequisiti PSS • NodeJS (npm, grunt, bower) • Python • Python virtualenv (opzionale, ma consigliato) • git clone git@github.com: davidemoro/pyramid_starter_seed.git
53. Installazione PSS $ cd pyramid_starter_seed $ python setup.py develop $ cd pyramid_starter_seed/webapp $ bower install $ npm install
54. Esecuzione PSS $ cd ../.. $ ./bin/pserve development.ini $ ./bin/pserve production.ini
55. Risultato Visita http://localhost:3000
56. PSS main
57. PSS view
58. PSS template
59. PSS config
60. 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ù...
61. 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)
62. Clone PSS Installa PSS, modificalo aggiungendo nuove funzionalità (per esempio: AngularJS, REST, autenticazione, modelli utente, ecc) e rilascia: • $ pyramid_starter_seed_clone new_template
63. PSS feedback
64. Plone (1) CMS + framework sviluppo web • intranet • portali collaborativi Applicazioni verticalizzate: • gestore contenuti, workflow, security, sharing, ricerca, configurazioni TTW
65. Plone (2) • dexterity • curva di apprendimento critica • community super friendly Link: • http://plone.org • http://docs.plone.org • http://plone-training.readthedocs.org/en/latest
66. Plone - cowork (1)
67. Plone - cowork (2)
68. Plone - search
69. angularstarter (AS) collective.angularstarter: esempio integrazione framework Plone + Yeoman + AngularJS + soluzione riusabile (kickstart) • blog - http://bit.ly/1xnoR38 • codice - http://bit.ly/1ykHRwH
70. Premesse AS • basato sullo scaffold standard Plone • soluzione riusabile ◦ installa ◦ customizza ◦ cambia nome al progetto con uno script di clone e rilascia
71. Prerequisiti AS • NodeJS (npm, grunt, bower) • Python • Plone (vedi documentazione ufficiale per installazione)
72. Risultato Applicazione Plone + Angular + Bootstrap
73. AS - devel mode Network (devel mode)
74. AS - production mode Network (production mode)
75. AS configure
76. AS template Semplice!
77. 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
78. Vantaggi AS (2) • uncss • file revving • integra soluzione javascript i18n • ottima soluzione per SPA (da associare a content type, REST per applicazioni più evolute)
79. Riassunto AS Sviluppo • esperienza di sviluppo migliorata (Angular e Yeoman integrati) • kickstart nuovi progetti basati su AS Produzione • già ottimizzato
80. Clone AS Installa AS, modificalo aggiungendo nuove funzionalità (per esempio: AngularJS, REST, autenticazione, modelli, ecc) e rilascia: • $ collective_angular_starter_clone your. awesomeplugin
81. Ulteriori approfondimenti Tecniche avanzate front-end, tooling e ottimizzazione prestazioni (Addy Osmani): • https://speakerdeck.com/addyosmani/css- performance-tooling
82. Trend crescita Interesse Yeoman, AngularJS, grunt, etc
83. Domande? ???
84. Davide Moro • Blog: http://davidemoro.blogspot.it • Twitter: @davidemoro • Google Plus: +davidemoro • Linkedin: http://it.linkedin. com/in/davidemoro82 • Posta elettronica: davide.moro@gmail.com
85. Resoconto • Resoconto mio LinuxDay2014 Torino • Domande e risposte alla fine del talk Link: • http://bit.ly/1rFh2yH