Introduction
Nodejs & npm
gulp & bower
ESlint
Karma & Jasmin & Istambul/Karma-coverage
What is Angular
Testing strategies
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.
Semantic Versioning
- MAJOR - incompatible API changes
- MINOR - backwards-compatible + new functionality
- PATCH - backwards-compatible + bug fixes
Saving depencencys package using CLI
npm init
npm install gulp -save
or
npm install gulp -save-dev
Make package.json
Production
Developemet
package.json
{ "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<local-dev-modules>": "<version>" } }
npm install express@3.0.0 --save-exact
Save exact version of node module
npm install visionmedia/express
Mode CLI commands
#list installed packages
npm ls
#list outdated packages
npm outdated
#remove package
npm rm <name>
#search model usages
npm ls graceful-fs
PACKAGE MANAGER
FOR THE WEB
bower.json
Manifest file similar to NPM's package.json
Globaly installing packages using CLI
npm install gulp -g
Streaming Build System
Uses NodeJS streams, thereby removing the need to create intermediate files when transforming source files
gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concat', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
Gulp API
gulp.src (globs[, options]);
gulp.dest (path[, options]);
gulp.task (name[, deps], fn);
gulp.watch (glob[, opts], tasks);
The .pipe() is how we connect
single-purpose plugins together
Detects errors and potential problems
Rules - ESLint comes with a bunch of default rules to get you started.
Developer Guide - Love ESLint and want to help make it even awesomer? We've got all the details to get you started.
On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created
Karma - a test runner that fits all our needs.
Test Runner for Javascript
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
Istambul/Karma-coverage
What is Angular
AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries.
Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.
History
2009, on a project called Google Feedback. We’d
gone through months of frustration with our development speed and ability to write
testable code. At around the six month mark, we had around 17,000 lines of front-end
code. At that point, one of the team members, Misko Hevery, made a bold statement
that he’d be able to rewrite the whole thing in two weeks using an open source library
that he’d created as a hobby.
I figured that a two week delay couldn’t hurt us that much and we’d at least be entertained
by Misko scrambling to build something. Misko missed his time estimate. It took three
weeks. We were all astounded, but even more astounding was that the line count for
this new app had dropped from 17,000 to a mere 1,500. It seemed that Misko was onto
something worth pursuing.
Anatomy of An AngularJS App
Handle complexity
Big templates - split to components/directivs
Try to keep single responsibility
Always have tests for Your code.
Have tools to track complexity
For production
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
If you wish to debug an application with this information then you should open up a debug console in the browser then call this method directly in this console:
angular.reloadWithDebugInfo();
Disabling Debug Data
Testing strategies
1. Unit tests
- Did I think about the logic correctly?
2. Template tests
- How it behaves?
With great power comes great responsibility
3. e2e tests
- Did we have business case hovered and stable?
Test/Behavior-driven development
TDD - Unit tests
BDD - e2e tests
Test-driven development
Try to follow input output principle
Test-driven development
Track code coverage
Test-driven development
Intro
By Darius Laurinčikas
Intro
- 1,004