Downloaded 28 times
Uploaded byGordon Bockus
Building Massive AngularJS Apps
Gordon Bockus discusses tools and techniques for building massive Angular applications. He recommends using Yeoman to scaffold Angular applications, which provides a development environment with live reload, asset compilation, and test support out of the box. Bockus also suggests organizing code by state, using additional modules like UI Router and UI Bootstrap, and following coding standards to structure large applications. Proper tooling, organization, and testing are key to managing complexity when building with Angular at scale.
More Related Content
Similar to Building Massive AngularJS Apps
![[Ebooks PDF] download AngularJS 1st Edition Brad Green full chapters](https://cdn.slidesharecdn.com/ss_thumbnails/18713-241217213105-de1012ed-thumbnail.jpg?width=640&height=640&fit=bounds)
Building Massive AngularJS Apps
- 1. Building Massive Angular Apps Gordon Bockus @gordonk66 gbockus@spanning.com
- 2. Who is thisguy? Client side lead at Spanning Cloud Apps Building web applications for over 10 years Dojo, jQuery, ExtJS, Angular, Node Self proclaimed build nerd Selfies are OK with facial hair
- 3. What are Wetalking about? Building a large enterprise class web application How to enable your team to succeed Tools Techniques (angular)
- 4. Building Massive SPAsis hard Team Complexity Technology Time
- 6. The Goods Tools:Assume we are starting with nothing The Hard Stuff Build Angular specifics
- 7. The Hard Stuff Coding standards Documentation Spacing Naming conventions Code syntax (some) Code Review Technique Formatter (A guy can dream)
- 8.
- 9. Yeoman http://yeoman.io Scaffoldingapps Generators Build Package Manager
- 10.
- 11. Yeoman Excellent start Developer friendly Production ready Not perfect
- 12. angular-generator node server live reload compass/sass ngmin/minification bower injection (wiredep) jshint Test ready (karma/jasmine)
- 13. Customizations Configure jshint grunticon (ie8) live reload https support Update npm modules
- 14. html2js https://github.com/karlgoldstein/grunt-html2js html2js templates live with code compiles at build time populates Angular $templateCache
- 15. ngAnnotate https://github.com/olov/ng-annotate/karlgoldstein/grunt-html2js Replaces deprecated ngmin Annotates Angular Core +
- 16. Angular (about time) Additional modules ui-router ui-bootstrap angular-lodash angular-moment
- 17. States Flexible routing Nested view Complex but worth it ui-router https://github.com/angular-ui/ui-router
- 18. ui-bootstrap http://angular-ui.github.io/bootstrap/ Bootstrap3 directives Custom builds no JQuery required
- 19. Code Organization Organizecode by state Pull out common code to a standalone location services directives filters http interceptors modules/grouping modules
- 20. Other Concepts Servicesvs Factories Promises resolve in routing Directives Testing
- 21. Final Thoughts Learnyour tools Keep up with releases Adjust as necessary Enhance often Test!
- 22. THANKS ! Nowgo build something!
- 23. Repo for sampleapplication: https://github.com/gbockus/yeomanAngularApp Links to tools used in to the update can be found in the application.
Editor's Notes
- #4 What classifies a massive application? It’s more not what you will release initially, but how long will it remain in development? If it’s a tool that will have a team of engineers working on it for years it’s definitely going to end up massive. The tool and techniques describe can be used in any angular application, it focuses on maintainability and quality. It enables teams to move fast by providing a strong baseline to develop against. The backstory: Last year I was tasked with figuring out if we should move away from our current front end technologies in our next product. My team and I did a lot of research around emerging client side technologies and ultimately decided that Angular was the right choice for us. The primary deciding factor at the time was the focus on testing provided by angular as it and Ember were basically equivalent otherwise. Ember guys control yourself, this was over a year ago and I’m sure things have changed. So from here I will describe the tools and techniques used to ramp up that project as they have been working well for us.
- #5 There are several factors that impact that complexity of projects. There first is the number of people on the team developing the product. When you have several developers all working on the same code base you have to pay close attention to how the code is being written. There are simple things that can be done that make maintaining and developing the project simpler and more enjoyable.
- #6 Image 1: This is what the developers think they are developing. Image 2: This is what the PM has planned for the project (secretly hoping to get there before shipping the MVP product). Image 3: This is what the designers want to build Image 4: 2 years later this is what you end up with based on customer demand.
- #8 A salmon swimming upstream was the only image that came to mind for this task. The salmon is the lowly developer trying to sell the team on using tabs vs spaces or semicolons or something.
- #14 jshint options: http://www.jshint.com/docs/options/ grunticon home: https://github.com/filamentgroup/grunticon nom-check-updates: https://github.com/tjunnone/npm-check-updates