modular angular: apps that scale (ng-vegas)
TRANSCRIPT
![Page 1: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/1.jpg)
Modular Angular: Apps that Scale
@bendrucker
![Page 2: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/2.jpg)
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
![Page 3: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/3.jpg)
1. Why you need a module loader
2. Intro to Browserify
3. Why small, composable modules are the future
![Page 4: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/4.jpg)
Why do I need a module loader?
1
![Page 5: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/5.jpg)
Straw Poll
![Page 6: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/6.jpg)
Bower
![Page 7: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/7.jpg)
Bower Features
• Package manager for the client side
• Download packages from a git repository
• Handle semantic versioning
• Download dependencies
![Page 9: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/9.jpg)
Dependencies
![Page 10: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/10.jpg)
Vomit All Problems Onto User
![Page 11: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/11.jpg)
Dependency Graph
AppA B C
D E F G H
![Page 12: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/12.jpg)
ABCDEFGH
![Page 13: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/13.jpg)
![Page 14: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/14.jpg)
<script> tags
![Page 15: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/15.jpg)
![Page 16: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/16.jpg)
Ben, of course I don’t use
script tags. I use gulp-concat.
![Page 17: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/17.jpg)
Concatenating your files is <script> tags with fewer HTTP requests
![Page 18: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/18.jpg)
![Page 19: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/19.jpg)
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
![Page 20: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/20.jpg)
Intro to
2
![Page 21: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/21.jpg)
Browserify understands Node’s require algorithm and builds a single script
that can run in the browser
![Page 22: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/22.jpg)
module.exports = require('angular') .module('myApp', [ require('angular-resource'), require('angular-messages') ]) .name
![Page 23: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/23.jpg)
// node_modules/angular-resource/index.js
require('./angular-resource') module.exports = 'ngResource'
![Page 24: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/24.jpg)
browserify -e app.js > dist/app.js
![Page 25: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/25.jpg)
We want to build our apps without manually specifying
every script in order
✓
![Page 26: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/26.jpg)
npm install --save angular dog-names
![Page 27: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/27.jpg)
Access to 146,330 packages on npm
✓
![Page 28: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/28.jpg)
node_modules is nested• node_modules/• angular-credit-cards/• node_modules/• ap/• creditcards/• node_modules/• camel-case/• creditcards-types/• fast-luhn/
![Page 29: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/29.jpg)
Dependencies without
conflict vomit
✓
![Page 30: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/30.jpg)
Future of JS
3
![Page 31: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/31.jpg)
Goal:
Use Less Angular
![Page 32: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/32.jpg)
angular-payments
vs.
jQuery.payment
vs.
angular-credit-cards
![Page 34: Modular Angular: Apps that Scale (ng-vegas)](https://reader033.vdocument.in/reader033/viewer/2022042701/55b279adbb61eb8f158b46ad/html5/thumbnails/34.jpg)
Thank You!
@bendrucker bendrucker.me
github.com/bendrucker