Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Linux Day 2014 Torino - Strumenti per lo svilup...

Davide Moro
October 25, 2014

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.

Davide Moro

October 25, 2014
Tweet

More Decks by Davide Moro

Other Decks in Programming

Transcript

  1. Mi presento Davide Moro • appassionato software libero • Python

    (Plone, Zope, Pyramid, Django) • Javascript (JQuery, AngularJS)
  2. Argomenti talk • evitare operazioni lunghe e noiose • automazione

    • produttività • routine di lavoro efficiente • applicazioni web Bisogna lavorare molto su...
  3. 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à
  4. 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
  5. Sviluppo web (deploy) - 1 • html minificato • ridurre

    numero download risorse e banda • auditing • immagini ottimizzate • css concatenati e minificati • ...
  6. 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) • ...
  7. 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!
  8. Yeoman Composto da 3 tool principali: • yo, scaffolding •

    grunt, build/task system (o gulp) • bower/npm, package manager e gestore dipendenze
  9. Yo! • Esempi: ◦ yo angular ◦ yo webapp ◦

    … • centinaia di generatori disponibili e sottocomandi • scrivi il tuo generatore!
  10. concat Uso di annotazioni direttamente nell’html per determinare i blocchi

    di css e js da concatenare, minificare, ecc. Esempio:
  11. Bower! Esempi: • bower search angular • bower install --save

    angular • bower install --save-dev angular-mocks
  12. 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
  13. 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
  14. 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
  15. 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
  16. NodeJS • piattaforma basata su Javascript (V8) • event-driven •

    non-blocking I/O model • data-intensive real-time applications that run across distributed devices
  17. 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
  18. express-angular express-angular: esempio (didattico) integrazione NodeJS + ExpressJS + AngularJS

    con workflow Yeoman: • blog post: http://bit.ly/16WZ40Q • codice: http://bit.ly/ZBymwX
  19. 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)
  20. express-angular • app di esempio (solo studio di fattibilità) •

    ok per SPA limitate • produzione/dev • Yeoman ready
  21. 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
  22. loopback.io (2) • MySQL, Oracle, MongoDB, Postgres, … • Javascript

    lato client (AngularJS) • Login Facebook, Google, Github, … • Geolocalizzazione • Role-based access controls • Licenza MIT
  23. 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 (!!!)
  24. 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)
  25. 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/)
  26. Pyramid - progetti • intranet & knowledge management (http: //karlproject.org)

    • Web application framework + CMS (http: //kotti.pylonsproject.org) • applicazioni web verticalizzate in genere
  27. PSS pyramid_starter_seed: esempio integrazione framework Pyramid + Yeoman + soluzione

    riusabile (kickstart) • blog - http://bit.ly/1AR2Oiu • codice - http://bit.ly/1raI7cJ
  28. 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
  29. Prerequisiti PSS • NodeJS (npm, grunt, bower) • Python •

    Python virtualenv (opzionale, ma consigliato) • git clone [email protected]: davidemoro/pyramid_starter_seed.git
  30. Installazione PSS $ cd pyramid_starter_seed $ python setup.py develop $

    cd pyramid_starter_seed/webapp $ bower install $ npm install
  31. 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ù...
  32. 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)
  33. Clone PSS Installa PSS, modificalo aggiungendo nuove funzionalità (per esempio:

    AngularJS, REST, autenticazione, modelli utente, ecc) e rilascia: • $ pyramid_starter_seed_clone new_template
  34. Plone (1) CMS + framework sviluppo web • intranet •

    portali collaborativi Applicazioni verticalizzate: • gestore contenuti, workflow, security, sharing, ricerca, configurazioni TTW
  35. 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
  36. angularstarter (AS) collective.angularstarter: esempio integrazione framework Plone + Yeoman +

    AngularJS + soluzione riusabile (kickstart) • blog - http://bit.ly/1xnoR38 • codice - http://bit.ly/1ykHRwH
  37. Premesse AS • basato sullo scaffold standard Plone • soluzione

    riusabile ◦ installa ◦ customizza ◦ cambia nome al progetto con uno script di clone e rilascia
  38. Prerequisiti AS • NodeJS (npm, grunt, bower) • Python •

    Plone (vedi documentazione ufficiale per installazione)
  39. 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
  40. Vantaggi AS (2) • uncss • file revving • integra

    soluzione javascript i18n • ottima soluzione per SPA (da associare a content type, REST per applicazioni più evolute)
  41. Riassunto AS Sviluppo • esperienza di sviluppo migliorata (Angular e

    Yeoman integrati) • kickstart nuovi progetti basati su AS Produzione • già ottimizzato
  42. Clone AS Installa AS, modificalo aggiungendo nuove funzionalità (per esempio:

    AngularJS, REST, autenticazione, modelli, ecc) e rilascia: • $ collective_angular_starter_clone your. awesomeplugin
  43. Ulteriori approfondimenti Tecniche avanzate front-end, tooling e ottimizzazione prestazioni (Addy

    Osmani): • https://speakerdeck.com/addyosmani/css- performance-tooling
  44. Davide Moro • Blog: http://davidemoro.blogspot.it • Twitter: @davidemoro • Google

    Plus: +davidemoro • Linkedin: http://it.linkedin. com/in/davidemoro82 • Posta elettronica: [email protected]
  45. Resoconto • Resoconto mio LinuxDay2014 Torino • Domande e risposte

    alla fine del talk Link: • http://bit.ly/1rFh2yH