Tools e best practices per un progetto strutturato e modulare per web application basato su AngularJs.

1. ModulAngular
DEVMarche 29/04/2015

2. Quanto costa un progetto strutturato?
Ha un costo relativo che vale la pena chiedersi se serve

3. @emanuele_r @violo

4. @emanuele_r @violo

5. La nostra esperienza
Web App
Cross device
Cross platform
Cross browser
Progetti > 12 mesi
Team dinamico
Competenze diverse:
(UX, UI, Front-End, Back-End, Analisti, PManager)
Clienti diversi:
(PA, Giuridico, Finanziario, Aziende Software)

6. Goal
Rispondere al cambiamento
Rispondere a esigenze diverse con massimo riuso -
Investimento e ROI - Riuso a diversi livelli
Supportare la dinamicità del team
Le 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
Manutenibile
A breve e lungo termine - Deve sopravvivere all’obsolescenza degli strumenti e
framework - Debito tecnico consapevole e condiviso - Codice comprensibile a tutti

7. Framework
Manutenibilità
GOAL
Dinamicità del team

8. OOCSS - Atomic Design - BEM
Risposta al cambiamento Manutenibilità
GOAL

9. Fixed Layout e Mediaquery
Risposta al cambiamento
GOAL

10. SVG assets con SVGmin e Grunticon
Risposta al cambiamento Manutenibilità
GOAL

11. App skin e theme.scss
Risposta al cambiamento Manutenibilità
GOAL

12. Styleguide, KSS e Palettable
Manutenibilità
GOAL
Dinamicità del team

13. CSS Lint, HTML Angular e Resemble js
Manutenibilità
GOAL

14. Organizzazione delle cartelle
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

15. Moduli COMMON :)
Manutenibilità
GOAL
Risposta al cambiamento

16. Moduli COMMON :(

17. Gestione delle dipendenze
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

18. Gestione delle dipendenze :(

19. One Click build
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

20. One Click build
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team
1. GRUNT Gulp
2. UglifyJS/CSS
3. Preprocess
4. 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.

21. One Click build
Risposta al cambiamento
GOAL
1. RequireJS
2. System.js + ES module
loader

22. Risposta al cambiamento Manutenibilità
GOAL
ES6 Now!
1. System.js
2. ES module loader

23. POJOs
Risposta al cambiamento
GOAL

24. TDD
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team
1. KARMA
2. PhantomJS (attenzione!)
3. Grunt-watch

25. Test E2E
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

26. Test E2E
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team
1. NgMockE2E
2. Ambiente stabile e/o riproducibile
3. protractor.addMockModule()
4. protractor.executeScript()

27. Test E2E :(

28. ESLINT + Js Style Guide
Manutenibilità
GOAL
Dinamicità del team
Se non hai tempo per scriverle rubale: https://github.
com/airbnb/javascript

29. Visual Smoke Testing
Risposta al cambiamento
GOAL
1. resemble.js
2. protractor.takeScreenshot()

30. Multipiattaforma SPINTO
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

31. Multipiattaforma SPINTO
1. Cordova (ngCordova)
2. Crosswalk
3. nwjs.io
4. Windows universal app

32. Proxy e Mock
Risposta al cambiamento Manutenibilità
GOAL
Dinamicità del team

33. Grazie!