Angular2 + TypeScript, or where is front-end development going to?

You can find docs about ng2 / ts literally everywhere. So let's forget about docs and let's just focus on broader view.

Transcript

1. Angular2 + TypeScript …or where is front-end development going to? Przemek Smyrdek
2. - easy
3. - ng2, cool Wheel of Front-end Fortune
4. https://angular.io/
5. Components Isomorphic Apps Banana in a box Single-Page Apps JIT Webpack Two-way binding Angular CLI Mobile Routing Angular2 vs React Transpiling AOT DI TypeScript One-way binding Migration paths Redux Immutable structures Observables
7. https://www.typescriptlang.org/
8. Strongly typed Enums Inheritance Typings Classes TypeScript vs Flow Used in Angular2 Tooling .d.ts Superset Interfaces Transpiling Generics Modules
9. - not easy
11. Expert Beginner
12. How Why >
13. Angular2 + TypeScript …or where is front-end development going to?
14. Angular2 + TypeScript …or where is front-end development going to?
15. Angular2 + TypeScript …or where is front-end development going to?
16. @psmyrdek Hi, my name is Przemek
17. Evolution of Front-End Architecture
18. 'In the beginning was the Word DOM’
19. Stage I – DOM-based apps • 'We have the DOM. We should definitely use it.’ • Presentation mixed with business logic • JS criticized for propagation of bad practices
20. bindEvents: function () { $('#new-todo').on('keyup', this.create.bind(this)); $('#toggle-all').on('change', this.toggleAll.bind(this)); $('#footer').on('click', '#clear-completed', this.destroyCompleted.bind(this)); $('#todo-list') .on('change', '.toggle', this.toggle.bind(this)) .on('dblclick', 'label', this.edit.bind(this)) .on('keyup', '.edit', this.editKeyup.bind(this)) .on('focusout', '.edit', this.update.bind(this)) .on('click', '.destroy', this.destroy.bind(this)); }
21. Evolution of Front-End Architecture DOM
22. Stage II – Model-View-Whatever • Let’s separate concerns! • Let’s take a look at the… back-end guys! • MV*-all-the-things
23. <section class="todoContainer" ng-controller="TodoController as ctrl"> <input type="text" ng-model="ctrl.todoText"> <ul> <li ng-repeat="todoItem in ctrl.todoItems" ng-click="ctrl.toggleTodo(todoItem)"> </li> </ul> </section>
24. Evolution of Front-End Architecture DOM MV*
25. Stage III – World of the Components • Front-end needs more granular approach to build apps • Data flow should be predictable • How to make our code more reusable?
26. <todo-app> <todo-input></todo-input> <todo-list> <todo-item></todo-item> ... </todo-list> </todo-app>
27. <todo-app> <todo-input></todo-input> <todo-list> <todo-item></todo-item> ... </todo-list> </todo-app>
28. <todo-app> <todo-input></todo-input> <todo-list> <todo-item></todo-item> ... </todo-list> </todo-app>
29. <todo-app> <todo-input></todo-input> <todo-list> <todo-item></todo-item> ... </todo-list> </todo-app>
30. Evolution of Front-End Architecture DOM MV* C
31. New architecture === New way of thinking
32. Speaking about Angular(s)…
33. Evolution of Front-End Architecture vs Angular 1.x DOM MV* C
34. <section ng-controller="ProfileController as ctrl"> <p>{{ctrl.userName}}</p> <button ng-click="ctrl.saveProfile()"></button> </section> function ProfileController() { var ctrl = this; ctrl.userName = 'John Doe'; ctrl.saveProfile = function() { ... }; }
35. Evolution of Front-End Architecture vs Angular 1.x DOM MV* C
36. angular.directive('userProfile', function() { return { ... link: function(scope, element, attributes, controller) { var title = angular.element(element.children()[0]); ... } }; });
37. Evolution of Front-End Architecture vs Angular 1.x DOM MV* C
38. angular.component('userProfile', { templateUrl: 'userProfile.html', controller: UserProfileController, bindings: { name: '<' } }); <user-component name="ctrl.someName"></user-component>
39. • DOM manipulations and custom elements created by directives • Strong coupling with MV* approach (ng-controller) • Components introduced in Angular 1.5 Evolution of Front-End Architecture vs Angular 1.x
40. Not only architecture has changed…
41. • Single Page Applications • Mobile • Performance • Server-side rendering • And more… New ideas of front-end world
42. Angular 1.x is good in most of these areas …but it wasn’t designed for them.
43. What about JavaScript?
44. • Maintenance costs are too high • Refactoring of projects greater than 10 LOC is 'a pain in the…' • Tools / IDEs have problems with dynamically typed languages What about JavaScript?
45. Angular team’s challenge: Should we create a modern web framework in a not-so-modern language?
46. • TypeScript 2.0 • Types, Interfaces, Classes, Generics, Enums, Modules, Decorators • More than just a compiler • Open sourced, community driven • e-Bay, JetBrains, Sky, Ubisoft, Wix, Angular, Ionic, Aurelia TypeScript – JavaScript that scales
47. • Block-scoped variables with let and const • Supports inheritance and composition patterns (extends and implements) • Public, private and protected accessors • Arrow functions • Generics with constraints • Module system TypeScript – JavaScript that scales
48. TypeScript – JavaScript that scales interface Person { firstName: string; lastName: string; } class Worker implements Person { constructor( public firstName: string, public lastName : string ){} greeting(): void { alert(`Hello, my name is ${this.firstName} ${this.lastName}`); } }
49. TypeScript – JavaScript that scales npm install –g typescript tsc someFile.ts //creates someFile.js tsc –w //watch
50. TypeScript – JavaScript that scales tsconfig.json– TypeScript compiler configuration { "compilerOptions": { "module": "system", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "outFile": "../../built/local/tsc.js", "sourceMap": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] }
51. • Well-designed modern web language • New language features don’t ruin your compatibility • IDE tooling (refactoring, navigation, and so on) • Save time for maintenance and refactoring • Just save money Why TypeScript?
53. Introducing…
54. Angular2 15.09.2016
55. • Cross-platform development experience • Optimized for performance • Best available tools Angular2 – modern front-end development platform
56. Bootstrapping
57. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from './app.module'; platformNativeScriptDynamic().bootstrapModule(AppModule);
58. Modules - how to group things AppComponent ProfilesComponent SettingsComponent AdminComponent ListComponent DetailsComponent AppModule
59. import { NgModule } from '@angular/core'; @NgModule({ imports: [ … ], providers: [ … ], declarations: [ … ], exports: [ … ], bootstrap: [ AppComponent ] }) export class AppModule { }
60. Components – building blocks of ng2 app AppComponent ProfilesComponent SettingsComponent AdminComponent ListComponent DetailsComponent
61. Basic structure
62. class PersonComponent { firstName: string; lastName: string; greeting(): void { alert(`Hello, ${this.firstName} ${this.lastName}!`); } }
63. @Component({ moduleId: module.id, selector: 'person', styleUrls: [ 'person.component.css' ], templateUrl: 'person.component.html', providers: [ PeopleService ] }) class PersonComponent { firstName: string; lastName: string; greeting(): void { alert(`Hello, ${this.firstName} ${this.lastName}!`); } }
64. import { Component } from '@angular/core'; import { PeopleService } from './PeopleService'; @Component({ moduleId: module.id, selector: 'person', styleUrls: [ 'person.component.css' ], templateUrl: 'person.component.html', providers: [ PeopleService ] }) class PersonComponent { firstName: string; lastName: string; greeting(): void { alert(`Hello, ${this.firstName} ${this.lastName}!`); } }
65. Lifecycle hooks
66. ngOnChanges ngOnInit ngOnDestroy and more… import { Component, OnInit } '@angular/core'; @Component({ ... }) export class SomeClass implements OnInit { ngOnInit(): void { ... } }
67. Data binding / Template syntax
68. <person [name]="someProperty"></person> class PersonComponent { @Input() name: string; }
69. <todo (removed)="someAction()"></todo> class TodoComponent { @Output() removed: EventEmmiter<any> = new EventEmitter(); ... // this.removed.emit(null); }
70. <person [name]="someProperty"></person> <todo (removed)="someAction()"></todo>
71. <input [(ngModel)]="firstName" />
72. <div *ngIf="someProperty"></div> <div *ngFor="let item of items">{{item}}</div> <span [ngSwitch]="someEnum"> <span *ngSwitchCase="'one'">One</span> <span *ngSwitchCase="'two'">Two</span> <span *ngSwitchCase="'three'">Three</span> </div>
73. Cool new features
74. Angular CLI • npm install –g angular-cli • ng new PROJECT_NAME • ng serve • ng g component component-name • ng g service service-name • and so on… Command line utility for building ng2 apps
75. Ahead of Time (AOT) compilation JIT AOT -Let’s take a ride…
76. Ahead of Time (AOT) compilation • Compiler inlines html templates and css stylesheets • Clients don’t have to download compiler code • Template errors can be found during build step • Only needed code is being built (tree shaking) Compile your code during build process
77. Zones Easier way to control code running outside of Angular function TestController() { var ctrl = this; ctrl.firstName = 'Przemek'; window.setTimeout(function() { ctrl.firstName = 'Tomek'; }, 1000); } function TestController($timeout) { var ctrl = this; ctrl.firstName = 'Przemek'; $timeout(function() { ctrl.firstName = 'Tomek'; }, 1000); }
78. Zones Easier way to control code running outside of Angular constructor(zone: NgZone) { const mql: MediaQueryList = window.matchMedia('(min-width: 600px)'); mql.addListener((mql: MediaQueryList) => { zone.run(() => { this.text = 'Screen Width: ' + (mql.matches ? ' GREATER' : 'LOWER'); }); }); } http://blog.assaf.co/angular-2-change-detection-zones-and-an-example/
79. And more… • Improved DI • Angular Router • Redux / Reactive patterns friendly • Angular Material 2 • Angular Testing Utilities • Angular Universal
80. Lessons learned • Front-end development isn’t only about changing colours of the buttons • Keep the right balance between 'why' and 'how' approaches • Angular2 is production ready and it’s pretty damn hot!
81. - easy
82. Thanks!