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

  1. MAJOR - incompatible API changes
  2. MINOR - backwards-compatible + new functionality
  3. 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