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

Andrea Stronati

[email protected] ho dei dubbi su questa slide

Giacomo Burattini

anche io volendo la possiamo togliere, si spiega in quella prima

Andrea Stronati

domani parliamone! gas

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

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"




★ 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




★ 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

</>

Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni

Technology

Transcript of Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni