Angular JS

from scratch to large scale web app


The Problem


HUDGE project
IMPORTANT project


       no time      no money      no expert

The case study 1/2 : SPA



The case study 2/2 : REST

most classic use case : SPA + Restful

One resource, standardized URL / action


The basis 1/8

The minimum knowledge

1 - Previous experience of 


2 - The official tutorial

The basis 2/8

The time reducers



The basis 3/8



"use jQuery"

56 % of all website
92% of website with JS 

The basis 4/8

Insanely fast CSS




The basis 5/8

Every path leads to ...




The basis 5/8

Every path leads to ...


Examples :
- Convention in Service naming
- Convention in dependencies order
- Convention in naming test
- etc, etc, etc

The basis 6/8

Structure your project upfront

by type                 by feature

The basis 7/8

Treat your data correctly

either : 
$http
ngResource
Restangular
BreezeJS

-> Wrapped into one home-made dedicated Service.

The basis 8/8

backend-LESS developement

The basis

wrap-up

- extremely low entry cost
- time reducers will help a lot
- structuring decisions first
- ultraspeed dev is backendLESS dev

 

The Tests 1/8

state of the art



 
 
                           

The test 2/8




Functional testing (greenpepper, fitnesse, sikuli...)
Integration testing (ngScenarios, zombieJS., casperJS..)
Unit testing (qunit, jasmine, mocha...)

The tests 3/8


A wording problem

Mock              (client driven)
Stub            (no state)
Spy       (stub with record)
Fake (mimics real system) 

The tests 3/8

 Unit testing
-- brittle 
- duplication of mocks
--- politics
- hard to write
-- hard to maintain
--- MVC, V is forgotten 
-- MVC, M&V already tested if unit+e2e
- don't resist technical refactoring
++ fast
+ help to design
++ extremely high coverage



Test 4/8

Only one option left :
"e2e" angular-scenarios

+ must be easy to write
+ must have evidence of high added value
+ always same strategy
+ must be few
+ must achieve high coverage of JS
+ must be fast
+ must be reliable



Test 5a/8

Testing under high pressure 

1) REUSE the stubbed server (no state)
2) Take full control of the black box
3) test only the nominal test case (the admin clicks everywhere)


Test 5b/8

"Take full control of the black box" explained


Test 5c/8

"Unit" testing under high pressure

++ very few politics
+++ easy to write
+++ covers M, V and C only once
++ resist technical refactoring
++ need only few test for high coverage
+- quite easy to maintain
+- quite fast
- can't help for design (but design can be good anyway)
- can't strongly cover (but coverage still decent)

Test 6/8

wrap-up of the workflow

write e2e only with TDD
hack ngScenarios (jQuery/XHR)
write nominal test case only
if time left : corner cases in ANOTHER package
against "stupid" backend (no state)
 Erase already tested scenarios (visible, bindable, updatable)
launch tests in parallel if > 1 min



The tests 7/8

The coverage

 ++ long-term variation
++ detect dead code


! Shall not be addictive

The tests 8/8

test the tests

launch test against no stubbed backend 

random delete of any JS line of code :
 at least one test shall fail

The debt 1/6



take out loans
control compound interests
reimburse when you can

The debt 2/6

When does debt happens ?

Problem occurs

 1 -> you know the solution
2 -> you find the solution immediately
3 -> technical debt

The debt 3/6

raise funds
 "raising funds is cool"

no unit test
leaky abstraction
numerous shortcuts



The debt 4 / 6


Avoid compound interest

Keep track of EACH loan

The debt 5/6

"reimburse is hard"
   eat books
eat StackOverflow
    eat confs, blog,etc

The debt 6/6

wrap-up

AngularJS : HUGE debt capacity 
don't reimburse at working hours
keep track of the loans

AngularJS under HIGH pressure

By David Boureau

AngularJS under HIGH pressure

Slides for an angularJS meetup. The topic is how to successfully achieve an AngularJS project when you have no time, no money, no expert.

  • 1,430