@PearlChen #CollideHalifax F i n d i n g T r u t h i n A n g u l a r go.klab.ca/collide-truth

@PearlChen #CollideHalifax My n a m e i s Pe a r l C h e n . H E L LO !

@PearlChen #CollideHalifax Te c h n o l o g i s t + E d u c a t o r I ’ M A … Karma Laboratory

@PearlChen #CollideHalifax Ye o m a n s t u f f YO U M AY K N O W M E F R O M …

@PearlChen #CollideHalifax H T M L 5 Ro c k s . c o m YO U M AY K N O W M E F R O M …

@PearlChen #CollideHalifax O v e r v i e w A G E N D A 1. My data viz inspiration 2. Why Angular? 3. HTML animation performance

@PearlChen #CollideHalifax I n s p i r a t i o n D ATA V I Z

@PearlChen #CollideHalifax My d e v b a c kg ro u n d I N S P I R AT I O N Adobe Flash with ActionScript 2 & AS3 Adobe Flex with ActionScript 3 HTML, CSS, & JS with AngularJS

@PearlChen #CollideHalifax B l o g c i t y ( c i rc a 2 0 0 4 ) I N S P I R AT I O N

@PearlChen #CollideHalifax photo credit: Andrew Bravener I N S P I R AT I O N D E M O

@PearlChen #CollideHalifax Jo n a t h a n H a r r i s I N S P I R AT I O N

@PearlChen #CollideHalifax T E LU S D e v i c e Re s o l u t i o n s C A S E S T U DY # 1 D E M O

@PearlChen #CollideHalifax D e s i g n Re s e a rc h Te c h n i q u e s C A S E S T U DY # 2 D E M O

@PearlChen #CollideHalifax W hy A n g u l a rJ S ? I N T R O

@PearlChen #CollideHalifax W hy A n g u l a r? A G E N D A • decoupling / separation of concerns • 2-way data binding • encapsulation • directives • filters

@PearlChen #CollideHalifax Given this JavaScript string: name  =  'Collide  2014'; The old school way to dynamically update DOM text:   document.getElementById('conference') Things got easier with the jQuery $(selector):   $('#conference') Now, with Angular! .textContent  =  name; .text(  name  );

@PearlChen #CollideHalifax

@PearlChen #CollideHalifax AngularJS is a JavaScript MV* framework
 but… “there is nothing to inherit, nothing to call, and 
 no complex life cycle for your controllers to follow. […] It really is just a better browser.” - Misko Hevery, creator of AngularJS
 Appliness (Feb issue #11)

@PearlChen #CollideHalifax B e g i n n e r / i n t e r m e d i a t e ? W H Y A N G U L A R ? • Declarative ➞ Readable • Spaghetti code • Does a lot of heavy lifting for you • Opinionated* == good • Created with web designers in mind

@PearlChen #CollideHalifax Mo r e a d v a n c e d ? W H Y A N G U L A R ? • Create complex web apps with less JS code. • Write code with unit testing in mind.

@PearlChen #CollideHalifax Mo d e l -Vi e w - C o n t ro l l e r M V C R E F R E S H E R

@PearlChen #CollideHalifax Model
 your application data Controller
 mediator between the view & model View
 a representation
 of the model data M V C R E F R E S H E R x user input database save REST result update DOM

@PearlChen #CollideHalifax Mo d e l -Vi e w -W h a t e v e r A N G U L A R M V C L I N K Model-View-Whatever

@PearlChen #CollideHalifax Model
 single object entity View
 rendered DOM w/ data-bindings "Controller"
 classes for augmenting $scope
 with properties and business logic A N G U L A R M O D E L-V I E W-V I E W M O D E L ( M V V M ) ViewModel ( $scope / this )
 data binding API for managing model changes = Angular magic = File you define x

@PearlChen #CollideHalifax Re c o m m e n d e d Re a d i n g M V C R E F R E S H E R

@PearlChen #CollideHalifax "The model is the truth." - a wise person

@PearlChen #CollideHalifax D a t a b i n d i n g A N G U L A R O V E R V I E W

@PearlChen #CollideHalifax 1 - w ay b i n d i n g D ATA B I N D I N G  

{{yourName}}

yourName   hardcoded  to  'Pearl'

{{yourName}} value="{{yourName}}" Pearl Pearl 1 -WAY M E R G E D E M O

@PearlChen #CollideHalifax  

{{yourName}}

2 - w ay b i n d i n g D ATA B I N D I N G yourName   hardcoded  to  'Pearl'

{{yourName}} value="{{yourName}}" model becomes
 single source of truth L I N K E D L I N K E D ng-­‐model="yourName" value="{{yourName}} D E M O A U T O U P D AT E S Pearl Pearl

@PearlChen #CollideHalifax H T M L C o m p i l e r D ATA B I N D I N G Remember:
 
 the Angular compiler consumes
 the DOM
 not string templates

@PearlChen #CollideHalifax O u t p u t t i n g v a l u e s T E M P L AT E E X P R E S S I O N S • Expressions are JavaScript-like code snippets. • Double curly brace notation
 e.g. {{simpleVariable}}  or {{object.simpleVariable}} • Evaluate and bind to primitives
 Strings, numbers, and booleans • undefined and null values will show up blank.

@PearlChen #CollideHalifax F l o w c o n t ro l T E M P L AT E E X P R E S S I O N S • There is none! • No looping or conditionals within {{  }}. • Handle business logic with methods in a controller or via a directive.

@PearlChen #CollideHalifax v s D i r e c t i v e e x p r e s s i o n s T E M P L AT E E X P R E S S I O N S • You might come across something like this:
 Hello  {{username}}! • But what about this?
 • Object literal notation
 e.g. {'stringToOutput':booleanCondition}
 e.g. {'highlight':true} • Not exactly the same as {{ }}. 
 Evaluated in the directive. Think: function parameter. D E M O

@PearlChen #CollideHalifax Fro m j Q u e r y t o A n g u l a r C A S E S T U DY

@PearlChen #CollideHalifax Re w r i t i n g a s i m p l e " a p p" F R O M J Q U E R Y T O A N G U L A R Going from jQuery to AngularJS D E M O

@PearlChen #CollideHalifax App flow

@PearlChen #CollideHalifax C o m p a r i n g t h e c o d e F R O M J Q U E R Y T O A N G U L A R C O M PA R E

@PearlChen #CollideHalifax B e n e f i t s F R O M J Q U E R Y T O A N G U L A R Model-driven data binding means: • descriptive state variables —> code is better at
 "self documenting" • less code needed for DOM manipulation • business logic decoupled from the view • behavioural intentions are more clear in the HTML

@PearlChen #CollideHalifax "The model is the truth." - me, a few slides ago REMINDER!

@PearlChen #CollideHalifax D i r e c t i v e s C A S E S T U DY # 1

@PearlChen #CollideHalifax G e t t i n g o r g a n i z e d D I R E C T I V E S • Views are for HTML output. • Directives are for DOM manipulation. • Controllers are for your business logic.

@PearlChen #CollideHalifax Angular directives teach DOM elements new tricks! • Use directives to enhance existing elements
 • Create directives to encapsulate DOM functionality
 W h a t i s a d i r e c t i v e ? D I R E C T I V E S

@PearlChen #CollideHalifax Us i n g d i r e c t i v e s D I R E C T I V E S Syntax-wise, it can be a: • tag attribute
 
   • existing or custom HTML tag
 
 • css class





@PearlChen #CollideHalifax B u i l t - i n d i r e c t i v e s D I R E C T I V E S Control • ng-repeat • ng-if / ng-switch Events • ng-click / ng-submit • ng-focus / ng-blur • ng-cut / ng-copy / ng-paste These are only some of them! Go to docs.angularjs.org/api/ng/directive for the full list. CSS • ng-class / ng-style • ng-show / ng-hide • ng-class-even / ng-class-odd Forms • form / input / select / textarea • ng-model • ng-selected / ng-checked • ng-required / ng-disabled

@PearlChen #CollideHalifax E x a m p l e : D 3 D I R E C T I V E S From odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives:

@PearlChen #CollideHalifax E x a m p l e : C h a r t J S D I R E C T I V E S From blog.safaribooksonline.com/2013/11/07/creating-an-angularjs-component/:  

@PearlChen #CollideHalifax D e f i n i n g c u s t o m d i r e c t i v e s C U S T O M D I R E C T I V E S • angular.module('demoApp')
    .directive('myTooltip',  function  ()  {
        return  directiveObject;
 });

@PearlChen #CollideHalifax D i r e c t i v e d e f i n i t i o n o b j e c t C U S T O M D I R E C T I V E S

@PearlChen #CollideHalifax D i r e c t i v e d e f i n i t i o n o b j e c t C U S T O M D I R E C T I V E S table from "AngularJS"

@PearlChen #CollideHalifax To p 5 p ro p e r t i e s C U S T O M D I R E C T I V E S • restrict: 'E', 'A', 'C', or 'M' (or a combo 'AC') • template: ''
 or templateUrl: 'myTemplate.html'   • link: function  link(scope,  elem,  attrs)  {
              //  do  scope.stuff  here
          } • scope: false (default), true, or {attribute:'@=&'}   • require: directive-­‐name  with optional ^ or ?

@PearlChen #CollideHalifax Re s t r i c t C U S T O M D I R E C T I V E S • tag attribute
 restrict:  'A'   • existing or custom HTML element
 restrict:  'E' • css class
 restrict:  'C'   • HTML comment
 restrict:  'M'   • Combine them
 restrict:  'AC'

@PearlChen #CollideHalifax Te m p l a t e s C U S T O M D I R E C T I V E S • HTML string defined within directive
 template:  ''   • HTML fragment in external file
 templateUrl:  'views/phaseNavigator.html'
 
 In phaseNavigator.html:


@PearlChen #CollideHalifax L i n k C U S T O M D I R E C T I V E S • Any DOM manipulation goes in here
 link:  function  link(scope,  elem,  attrs)  {
                //  do  scope.stuff  here  (like  a  controller  class)
            }   • scope is an Angular scope object. • element is the jqLite-wrapped element that this directive matches. • attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

@PearlChen #CollideHalifax S c o p e C U S T O M D I R E C T I V E S • inherit parent scope (default)
 scope:  false   • create an isolated scope (best method)
 scope:  {}

@PearlChen #CollideHalifax Re q u i r e C U S T O M D I R E C T I V E S • directive name
 require:  'myOtherDirective'   • walk up the DOM to parent node
 require:  '^' • optional (aka don't throw a fit if not found)
 require:  '?'

@PearlChen #CollideHalifax P r a c t i c e m a ke s p e r fe c t D I R E C T I V E S Dave Smith - Deep Dive into Custom Directives - NG-Conf 2014

@PearlChen #CollideHalifax $ w a t c h a n d $ a p p l y D I R E C T I V E S TA L K I N G TO E A C H OT H E R

@PearlChen #CollideHalifax $ w a t c h $ WATC H A N D $ A P P LY Listen for changes in your properties: scope.$watch('watchExpression',  function(){
    //  do  stuff  now  that  watchProperty  has  changed
 }); D O C S

@PearlChen #CollideHalifax $ w a t c h $ WATC H A N D $ A P P LY Example, state changes in one file:
 scope.filterByTop10  =  function(event){
    event.preventDefault();
    scope.showInPhase  =  '';  //clear  out  phase  filters
    scope.showTop10  =  true;
 }; Listening for the change:
 scope.$watch('showTop10',  function(){
    if  (  scope.appendix.length  >  0  )  {
        scope.filteredAppendix  =  $filter('masterTechniqueFilter')
                                            (scope.appendix,  scope.showInPhase,  scope.showTop10);
    }
 });

@PearlChen #CollideHalifax $ a p p l y $ WATC H A N D $ A P P LY Use $apply to execute an expression in angular from outside of the angular framework. scope.$apply('expression');   e.g. browser DOM events, setTimeout, XHR or third party libraries D O C S

@PearlChen #CollideHalifax $ a p p l y $ WATC H A N D $ A P P LY Example DOM event: element.on('mouseover',  'li',  function(event){
    var  technique  =  angular.element(  event.target  ).scope().technique;
    scope.$apply(function(){
        scope.selectedTechnique  =  technique;
    });
 });

@PearlChen #CollideHalifax Fi l t e r s C A S E S T U DY # 2

@PearlChen #CollideHalifax D e f i n i n g a n d c a l l i n g F I LT E R S Defining a filter
 angular.module('infographicApp')
    .filter('removeZeroPixelDevices',  function  ()  {
        return  function  (devicesArray)  {
            return  _.filter(  devicesArray,  function(device){
                return  device.pxWidth  !==  0  &&  device.pxHeight  !==  0;
            });
        };
    }); Calling it
 $scope.mobileDevicesAll  =  
    $filter(  'removeZeroPixelDevices'  )(  $scope.devicesOriginal  );

@PearlChen #CollideHalifax H T M L A n i m a t i o n s P E R F O R M A N C E

H T M L To u c h S l i d e r C S S V S J AVA S C R I P T “This is the best mobile touch slider I’ve ever used. I’m trying to break it but I can’t!” ! - some guy at a Dribble meet up

j Q u e r y . a n i m a t e ( ) A N I M AT I O N S T H E J AVA S C R I P T WAY EXAMPLE 
 $('div').animate(  
                                    {left:  targetX},    //  properties
                                    200,                            //  duration
                                    ‘swing’,                    //  easing
                                    function  done(){}  //  callback
                                ); CSS 
 div  {
    position:  relative;  /*or  ‘fixed’  or  ‘absolute’,  just  not  ‘static’*/
    left:  0;
 }

GPU
 (graphics processing unit) • Specialized video and 3D graphics renderer. • Designed for doing repetitive screen updates (“paints”). • “Hardware accelerated”. CPU
 (central processing unit) • Controls all running computer software. • Better at making decisions and giving out orders. C P U v s G P U G E T T I N G S M O O T H A N I M AT I O N S

• General layout compositing • CSS3 transitions • CSS3 3D transforms • Canvas Drawing • WebGL 3D Drawing G E T T I N G S M O O T H A N I M AT I O N S W h a t c a n g o t o t h e G P U ? Further resources: 
 “Improving the Performance of your HTML5 App”: http://www.html5rocks.com/en/tutorials/speed/html5/
 “High Performance Animations": http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
 “Let’s Play With Hardware-Accelerated CSS“: http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
 “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ ˒ CSS3 transitions (I’ve only got 30 minutes!)

C S S 3 Tr a n s i t i o n s A N I M AT I O N S T H E C S S WAY SCSS EXAMPLE 
 div  {
    @include  single-­‐transition(  left,  200ms,  
                                                              cubic-­‐bezier(0.39,  0.575,  0.565,  1)  );
 } CSS EXAMPLE 
 div  {
    -­‐webkit-­‐transition:  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    -­‐moz-­‐transition:        left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    transition:                  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 } JQUERY (at the point you need the div animated) 
 $('div').css(  {left:  targetX}  );
          //  .addClass() (Note: vendor prefixes not required for latest browsers but use for optimal backwards and mobile compatibility.)

c u b i c - b e z i e r w h a t ? ? E A S I N G F U N C T I O N S Don’t fret! Just copy from easings.net and cubic-bezier.com:

j Q u e r y . a n i m a t e ( ) R E C A P Cons • Lower performance since animation will run in the CPU • Additional (easy to remember) easings require jQuery UI or other easing plugin Pros • Callback function for extra control when animation is done. • Very backwards compatible 
 (IE6 support with jQuery 1.9 or earlier)

Cons • Need to mix & match with JS events: • Might miss the animation on page load. • No CSS-only “transitionend” callback. • CSS keyframe animations can get hairy. • No IE9 support. Pros • No real CSS change from the JS version. • Automatically hardware accelerated. • CSS-only solution for :hover rollovers. R E C A P C S S 3 Tr a n s i t i o n s

B ro w s e r s u p p o r t C S S 3 T R A N S I T I O N S http://caniuse.com/#feat=css-transitions

Fe a t u r e d e t e c t i o n C S S 3 T R A N S I T I O N S For backwards compatibility, use Modernizr: JS 
 if  (Modernizr.csstransitions)  {
    $('.slider').css({left:targetX});
 }else{
    $('.slider').animate({left:targetX},  200);
 } CSS 
 .slider  {
    position:  relative;
    left:  0;
    transition:  left  200ms  
        cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 }
 HTML 


TWITTER @PearlChen GOOGLE+ klab.ca/+ P E A R L C H E N T h a n k y o u ! 
 ( D e m o s : g i t h u b . c o m / p e a r l c h e n / a n g u l a r- d e m o s ) F I N