Angular 2: What s new? Jonas Bandi, IvoryCode GmbH

Transcription

1 Angular 2: What s new? Jonas Bandi, IvoryCode GmbH

2 Once upon a time

3 the world was peacefully creating applications with AngularJS

4 but change was lurking in the maze of a mailing list

5 then the threat became real ng-europe, October 2014

6

7

8 Forget anything you know about AngularJS?

9 About me Jonas Bandi - Freelancer: - Dozent an der Berner Fachhochschule seit Trainer bei Digicomp für AngularJS und Angular 2 - In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS, Postfinance, Mobiliar, BIT, SBB... )

10 AngularJS is a powerful Framework but it is old!

11 LoDash React Angular 2 Bootstrap AngularJS

12

13 The web has changed since

14 Angular 2 is a new implementation of the concepts behind AngularJS for the modern web. but Angular 2 is not an update to AngularJS.

15 Angular 2 is built upon the modern web: web workers - shadow dom Angular 2 is built for the modern web: mobile browsers modern browsers server-side rendering Angular 2 improves over AngularJS: faster easier to use & learn built on proven best practices (i.e. uicomponents, unidirectional data flow )

16 The core concepts of Angular 2 are clean and easy to learn

17

18 Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) directives data-binding services dependency injection components components directives data-binding / data-flow services dependency injection

19 Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) components JavaScript Function DDO ES2015 class

20 ToDo-App Component New-ToDo Component ToDo-List Component

21 Angular 2 Components Components are the main building-block of Angular 2. + Template Class Metadata = Component

22 A Simple Component import {Component} selector: 'my-app', template: '<h1>my First Angular 2 App</h1>' }) export class AppComponent { }

23 AngularJS Angular 2 Controller -> Component var app = angular.module('todoapp'); app.controller('todocontroller', ToDoController); ToDoController.$inject = ['ToDoService']; function ToDoController(todoService) { var ctrl = this; ctrl.newtodo = new ToDoItem(); ctrl.todos = selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoservice:todoservice){} ngoninit() { this.todos = this.todoservice.loadtodos(); }...

24 AngularJS Angular 2 Component (ng 1.5) -> Component var app = angular.module('todoapp'); app.component('todoapp', { templateurl: 'todo-app.html', controller: TodoAppComponent }); ToDoController.$inject = ['ToDoService']; function TodoAppComponent(todoService) { var ctrl = this; ctrl.newtodo = new ToDoItem(); ctrl.todos = selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoservice:todoservice){} ngoninit() { this.todos = this.todoservice.loadtodos(); }...

25 Directives & Components A directive is a construct, that is embedded into html and has a special meaning for the framework. Directives Components Structural Directives Attribute Directives Component is a composes Directive

26 Angular Key Concepts AngularJS Angular 2 directives directives a lot of directives (i.e ng-click, ng-focus, ng-blur, ng-keyup ) many directives from ng1 are not needed in ng2 templates

27 AngularJS vs. Angular 2: Directives The generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete. AngularJS Angular 2 <div ng-style={color:'red'}> <img ng-src="{{ctrl.path}}"> <a ng-href= {{ctrl.link}}"> ng-click="saveperson(person)" ng-focus="updatesummary()" ng-blur="commit()" ng-keyup="updatecalculation()" <div [style.color]="color"> <img [src]="path"> <a [href]="link"> (click)="saveperson(person)" (focus)="updatesummary()" (blur)="commit()" (keyup)="updatecalculation()"

28 Structural Directives Use html as a template AngularJS Angular 2 ng-repeat, ng-if *ngfor, *ngif <ul class="todo-list" > <li ng-repeat="todo in ctrl.todos"> {{todo.title}} <button class="remove-button" ng-click="ctrl.removetodo(todo)"> x </button> </li> </ul> <ul class="todo-list" > <li *ngfor="let todo of todos"> {{todo.title}} <button class="remove-button" (click)="removetodo(todo)"> x </button> </li> </ul>

29 Angular Key Concepts AngularJS Angular 2 data-binding data-binding / data-flow generic property & event binding interpolation & 2-way databinding interpolation & 2-way databinding $scope uni-directional data-flow

30 Databinding DOM (Template) Interpolation {{value}} Property Binding [property]="value" Event Binding (event)="handler" Two Way Binding [(ngmodel)]="value" component

31 Nested Components: Uni-Directional Data-Flow State should be explicitly owned by a component. Parent Component Child Component state properties go Child Component logic out events come A parent component passes state to children Children should not edit state of their parent Children notify parents (events, actions ) Angular formalises unidirectional data-flow properties.

32 Angular Key Concepts AngularJS Angular 2 services services a function registered as factory, service or provider ES2015 class

33 Services Objects that perform a specific job. AngularJS Instantiated by Angular. Angular 2 var app = angular.module('todoapp'); app.factory('todoservice', todoservice); function todoservice() { 'use strict'; return { gettodos: gettodos, addtodo: addtodo, removetodo: removetodo export class ToDoService { loadtodos():array<todo> { var loadedtodos = JSON.parse( localstorage.getitem(todos_key) ); return loadedtodos []; }...

34 Angular Key Concepts AngularJS Angular 2 dependency injection DI based on naming dependency injection DI based on types (using TypeScript and Decorators) Singletons Hierarchical DI

35 Dependency Injection AngularJS Angular 2 registration: var app = angular.module('todoapp'); app.factory('todoservice', todoservice); function todoservice() {... export class ToDoService {... } injection: app.controller('todocontroller', ToDoController); ToDoController.$inject = ['todoservice']; function ToDoController(todoService) {... selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { constructor(private todoservice:todoservice){}... }

36 controllers components (ng 1.5) directives data-binding services dependency injection Angular Key Concepts AngularJS Angular 2 components components Many key concepts remain the same. directives data-binding / data-flow services dependency injection But the implementation has changed.

37 There is more AngularJS Angular 2 filters Pipes http with Promises http with RxJs (Promises still supported) Routing (template centered) Hierarchical Component Router

38 The core concepts of Angular 2 are clean and easy to learn but setting up a full Angular project can be quite complicated today.

39 Angular JS

40 AngularJS: an effective tool but not elegant

41 SystemJS 2015 jspm webpack Angular 2

42 Angular is distributed through NPM To get Angular on your development machine, you have to install Node.JS. Node Package Manger

43 Multi-Language ES5 2015

44 Language Choices no com- pilation compilation ES weakly typed (optional) strongly typed

45 To pack or (not) to pack? Angular for ES2015 & TS relies on ES2015 modules. There is no support for ES2015 modules in browsers today. A module-system is mandatory. VS. SystemJS

46 Build Toolchain Typically you need a front-end build for transpilation and module bundling.

47 Angular 2 aspires to be a platform classic web-apps for desktops server side rendering progressive web-apps for mobile (web workers, cache, push, offline) dev tooling installed mobile apps (hybrid) installed mobile apps (native integrations) installed desktop apps

48 Is Angular 2 ready for production? October 2014: Initial announcement of Angular 2 December 2015: Angular 2 released as beta May 2016: Angular 2 Release Candidate 0 June 2016: Angular 2 Release Candidate 2 What is missing: - Router (!) - Offline Compilation & Build Toolchain - internationalization - 3rd Party Ecosystem

49 The Router Debacle - Dez 2014: New Router announced for Angular 1.4 and Angular 2 - June 2015: New Router is deprecated - Angular 2 beta is developed with the Component router - March 2016: Component Router is released for Angular May 2016: Component Router is deprecated. Router 2.0 is part of Angular 2 RC1 - June 2016: Router 2.0 is deprecated, Router 3.0 is announced

50 Questions? Jonas Bandi Tomorrow: DevDay Workshop - Hands On Angular 2 Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript