Using AngularJs in large-scale single-page applications

1. TAMING THE SUPERHERO
Project:Truedash | Speaker: Miloš Bošković
/ Webcamp Ljubljana / March 2015

2. › Simple & Collaborative Business Intelligence
› Startup located in London – Shoreditch (but also
worldwide)
› Started around December 2013
› Around 15 people involved in the project
› Backend built on Java Apache Spark and MongoDb
› Frontend built onAngularJs 1.x
/ Webcamp Ljubljana / March 2015

6. / Webcamp Ljubljana / March 2015

7. / Webcamp Ljubljana / March 2015

8. / Webcamp Ljubljana / March 2015

9. WHAT WE’RE GONNA COVER
› Some of the AngularJs features
› How these features are used inTruedash
› How these features are not used in
Truedash
/ Webcamp Ljubljana / March 2015

10. › Superheroic JavaScript MVW Framework
(hence the talk title)
› MVW -> Model-View-Whatever
› Maintained by Google
/ Webcamp Ljubljana / March 2015

11. BINDINGS
› One-way
› Two-way
› One-time
› Watcher (observer pattern)
Name
Nikola
Hello Nikola!
Result
Miško Hevery: Two-way data binding is an anti-pattern for large-scale web apps (link)

12. DIRECTIVES
› Teaches HTML new tricks
› Define new behaviour on HTML tag they’re put on
› Can be defined as HTML tags or attributes
› Prefixed with ng (in our case tu)

13. ng-if & ng-show
› Render/remove and Show/hide content

15. ng-repeat
› Use bind once (one-time binding) whenever possible

16. INTERPOLATION VS ng-bind
› Interpolation is slower than ng-bind directive (link)
› When it comes to large-scale apps, it does matter

17. TRUEDASH DIRECTIVES
› Component-like approach
› Make everything a directive
› Promotes reusability and isolation
› Should make switching to Angular 2.0 easier

19. HAVE PERFORMANCE IN MIND
› On destroy event for directives (and controllers)
› Gulp
- Minify
- Uglify (a little tricky with Angular)
- Concatenation
-Template caching
› Turn off debugger mode (link)
/ Webcamp Ljubljana / March 2015

20. USEFUL LINKS
› https://angularjs.org/
› https://github.com/johnpapa/angular-styleguide
› http://devchat.tv/adventures-in-angular/ (Angular podcasts)
› https://angular.io/ (Angular 2.0)
/ Webcamp Ljubljana / March 2015

21. ABOUT TRUEDASH AND OUR TEAM
› Wanna work with us? Email us at milos@truedash.com
/ Webcamp Ljubljana / March 2015
Borislav Nikola You?

22. THANK YOU
/ Webcamp Ljubljana / March 2015