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

Linux Day 2014 Torino - Strumenti per lo sviluppo web

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.

D93eeac7e2b80a01bd1e1a595bac88a8?s=128

Davide Moro

October 25, 2014
Tweet

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