ng-Goodies

the new tools from ngEurope

Florian van der Wielen / @FlorianvdWielen

ui-router

ng-route sucks!

  • using URL for navigation only
  • limited in capabilities

ng-route 2.0

  • new router for angular, by angular
  • 2.0, but also 1.3
  • not finished yet...

angular-ui/ui-router

  • much more flexible
  • navigation based on states, so conceptually different,
  • concept is stronger, more expressive, matches better on a conceptual level

Features

  • Nesting of navigation states
  • Parallel navigation states
  • Extensibility through decorators
  • More...

ng-aria

http://marcysutton.github.io/angular-a11y

#a11y

  • Write meaningful HTML
  • Enable the keyboard
  • Handle focus
  • Alert the user
  • Coverage with tests

ngAria

"The ngAria module provides support for adding ARIA attributes that convey state or semantic information about the application in order to allow assistive technologies to convey appropriate information to persons with disabilities"

simply add:


                            
                        

                            angular.module('app', ['ngAria']);

ARIA attributes

  • Role: what does this thing do?
  • State & preprty: the current condition of this particular thing

ng-hint

prevent silent errors

Simply add


                            <html ng-app='sample' ng-hint>
                                
                            <html>

hints on

  • Controllers
  • Directives
  • DOM
  • Events
  • Interpolation
  • Modules

hints on

  • deprecated API
  • naming conventions
  • DOM manipulation
  • identifiers that are undefined on the scope
  • misspelling

implemented via decorators

Dgeni

documentation on steroids

docs matter!

stale docs fail...

Generate!

implementation

DI.js

documentation pipeline

Documentation pipeline

chain of processors modifying source code to doclets

  • filtering
  • parsing
  • templating

Projects using Dgeni

  • Angular
  • Protractor
  • Angular Material
  • Ionic

Traceur

Transpiler to javascript

What's the use

Use features from the future today

Write simpler, cleaner code and less boiler plate

ECMAscript Harmony features

  • Classes, Modules
  • Deconstruction statement, Default parameters, Computed property names
  • More...

AtScript

  • Annotations: declarative metadata
  • Annotate types, fields
  • Validations through introspection
  • Optional, backwards compatible

Benchpress

"Is this code fast enough?"

60 fps web apps

macro benchmarks

A good benchmark is...

  • Meaningful
  • Actionable
  • Accessible

https://github.com/angular/benchpress

In development, frequent breaking changes

Fin