Angular 1.3 – Superluminal-nudge

||

The best Angular yet!

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)

Huge performance improvements!

Benchmarking tool Benchpress

github.com/angular/benchpress

One time bindings

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

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

Hello {{::name}}

Hello {{name}}




  
Hello {{::name}}

  
Hello {{name}}

Used within any Angular expression



  • {{friend}}

ngModel options

Facts

  • Tune how your model updates
  • Debounce update
  • Specify custom events like focus, blur or default

debounce: {'default': 1000}

Search: {{query}}



Search: {{query}}

updateOn: 'blur'

Name: {{name}}



Name: {{name}}

ngModel $validators

Facts

  • Write custom, reusable validators
  • Use $asyncValidators for server-side validation
  • Great in combination with ngModel options
  • Async validators wait for other validators

$asyncValidators

Your field is too short

Your field is too long

Checking Server… 


.directive('available', function ($timeout) {
    return {
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.available =
            function (username) {
                return $timeout(function () {
                    return true;
                }, 1000, false);
            };
        }
    };
});

ng-messages

Why

  • Easier form validation
  • Avoid complex ng-if or ng-switch statements

Facts

  • Show just one error message by default
  • Separate module "angular-messages.js"
  • Can be included from template with ngMessageInclude

ngMessages

Your field is too short

Your field is too long

No whitespace allowed

 


	
…

	
…

	
…

ng-animate

  • 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

$animate.animate()


element.on('click', function (e) {

    $animate.animate(angular.element(indicator), {}, {
        left: e.offsetX + 'px',
        top: e.offsetY + 'px'
    }, 'is-animating');

    $scope.$digest();
});

Performance tipp:


$compileProvider.debugInfoEnabled(false);

Disables classes like "ng-binding, ng-scope" (used by protractor, batarang etc.)

What about migrating to 1.3?

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

Problems:

None.

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

Quick look at Angular 2

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

Should I wait for Angular 2.0?

No.

… But

  • Stay tuned for changes
  • Write good Angular apps (use styleguides, patterns)
  • There will be a migration guide!

Thanks!

Sebastian Fröstl @sfroestl

Kolja Lange @koljalange

References

FYI AngularJS Styleguides