Save 37% off PRO during our Black Friday Sale! »

Angular 1.3

Angular 1.3

22bc5738bdbd25c6b779f523b43e951b?s=128

Sebastian Fröstl

November 12, 2014
Tweet

Transcript

  1. Angular 1.3 – Superluminal-nudge || The best Angular yet! &&

    Sebastian Fröstl Kolja Lange
  2. This talk is about {some} new features of Angular 1.3

    and a quick look on Angular 2. Be sure to check out the references for further information (this slide has been added afterwards)
  3. H u g e p e r f o r

    m a n c e i m p r o v e m e n t s !
  4. Visit source

  5. Benchmarking tool Benchpress github.com/angular/benchpress

  6. O n e t i m e b i n

    d i n g s
  7. Why? Data-binding is powerful, but Angular needs to watch each

    expression for changes Some bindings are just one-time reads More watchers slow down the digest loop (where angular resolves changes) Existing solutions: bindonce
  8. Facts 1. Evaluates the expression within the digest loop and

    stores the value 2. If the value is defined, mark as stable and deregister watcher 3. Continue the digest loop
  9. < d i v n g - i n i

    t = " n a m e = ' B e r l i n ' " > < p > H e l l o { { : : n a m e } } < / p > < p > H e l l o { { n a m e } } < / p > < i n p u t n g - m o d e l = " n a m e " > < / d i v >
  10. Used within any Angular expression < u l > <

    l i n g - r e p e a t = " f r i e n d i n : : f r i e n d s " > { { f r i e n d } } < / l i > < / u l > < p d a t a - t o o l t i p = " { { : : g e t T o o l t i p ( ) } } " > < / p >
  11. n g M o d e l o p t

    i o n s
  12. Facts Tune how your model updates Debounce update Specify custom

    events like focus, blur or default
  13. debounce: {'default': 1000} < h 3 > S e a

    r c h : { { q u e r y } } < / h 3 > < i n p u t n g - m o d e l = " q u e r y " n g - m o d e l - o p t i o n s = " { d e b o u n c e : { ' d e f a u l t ' : 1 0 0 0 } } " >
  14. updateOn: 'blur' < h 3 > N a m e

    : { { n a m e } } < / h 3 > < i n p u t n g - m o d e l = " n a m e " n g - m o d e l - o p t i o n s = " { u p d a t e O n : ' b l u r ' } " >
  15. n g M o d e l $ v a

    l i d a t o r s
  16. Facts Write custom, reusable validators Use $asyncValidators for server-side validation

    Great in combination with ngModel options Async validators wait for other validators
  17. $asyncValidators . d i r e c t i v

    e ( ' a v a i l a b l e ' , f u n c t i o n ( $ t i m e o u t ) { r e t u r n { r e q u i r e : ' n g M o d e l ' , l i n k : f u n c t i o n ( $ s c o p e , e l e m e n t , a t t r s , n g M o d e l ) { n g M o d e l . $ a s y n c V a l i d a t o r s . a v a i l a b l e = f u n c t i o n ( u s e r n a m e ) { r e t u r n $ t i m e o u t ( f u n c t i o n ( ) { r e t u r n t r u e ; } , 1 0 0 0 , f a l s e ) ; } ; } } ; } ) ;
  18. n g - m e s s a g e

    s
  19. Why Easier form validation Avoid complex ng-if or ng-switch statements

  20. Facts Show just one error message by default Separate module

    "angular-messages.js" Can be included from template with ngMessageInclude
  21. ngMessages Username < s p a n n g -

    m e s s a g e s = " f o r m . u s e r n a m e I n p < p n g - m e s s a g e = " m i n l e n g t h " > … < / p > < p n g - m e s s a g e = " m a x l e n g t h " > … < / p > < p n g -
  22. m e s s a g e = " p

    a t t e r n " > … < / p > < / s p a n >
  23. n g - a n i m a t e

  24. Tons of bugfixes No more need to set display property

    on ng-hide animations Better support for 3rd party animations New .animate() method Promises in JavaScript animations
  25. $animate.animate() e l e m e n t . o

    n ( ' c l i c k ' , f u n c t i o n ( e ) { $ a n i m a t e . a n i m a t e ( a n g u l a r . e l e m e n t ( i n d i c a t o r ) , { } , { l e f t : e . o f f s e t X + ' p x ' , t o p : e . o f f s e t Y + ' p x ' } , ' i s - a n i m a t i n g ' ) ; $ s c o p e . $ d i g e s t ( ) ; } ) ;
  26. Performance tipp: $ c o m p i l e

    P r o v i d e r . d e b u g I n f o E n a b l e d ( f a l s e ) ; Disables classes like "ng-binding, ng-scope" (used by protractor, batarang etc.)
  27. What about migrating to 1.3?

  28. We were afraid! Hybrid app, not a full SPA, other

    dependencies like jQuery Ancient jquery version 1.7 Angular app 20000+ LOC 132 directives, 90 controllers, 40 services No protractor tests Custom performance tunings, complexe directives
  29. Problems:

  30. None.

  31. None
  32. What helped us: Not many breaking changes Dropped support for

    IE8 some months ago Update to jQuery 2.1 was the tricky part Used styleguides + software patterns No crazy (stupid) customizations Already on latest 1.2.x version
  33. Q u i c k l o o k a

    t A n g u l a r 2
  34. Angular 2 Still in early state! Written in AtScript =

    ES6 + Dynamic types + Annotations Focus on mobile devices Keeps powerful features like Dependency Injection, testability New stuff like persistence layer, new router, components
  35. Should I wait for Angular 2.0?

  36. No.

  37. … But Stay tuned for changes Write good Angular apps

    (use styleguides, patterns) There will be a migration guide!
  38. Thanks! Sebastian Fröstl @sfroestl Kolja Lange @koljalange

  39. References ng-europe youtube channel At Script Sepc ng-europe Angular 1.3

    slides ng-forms ng aria guide Angular 2 blogpost Angular 2 status preview
  40. FYI AngularJS Styleguides AngularJS Style Guide by John Papa AngularJS

    Style Guide by Todd Moto Writing a Massive Angular App @ ng-conf