ModulAngular

DEVMarche 29/04/2015

Quanto costa un progetto strutturato?

Ha un costo relativo che vale la pena chiedersi se serve

@emanuele_r @violo

@emanuele_r @violo

La nostra esperienza

Web AppCross device

Cross platformCross browser

Progetti > 12 mesiTeam dinamico

Competenze diverse:(UX, UI, Front-End, Back-End, Analisti, PManager)

Clienti diversi:(PA, Giuridico, Finanziario, Aziende Software)

Goal

Rispondere al cambiamentoRispondere a esigenze diverse con massimo riuso -

Investimento e ROI - Riuso a diversi livelli

Supportare la dinamicità del teamLe new entry devono creare valore e diventare autonome in poco tempo - Devono sentirsi sicure di non fare danni - Devono riutilizzare il più possibile cose già fatte

ManutenibileA breve e lungo termine - Deve sopravvivere all’obsolescenza degli strumenti e

framework - Debito tecnico consapevole e condiviso - Codice comprensibile a tutti

Framework

Manutenibilità

GOALDinamicità del team

OOCSS - Atomic Design - BEM

Risposta al cambiamento Manutenibilità

GOAL

Fixed Layout e Mediaquery

Risposta al cambiamento

GOAL

SVG assets con SVGmin e Grunticon

Risposta al cambiamento Manutenibilità

GOAL

App skin e theme.scss

Risposta al cambiamento Manutenibilità

GOAL

Styleguide, KSS e Palettable

Manutenibilità

GOALDinamicità del team

CSS Lint, HTML Angular e Resemble js

Manutenibilità

GOAL

Organizzazione delle cartelle

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

Moduli COMMON :)

Manutenibilità

GOALRisposta al cambiamento

Moduli COMMON :(

Gestione delle dipendenze

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

Gestione delle dipendenze :(

One Click build

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

One Click build

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

1. GRUNT Gulp2. UglifyJS/CSS3. Preprocess4. Template cache (grunt-angular-templates)5. Convenzioni

Ogni applicazione ha il suo concetto di “BUILD”. Il consiglio è quello di approcciare il problema in maniera incrementale.

One Click build

Risposta al cambiamento

GOAL

1. RequireJS2. System.js + ES module

loader

Risposta al cambiamento Manutenibilità

GOAL

ES6 Now!

1. System.js 2. ES module loader

POJOs

Risposta al cambiamento

GOAL

TDD

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

1. KARMA2. PhantomJS (attenzione!)3. Grunt-watch

Test E2E

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

Test E2E

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

1. NgMockE2E2. Ambiente stabile e/o riproducibile3. protractor.addMockModule()4. protractor.executeScript()

Test E2E :(

ESLINT + Js Style Guide

Manutenibilità

GOALDinamicità del team

Se non hai tempo per scriverle rubale: https://github.com/airbnb/javascript

Visual Smoke Testing

Risposta al cambiamento

GOAL

1. resemble.js2. protractor.takeScreenshot()

Multipiattaforma SPINTO

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

Multipiattaforma SPINTO

1. Cordova (ngCordova)2. Crosswalk 3. nwjs.io4. Windows universal app

Proxy e Mock

Risposta al cambiamento Manutenibilità

GOALDinamicità del team

Grazie!