futureproof angular 1.x applications - yannick houbrix

Future proof Angular 1.x applications

Yannick Houbrix Technical Expert at Axxes @Sh33dafi #AxxesCC

Why?

Angular 2

Easier migration path

Maintainability

Easier for new developers

…

Reduce external dependencies

No need for global dependencies

Windows, Linux & OS X

Shell + Node executables +

Node scripts

Standard tasks

{ "scripts": { "start": "webpack --config webpack/webpack.dev.js", "test": "karma start --single-run", } }

Custom tasks

{ "scripts": { "foo": "echo Here be foo”, "hello": "node hello.js" } }

{ "scripts": { "prebar": "echo PRE-BAR", "bar": "echo BAR", "postbar": "echo POST-BAR" } }

Lifecycle scripts

One tool to rule them all

Most bower dependencies also a NPM package

Reduce external dependencies

Use local npm registry

Proxy prevent left-pad issues

Patched external dependencies

BUT

NPM packages don’t work in browser

…

Javascript

HTML

CSS

Images

TRAN

SFO

RM

Webpack bundle

Latest version of angular (1.5.x)

Use Angular 2 insights

Eliminate $scope

controllerAs syntax

Component base architecture

TypeScriptsuperset of javascript

• Type system

• Eliminate errors

• IDE Support

• Classes

• Modules

• ES6 Feature support

• Designed for enterprise applications

Try to keep framework and business logic separated

import "angular"; import {HelloWorldService} from "./services/HelloWorldService"; angular.module("com.github.sh33dafi.app", []) .service("HelloWorldService", HelloWorldService);

index.ts

export class HelloWorldService { public sayHello(): string { return "Hello world!"; }}

HelloWorldService.ts

TDD

WallabyJS

Productivity Boost

Not free :(

Good support

#AxxesCC