Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
-
Upload
vendini-italy -
Category
Technology
-
view
66 -
download
0
Transcript of Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Creare componenti AngularJS riutilizzabili tra applicazioni
#VendiniOpenDay
Giacomo BurattiniSoftware Engineergiacomoburattini @satomy79
Andrea StronatiSoftware Engineer
astronati @stronatiandrea
Chi siamo?Siamo Software Engineers a Vendini
Di che cosa ci occupiamo?
★ Backend ma soprattutto Frontend: JS, HTML e CSS
★ AngularJS, ExtJS, Backbone, jQuery, Grunt || Gulp
★ L’idea di base? "Make it simple!"
Member HomeMember home is a web app that helps you handle, promote and cultivate your business.
Member Home
Applicazione web sviluppata con AngularJS
★ Testabile (Dependency Injection)
★ Community (53k risultati su GitHub)
★ Google Approved
Angular 1.x
Patron ConnectPatron Connect is a mobile app that helps you engage, manage and cultivate your patrons.
Patron Connect
App mobile ibrida per tablet e telefonini sviluppata con Ionic
★ Unica codebase per Android e iOS
★ Velocità di sviluppo
★ AngularJS = condivisione di codice con altri progetti
Perchè Ionic?
Perchè condividere codice?
★ Evitare duplicazione codice
★ Migliorare manutenibilità
★ Diminuire gli errori
★ Garantire consistenza tra le applicazioni
Cosa condividere tra applicazioni AngularJS?
★ Services
★ Filters
★ Directives
★ Models
Parliamo di …. moduli!Cosa è un Modulo?E’ un contenitore di parti differenti della applicazione: controllers, servizi, filtri, direttive, ecc...
Perchè li utilizziamo?★ I moduli sono riusabili
★ Facilitano la scrittura dei tests
Angular usa il pattern MVW
M Model V View W Whatever
Angular usa il pattern MVW
★ Services
★ Filters
★ Directives
★ Models
M Model V View W Whatever
Angular usa il pattern MVW
★ Services
★ Filters
★ Directives
★ Models
M Model V View W Whatever
Angular usa il pattern MVW
★ Services
★ Filters
★ Directives
★ Models
M Model V View W Whatever
Tre differenti repositories:
★ vnd-toolkit (services, filters)
★ vnd-widgets (directives)
★ vnd-models
Tre differenti repositories:
★ vnd-toolkit (services, filters)
★ vnd-widgets (directives)
★ vnd-models
Services: vnd-toolkit
★ Services
★ Filters
★ Directives
★ Models
Un service condiviso: AnalyticsService
★ Permette di inviare informazioni a GA
★ Permette di gestire una coda di eventi
★ Le informazioni vengono inviate attraverso una batch request
Filters: vnd-toolkit
★ Services
★ Filters
★ Directives
★ Models
Un filtro condiviso: performanceDate★ Le performance date possono essere espresse come:
date range (es. Feb 25, 2016 - Jul 31, 2016)data singola (es. Feb 25, 2016)un messaggio personalizzato
★ Devono tenere in considerazione il fuso orario del venue.
★ La stessa performance deve avere la medesima rappresentazione tra tutte le applicazioni
ng-bind="performance | performanceDate"
Tre differenti repositories:
★ vnd-toolkit (services, filters)
★ vnd-widgets (directives)
★ vnd-models
Directives: vnd-widgets
★ Services
★ Filters
★ Directives
★ Models
Una directive condivisa: Badge
★ E’ una “label” per mostrare foto profilo e/o iniziali
★ Si puo customizzare: colore, dimensione, achievement...
★ E’ un componente a livelli
Tre differenti repositories:
★ vnd-toolkit (services, filters)
★ vnd-widgets (directives)
★ vnd-models
Models: vendini-models
★ Services
★ Filters
★ Directives
★ Models
Vendini API Models
Una collezione di modelli per interagire con le API RESTful Vendini
★ Basato su angular-resource
★ Crea un livello di astrazione tra client ed API
★ Services che fanno da data mapper
Tricks e suggerimenti
★ Commentate il codice, usate i docblock
★ Una buona Style Guide per Angular: https://github.com/johnpapa/angular-styleguide/
★ Utilizzare i prefissi per i nostri componenti (vnd-, dm-, od-...)
★ File system naming: hyphen-case
★ Fare uso di moduli per incapsulare componenti (Angular)
Tips and tricks: organizzazione del progetto★ /src
○ /badge■ badge.directive.js■ badge.directive.spec.js■ badge.template.html■ badge.module.js
○ vnd-widgets.module.js
★ /dist○ /badge
■ badge.js■ badge.min.js■ badge.css
○ vnd-widgets.js○ vnd-widgets.min.js
Alcuni task utili per il codice condiviso
★ Linting
★ Testing
★ Build
★ Generazione documentazione con ngdocs
★ Deployment
Linting
Analisi statica del codice
★ Riduce errori di sintassi
★ Code style consistente tra i repositories
★ Diminuzione tempi code review
★ ESlint
Test e coverage
★ Unit test con Karma e Jasmine
★ Coverage con Istanbul
Test e coverage
★ Esecuzione degli unit tests
★ Permette di stabilire quale codice viene effettivamente testato
Build★ I file sorgenti vengono concatenati e minificati.
★ Generazione della Source Map (development)
*.js
*.min.js
Documentazione con ngdocs
Generazione della documentazione secondo lo standard ng-docs.
/** * @ngdoc object * @module vnd.api-resource * @name apiResourceProxy * @description * A provider for a service… * ... */
Deployment
★ Generazione del tag per git
★ Aggiornamento versione nel bower.json e/o package.json
Tricks e suggerimenti ��Prima di ogni push:
★ Esecuzione di test e linting del codice prima di ogni push
★ Validazione sintattica del messaggio di commit
Dopo un pull o un merge:
★ Aggiornare dipendenze bower e/o npm
https://github.com/typicode/husky
Grazie mille per l’attenzione!
PEACE
Domande?
LOVE CODE
</>