Click here to load reader

Devoxx enterprise scale angular

Embed Size (px)

Citation preview

1. Enterprise scale AngularJSComponent library and Style guide#DV14 #EnterpriseAngularJS 2. About usMischa DasbergSoftware Architect @ JPointOver10 years in enterprise JavaAngular [email protected]://nl.linkedin.com/in/mdasberg#DV14 #EnterpriseAngularJSRemco VliermanDeveloper and Software Architect @independentAngular [email protected]://nl.linkedin.com/in/remcovlierman 3. In this talk we will address our experiences in moving the biggest onlinebanking website in the Netherlands from a traditional JSP based webapplication 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 JSPs 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 outputCreate new features and change existing components faster thanbefore.#DV14 #EnterpriseAngularJS100806040200April June AugustFeatures 11. Continuous deliveryAutomated deployments to production#DV14 #EnterpriseAngularJSevery 15 minutes 12. Title Text#DV14 #EnterpriseAngularJSConsistent look and feel across all user domainsUniformity 13. The solution#DV14 #EnterpriseAngularJS 14. The GuidePlatform 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 conceptsstraight from UX#DV14 #EnterpriseAngularJS 15. The solutionstyle library (uniformity)#DV14 #EnterpriseAngularJScomponent library(uniformity, speed,flexibility)Automated builds(quality assurance, continuous delivery) 16. Style library

.navigator {}#DV14 #EnterpriseAngularJS 17. Component library#DV14 #EnterpriseAngularJS 18. Build Automatic: gathering testing minimizing packagingof 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 qualityDevelopers 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 implementedby 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