Modern Web Development

A tour of the tools we're using to develop our driveby app







Dustin Collins

Package Management

npm

Installs packages for frontend development.
 npm install <some_package> --save-dev
  • package.json
The --save-dev flag updates the devDependencies object in this file for us.
  • node_modules folder
npm installs the packages defined in package.json here.
  • -g flag
Packages with a CLI must be installed globally, like bower or karma

Bower

Installs frontend resources

npm install -g bower
bower install <some_package> --save
  • bower.json
The --save flag updates the dependencies object in this file for us.
  • driveby_visualization/static/js/vendor
bower installs its packages here: this path is defined in .bowerrc
  • --save vs --save-dev
The app needs it to run: --save, we need it for dev: --save-dev

the app

ANgular.js

MV* Javascript framework
 bower install angular
- enhances HTML vocabulary
- 4 primitives: services, controllers, directives, filters
- scopes and data-binding
- promises
- objects without classes

Chrome devtools

Live in-browser development

testing

jasmine

BDD framework for testing Javascript

- test setup with angular
- expectations
- spies
- mocks



karma

Javascript test runner
 npm install -g karma

- karma.conf.js

All karma-related configuration happens in this file.

- runtime flags

- coverage


BUILDING

Grunt

Javascript task runner
 npm install -g grunt-cli; npm install grunt
- installing tasks
- configuring tasks
- running tasks



Resources


Modern Web Development - Essess

By Dustin Collins

Made with Slides.com

Modern Web Development - Essess

A tour of modern web dev tools and practices for an Essess lunch and learn.

  • 1,523

More from Dustin Collins