Building Large angular apps

Presentation given at Dude Technology Day 2016.

Transcript

1. Building large Angular apps Stuart Eaves
2. The opportunity • Greenfield development • New Platform • New UI • Built agilely
3. So many choices
4. The First Iteration, All-in-one One Module Controllers Services Directives app.js + + Build tools + package management Visual Studio and nuget JavaScript framework + control set Angular and Kendo UI CSS framework + CSS preprocessor Bootstrap with less + + E2E Testing Ruby with cucumber
5. The problems • Code maintainability • Lots of areas of contention (merge conflicts frequently) • Growing team size • Hard to create multiple products • Low re-use, and lack of standard user experience • 1 module • Hard to test • Slow automation • Large mocks due to 1 module
6. Create Goals… • Reduce contention in the code • Increase developer efficiency • Isolate code better • Increase Quality • Strategy for testing (unit and end-to-end) • Focus on feedback cycles • Organizational scale • Multiple products are coming • More squads are coming
7. See what the community is doing
8. Module here... module there…
9. Ideas behind a module • Isolated • Reduce contention • Minimal dependencies • Easy to work with • Smaller is better • Route modules are called how we talk (i.e. workOrderList) • Easy to test • Code agility • Low cost of change • “Easy to move”
10. What does that look like Smallest unit of work Each angular registration is its own file (i.e. module, service, run, etc..) Unit tests live next to code
11. Convenience modules Use module to group other modules for larger functionality
12. Bower • Similar concerns • Not product specific • Minimal Viable Packages
13. Current Attempt: Bower Components dude-api Access to Dude Platform (API client) ngResource dude-base ui-router Auth Core modules for multiple products dude-controls directives ui-bootstrap dude-less Framework Styles Based on Bootstrap / material Mobile
14. Second Iteration - All the small things Package management bower and npm Build tools node with Gulp JavaScript framework + control set bower and npm CSS framework + CSS preprocessor Bootstrap with less + + + + + E2E Testing node with protractor
15. Products maintenance dude-api dude-controls dude-base dude-less open source
16. Quality – The <3 of Angular • unit tests • dependency injection • End to End • protractor
17. Quality - It’s a Team Sport • Collaborate on approach – Kickoff meetings • Pair Programming – 2 > 1 • Unit Testing – Lock in the spec • Peer Reviews – Get feedback from others (early and often) • E2E testing – Focus on the user. Lock in the AC • Run test suites often – Regression
18. Organizing the Test code End to End Unit Tests
19. Unit Test – Covering the libraries • Cover the libraries • Directives
20. Unit test – Fast feedback
21. End to End (e2e) Testing • E2e (end-to-end) • Run concurrently • Split tests for faster feedback • Page objects • Multiple test runners / multiCapabilities • SauceLabs • Home-grown
23. Test efficiency - VS - 705 Total 72.56 minutes total = 6.17 seconds per test 326 Unit tests* 8.49 seconds = 0.026 seconds per test End to End Tests Unit Tests
24. The Future • More products • More bower packages • More fun
25. stuart.eaves@dudesolutions.com stuisme https://www.linkedin.com/in/stuisme