modular angular: apps that scale (ng-vegas)

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

Semantic Versioning

Give me angular@~1.3.13

I installed angular@1.3.15

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