Presentation I did together with Remco Vlierman at the Devoxx 2014 conference in Antwerp on the Enterprise Scale AngularJS

1. Enterprise scale AngularJS
Component library and Style guide
#DV14 #EnterpriseAngularJS

2. About us
Mischa Dasberg
Software Architect @ JPoint
Over10 years in enterprise Java
Angular enthousiast
mischa@dasberg.nl
http://nl.linkedin.com/in/mdasberg
#DV14 #EnterpriseAngularJS
Remco Vlierman
Developer and Software Architect @
independent
Angular enthousiast
rcvlierman@gmail.com
http://nl.linkedin.com/in/remcovlierman

3. In this talk we will address our experiences in moving the biggest online
banking website in the Netherlands from a traditional JSP based web
application towards a SPA using AngularJS.
#DV14 #EnterpriseAngularJS

4. Enterprise scale?
• 300+ dev engineers
• 40+ teams
• Multiple channels
• 1 application
#DV14 #EnterpriseAngularJS

5. Topics
• The past
• The goal
• The solution
#DV14 #EnterpriseAngularJS

6. The past
• Traditional web application using
• Spring web mvc
• JSP’s
• Custom taglibs
• JQuery building blocks
• No separation at all between front and backend
#DV14 #EnterpriseAngularJS

7. What do we need?
• Testable
• Structured
• Maintainable
• Flexible
• Extendable
#DV14 #EnterpriseAngularJS

8. What does Angular provide
• MVC Pattern
• Dependency Injection
• Two-way data binding
• Templating
• Testing support: Karma (unit), Protractor (UI)
• Mock support
#DV14 #EnterpriseAngularJS

9. The Goal

10. Increase output
Create new features and change existing components faster than
before.
#DV14 #EnterpriseAngularJS
100
80
60
40
20
0
April June August
Features

11. Continuous delivery
Automated deployments to production
#DV14 #EnterpriseAngularJS
every 15 minutes

12. Title Text
#DV14 #EnterpriseAngularJS
Consistent look and feel across all user domains
Uniformity

13. The solution
#DV14 #EnterpriseAngularJS

14. The Guide
Platform for fast and easy Frontend development
• Platform where UX-designers and developers meet.
• Allows the UX-designers to rapidly make prototypes
• Forces UX-designers to think of the big picture
• Allows the developers to use components and concepts
straight from UX
#DV14 #EnterpriseAngularJS

15. The solution
style library (uniformity)
#DV14 #EnterpriseAngularJS
component library
(uniformity, speed,
flexibility)
Automated builds
(quality assurance, continuous delivery)

16. Style library
<div class=“navigator”>
…
</div>
.navigator {
…
}
#DV14 #EnterpriseAngularJS

17. Component library
<ing-navigator name=“devoxx”>
<ing-navigator-header>
…
</ing-navigator-header>
…
</ing-navigator>
#DV14 #EnterpriseAngularJS

18. Build
• Automatic:
• gathering
• testing
• minimizing
• packaging
of all frontend code of ING
#DV14 #EnterpriseAngularJS

19. Build: what
• Spectingular library
• All modules
#DV14 #EnterpriseAngularJS

20. Build: how
• lifecycles
• dependency management
• quality assurance
• packaging
• continuous delivery
#DV14 #EnterpriseAngularJS

21. Build: result
• Fully tested codebase
• Ready to be deployed
#DV14 #EnterpriseAngularJS

22. Build: deploy
• Every 10 min to Dev
• Every 20 min to Test
• Every 2 hours to Acceptance
• Manual to Production
#DV14 #EnterpriseAngularJS

23. Build: feedback
#DV14 #EnterpriseAngularJS

24. 1 + 1 + 1 > 3
• Style library that contains all look and feel
• Component library that adds behaviour
• Build street that assures quality
Developers should only implement, not invent
#DV14 #EnterpriseAngularJS

25. Build simple app
• Manage personal data
• 3 step navigator
• Some validation
#DV14 #EnterpriseAngularJS

26. What does angular provide
• Navigator?
• Validation?
• Datepicker?
#DV14 #EnterpriseAngularJS

27. Breaking change!
• UX has new navigator specs: switch the buttons
• Normally this would break your test
• Enter the page-object: generic test that can be implemented
by the teams.
#DV14 #EnterpriseAngularJS

28. Credits
• Sander de Jong (http://nl.linkedin.com/in/sanderdejong88)
• Jake Abma (http://www.linkedin.com/pub/jake-abma/a/54b/447)
• Chris Quach (http://www.linkedin.com/pub/chris-quach/a8/588/7a8)
#DV14 #EnterpriseAngularJS

29. Questions
#DV14 #EnterpriseAngularJS