Angular 1.3

Slides live at
http://sfroestl.github.io/angular-13-talk/#/

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.
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