angularjs - taming the superhero

TAMING THE SUPERHERO

Project: Truedash | Speaker: Miloš Bošković

/ Webcamp Ljubljana / March 2015

› 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 on AngularJs 1.x

/ Webcamp Ljubljana / March 2015

/ Webcamp Ljubljana / March 2015

/ Webcamp Ljubljana / March 2015

/ Webcamp Ljubljana / March 2015

WHAT WE’RE GONNA COVER

› Some of the AngularJs features › How these features are used in

Truedash › How these features are not used in

Truedash

/ Webcamp Ljubljana / March 2015

› Superheroic JavaScript MVW Framework (hence the talk title)

› MVW -> Model-View-Whatever › Maintained by Google

/ Webcamp Ljubljana / March 2015

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)

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)

ng-if & ng-show

› Render/remove and Show/hide content

ng-repeat

› Use bind once (one-time binding) whenever possible

INTERPOLATION VS ng-bind

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

TRUEDASH DIRECTIVES

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

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

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

ABOUT TRUEDASH AND OUR TEAM

› Wanna work with us? Email us at milos@truedash.com

/ Webcamp Ljubljana / March 2015

Borislav Nikola You?

THANK YOU

/ Webcamp Ljubljana / March 2015