Browserify et AngularJS

[FR] Modulariser son application AngularJS avec Browserify

Session présentée au DevFest Nantes 2014
http://devfest.gdgnantes.com

---

Les sources des live-coding sont disponibles sous GitHub :

- Live-coding #1 et #2 : https://github.com/antoine-richard/devfest-browserify-demo1

- Live-coding #3 : https://github.com/antoine-richard/devfest-browserify-demo2

---

Pitch :

Ces deux dernières années, la plateforme Node.js a connu une adoption considérable. Son approche asynchrone, simple et performante a fait ses preuves. Le système de modules de Node.js s’est lui aussi révélé particulièrement efficace. Nous, développeurs front-end, sommes toujours à la recherche d’une solution de modularisation convaincante. Et si l‘inspiration était à chercher du côté de Node ?

Browserify nous propose d’adopter les standards de modularisation de Node.js pour structurer nos clients web. Il nous offre également l’opportunité de gérer nos dépendances avec npm et de bénéficier ainsi de ce formidable écosystème.

Après une présentation de Browserify et de son intérêt, cette session détaillera la modularisation “façon Node.js” d’une application AngularJS.

Transcript

1. MODULARISER SON APPLICATION ANGULARJS AVEC BROWSERIFY
2. ANTOINE RICHARD WEB ARCHITECT @richard_antoine arichard@sqli.com
3. Javascript + non-blocking I/O Use-cases orientés flux de données : API WEB MOBILE IOT
4. Né en 2009. Premiers usages en production en 2011. Aujourd’hui, son adoption se généralise.
5. Structuration du code → Isolation → Composition Gestion des dépendances → Versioning → Installation
6. Spécifications d’un écosystème Javascript hors des navigateurs Dont un système de module, implémenté dans Node.JS → définit ses dépendances → expose une API → est isolé → un module = un service → composabilité Un module Philosophie UNIX
7. Créé en 2011. Livré avec NodeJS. 100 000+ packages, ~25 000 000 downloads par jour Croissance : Création de npm, Inc en janvier 2014 (levée de $2.6M) npm 216/j Maven 62/j Gems 55/j Bower 62/j GoDoc 63/j Packagist 79/j Source : modulecounts.com
8. CODING TIME
9. INTÉRÊT CÔTÉ CLIENT ? → boilerplate minimal → cohérence → un seul package manager
10. = Javascript Package Manager blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
11. require(‘module’)
12. « require(‘module’) dans le navigateur »
13. CODING TIME
15. Angular est disponible sur npm. Mais il n’est pas CommonJS. → OK ou browserify-shim NOTE SUR
16. CODING TIME
17. Séparation de la configuration et de la logique applicative
18. Release → Browserify + Browserify-shim → ngAnnotate + ngInject → Uglify + SourceMaps Watch → Watchify → BrowserSync
19. Tests unitaires : Tests end to end :
20. Outillage Framework applicatif Logique applicative
21. github.com/substack/browserify-handbook MERCI