Futureproof angular 1.x applications - yannick houbrix
1 like1,065 views
The document discusses strategies for ensuring the longevity of Angular 1.x applications, emphasizing a smoother migration to Angular 2, improved maintainability, and reduced external dependencies. It highlights the use of tools like Webpack for managing scripts and tasks, the importance of adopting TypeScript for better development practices, and the benefits of separating framework from business logic. Additionally, it mentions testing integrations and acknowledges some limitations, including costs associated with certain productivity tools.
![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](https://image.slidesharecdn.com/futureproofangular1-160408073944/85/Futureproof-angular-1-x-applications-yannick-houbrix-44-320.jpg)
Futureproof angular 1.x applications - yannick houbrix
- 1. Future proof Angular 1.x applications
- 2. Yannick Houbrix Technical Expert at Axxes @Sh33dafi #AxxesCC
- 3. Why?
- 4. Angular 2
- 7. Easier for new developers
- 9. …
- 12. No need for global dependencies
- 13. Windows, Linux & OS X
- 14. Shell + Node executables + Node scripts
- 15. Standard tasks { "scripts": { "start": "webpack --config webpack/webpack.dev.js", "test": "karma start --single-run", } }
- 16. Custom tasks { "scripts": { "foo": "echo Here be foo”, "hello": "node hello.js" } }
- 17. { "scripts": { "prebar": "echo PRE-BAR", "bar": "echo BAR", "postbar": "echo POST-BAR" } } Lifecycle scripts
- 22. One tool to rule them all
- 23. Most bower dependencies also a NPM package
- 25. Use local npm registry
- 28. BUT
- 29. NPM packages don’t work in browser
- 31. …
- 36. Latest version of angular (1.5.x)
- 37. Use Angular 2 insights
- 38. Eliminate $scope
- 42. • Type system • Eliminate errors • IDE Support • Classes • Modules • ES6 Feature support • Designed for enterprise applications
- 43. Try to keep framework and business logic separated
- 44. 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
- 46. TDD
- 47. WallabyJS
- 49. Not free :(
- 50. Good support
- 52. #AxxesCC