ionic framework and typescript
TRANSCRIPT
THE SILVER BULLET FOR IONIC1
David Hohl www.fishme.de@fishme2010
Meetup 08.12.2016
Technology Evangelist
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Since 1998 web developer• Evangelist for…• Cordova with Ionic• PHP for CMS
• Clients: NDR, Boston Consulting Group, Miele, Blick, Intersport, Update CRM, SPD, Adidas, Atomic, Comscore, Voest Alpine, Asus and more;
#RC – 03/1981
David Hohl
Yes, but not for you!
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
We want to talk about …
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
Why we should use Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Clean Code• Readable• Better reusable• Less bugs•OOP
I’m not your bug
Clean Code?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Good Structure• Ease to understand• Codebase• Readable• Class/Function/Var Naming• No scope soup• No root scope soup
I will write Typescript!
I will write Typescript!I will write Typescript!I will write Typescript!
Where can I use Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Service• Controller•Directive• Filter
Most common
ngModule.controller(Controller.ID, Controller);
ngModule.directive(Directive.ID, Directive);
ngModule = angular.module(’MobileApp.Application', ['ui.router', 'ionic', 'templates', 'ngMockE2E', 'pascalprecht.translate', 'ngSanitize', 'toastr', 'ngAnimate’]
ngModule.filter(Filter.ID, Filter);
ngModule.service(Service.ID, Service);
Where can I use Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Project•Helper
ngModule.run(…)ngModule.config(..)
Angular.run(…)Angular.config(..)
Automate it!
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
namespace MyProject.Servicenamespace MyProject.Controllernamespace MyProject.Directivenamespace MyProject.Filter
Example with a service_.each(Services, (Service: any) => { ngModule.service(ID, Service);}
TSD – Definition
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
tsd install angulartics
tsd update –s –o
tsd.json (config)
TSD – Holl(rr)ow(r) Bible?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Interfaces•Definition
• Important!
private $http: angular.IHttpService,private $location: ng.ILocationService,private $state: ng.ui.IStateService,private $rootScope: ng.IRootScopeService
this.$http(this.requestConfig).then((response: ng.IHttpPromiseCallbackArg<any>) => {….}));
https://palantir.github.io/tslint
TSD – Holl(rr)ow(r) Bible?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
•Way out? /* tslint:disable */ - Disable all rules for the rest of the file
/* tslint:enable */ - Enable all rules for the rest of the file
/* tslint:disable:rule1 rule2 rule3... */
/* tslint:disable:semicon, qutemark */
Object not define -> use instead as Array
https://palantir.github.io/tslint
Controller and viewModels 1/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Readable•OOP
export class AppController<T> { public scope: ng.IScope; public viewModel: T;
constructor(scope: ng.IScope, ModelType: { new (): T; }) { this.scope = scope; this.viewModel = new ModelType(); this.scope["controller"] = this; this.scope.$on("$ionicView.loaded", _.bind(this.view_loaded, this));this.scope.$on("$ionicView.enter", _.bind(this.view_enter, this));
export class AnimalController extends AppController<ViewModels.AnimalViewModel>{….}
Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Readable•OOP
export class AnimalViewModel {
public name: string;public age: number;
public YouNowOlder() { this.age++;}}
Controller… (same like $scope.name = ‘dog’;this.viewModel.name = ’dog’;
Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
ViewModel Animal
Controller Dog Controller Cat
viewModel.YouNowOlder() viewModel.YouNowOlder()
Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
ViewModel Animal
Controller Snake
viewModel.YouNowOlder()
ViewModel Reptile extend ViewModel.Animal
Controller and viewModels 3/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Create Models with functions•Reuseable! Clean Code! Enjoy it!
<button ng-click=”controller.viewModel.animalYouNowOlder()”> I’m {{viewModel.age}}</button>
Injection?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
public static get $inject(): string[] { return [ '$scope', '$rootScope', '$stateParams', Services.Tracking.ID ];}
constructor( $scope: ng.IScope, private $rootScope: IRootScopeService, private $stateParams: ISearchStateParams, private Tracking: Services.Tracking) { super($scope, ViewModels.SearchViewModel);}
Better Code
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
1) exampleif (animal === ‘dog’)
2) Declare where ever you can!
3) no return? public myAnimal(): void instead of any
4) Example don’t use >any<public myAnimal() : string | boolean { if (myVar) return ‘dog’; If (myVar) return true;}
Some Tipps and Tricks
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
• Use WebStorm• Use Getters & Setters• Don’t define functions in an interface• Use interface for JSONs or Objects• Use namespaces• Use let instead of var• Create for each Class a new File• Use Static instead of Public if it is possible• Callbacks: use “response => {}” instead of function(response) then
you can use this inside otherwise you have to copy the instance
Beginner Problems
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
•Which Type?•Where I can find it?•How to include Angular Code in Typescript?•Object not defined like
animal.name use animal[‘name’]
Documentation
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de
THE SILVER BULLET FOR IONIC1
David Hohl www.fishme.de@fishme2010
Meetup 08.12.2016
THANK YOU – ENJOY TYPESCRIPT!