futureproof angular 1.x applications - yannick houbrix
TRANSCRIPT
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