Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browserify et AngularJS

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.

0d67d4ac82fb031ff815245ae00e1a97?s=128

Antoine RICHARD

November 07, 2014
Tweet

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

  14. None
  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