modular angular: apps that scale (ng-vegas)
TRANSCRIPT
Modular Angular: Apps that Scale
@bendrucker
Developers Love Him!
He is 21Has 190 reposLocal developer exposes shocking web development secret. Learn the free trick to his stunning results.
LEARN THE TRUTH NOW
1. Why you need a module loader
2. Intro to Browserify
3. Why small, composable modules are the future
Why do I need a module loader?
1
Straw Poll
Bower
Bower Features
• Package manager for the client side
• Download packages from a git repository
• Handle semantic versioning
• Download dependencies
Dependencies
Vomit All Problems Onto User
Dependency Graph
AppA B C
D E F G H
ABCDEFGH
<script> tags
Ben, of course I don’t use
script tags. I use gulp-concat.
Concatenating your files is <script> tags with fewer HTTP requests
Why We Need a Module Loader
• We want to build our apps without manually specifying every script in order
• We want dependencies without conflict vomit
• There are 146,330 packages on npm and it would be nice to use them
1
Intro to
2
Browserify understands Node’s require algorithm and builds a single script
that can run in the browser
module.exports = require('angular') .module('myApp', [ require('angular-resource'), require('angular-messages') ]) .name
// node_modules/angular-resource/index.js
require('./angular-resource') module.exports = 'ngResource'
browserify -e app.js > dist/app.js
We want to build our apps without manually specifying
every script in order
✓
npm install --save angular dog-names
Access to 146,330 packages on npm
✓
node_modules is nested• node_modules/• angular-credit-cards/• node_modules/• ap/• creditcards/• node_modules/• camel-case/• creditcards-types/• fast-luhn/
Dependencies without
conflict vomit
✓
Future of JS
3
Goal:
Use Less Angular
angular-payments
vs.
jQuery.payment
vs.
angular-credit-cards
Thank You!
@bendrucker bendrucker.me
github.com/bendrucker