Angular 1.3 – Superluminal-nudge – || – The best Angular yet!

View Github Repository Open presentation in a new window

sfroestl

See all presentation from sfroestl

Angular 1.3 – Superluminal-nudge – || – The best Angular yet!

0 0

angular-13-talk

On Github sfroestl / angular-13-talk

Angular 1.3 – Superluminal-nudge

||

The best Angular yet!

Sebastian Fröstl && Kolja Lange

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!

Visit source

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

Evaluates the expression within the digest loop and stores the value If the value is defined, mark as stable and deregister watcher Continue the digest loop

Hello Berlin

Hello Berlin

<div ng-init="name='Berlin'">
  <p>Hello {{::name}}</p>
  <p>Hello {{name}}</p>
  <input ng-model="name">
</div>

Used within any Angular expression

<ul><li ng-repeat="friend in ::friends">{{friend}}</li></ul>

<p data-tooltip="{{::getTooltip()}}"></p>

ngModel options

Facts

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

debounce: {'default': 1000}

Search: 

<h3>Search: {{query}}</h3>
<input ng-model="query" ng-model-options="{debounce: {'default': 1000}}">

updateOn: 'blur'

Name: 

<h3>Name: {{name}}</h3>
<input ng-model="name" ng-model-options="{updateOn: 'blur'}">

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

.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

<span ng-messages="form.usernameInput.$error">
	<p ng-message="minlength">…</p>
	<p ng-message="maxlength">…</p>
	<p ng-message="pattern">…</p>
</span>

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