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
- 4 primitives: services, controllers, directives, filters
- scopes and data-binding
- promises
- objects without classes
- objects without classes
Chrome devtools
Live in-browser development
-
debugging
- workspaces
- angular-batarang
- LiveReload
testing
jasmine
BDD framework for testing Javascript
- test setup with angular
- expectations
- spies
- mocks
- 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
