Angular.js and how we cook it at PandaDoc

A quick overview how we cook Angular.js at PandaDoc:
- Why we have chosen it
- How we organized app structure
- Libraries we use
- Build and Deployment Process
- Etc

Transcript

1. Angular.js and how we cook it Serge Barysiuk <serge@quoteroller.com> CTO, PandaDoc Wednesday, October 30, 13
2. What do I need to know to launch an app with a new technology? Wednesday, October 30, 13
3. • Samples • Folders structure, organizing code • External libs to start quicker • Development process • Testing • Dependency management • Packing project • Deployment • What to do if I fail.... What do I need to start? Wednesday, October 30, 13
4. Sample apps are too simple... • Find good open-source apps at GitHub & BitBucket • Check their authors and their blogs, you’ll find great stuff there • E.g. https://github.com/IgorMinar/foodme Wednesday, October 30, 13
5. Folders and code structure • Easy if you have just a few pages • Hard if app is growing and you need to maintain everything Wednesday, October 30, 13
6. Folders and code structure • We have started with Yeoman • We use https://github.com/yeoman/ generator-angular • Dividing app into Business Logic parts + separate independent service/utility modules Wednesday, October 30, 13
7. General Parts Functional parts Folders and code structure Wednesday, October 30, 13
8. Folders and code structure Views Styles Wednesday, October 30, 13
9. Naming conventions • One Controller/Directive/Service/Provider per file • File name == Class name • Initialization code -> package_name.js Wednesday, October 30, 13
10. Batteries included... angular-bootstrap, angular- translate, angular-ui-router, restangular, ng-table Wednesday, October 30, 13
11. Batteries included... • Frequent commits on GitHub/BitBucket • Available via Bower • Clone if we need to change something Wednesday, October 30, 13
12. angular-translate Wednesday, October 30, 13
13. angular-ui-router • Organizing application as a state machine not around URLs • Nested states and state inheritance • Named views Wednesday, October 30, 13
14. angular-ui-router Wednesday, October 30, 13
15. angular-ui-router Wednesday, October 30, 13
16. angular-ui-router Wednesday, October 30, 13
17. restangular • Restangular is an AngularJS service that simplifies common GET, DELETE, and UPDATE requests with a minimum of client code. • More flexible than $resource Wednesday, October 30, 13
18. restangular Wednesday, October 30, 13
19. Development process • grunt server • watch+livereload • Development against API on staging server Wednesday, October 30, 13
20. Dependency management Wednesday, October 30, 13
21. Dependency management Wednesday, October 30, 13
22. Testing • Unit testing • E2E testing • Karma-runner + grunt-karma Wednesday, October 30, 13
23. Grunt Building project Wednesday, October 30, 13
24. Building project Wednesday, October 30, 13
25. Building project Wednesday, October 30, 13
26. uploading sources updating revisions Amazon S3 Bucket Amazon EC2 Node Deployment Wednesday, October 30, 13
27. Rendering the right version Wednesday, October 30, 13
28. Cool, but what if I fail and it doesn’t work for me... Wednesday, October 30, 13
29. ... you can always use jQuery again :) Wednesday, October 30, 13
30. Thanks! Wednesday, October 30, 13