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
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 StackOverfloweat confs, blog,etcThe debt 6/6
wrap-up
AngularJS : HUGE debt capacity
don't reimburse at working hours
keep track of the loans
Angular JS from scratch to large scale web app