The silver bullet for Ionic 1 describe how to optimize existing Ionic 1 projects. Best practices, tipps and tricks for a better readable code and hybrid projects. Typescript and Angular are very good technology partner. by David Hohl

1. THE SILVER BULLET FOR IONIC1
David Hohl
www.fishme.de
@fishme2010
Meetup 08.12.2016

2. Technology Evangelist
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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

3. Yes, but not for you!
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -

4. We want to talk about …
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -

5. Why we should use
Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• Clean Code
• Readable
• Better reusable
• Less bugs
• OOP

6. Clean Code?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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!

7. Where can I use Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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);

8. Where can I use Typescript?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• Project
• Helper
ngModule.run(…)
ngModule.config(..)
Angular.run(…)
Angular.config(..)

9. Automate it!
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
namespace MyProject.Service
namespace MyProject.Controller
namespace MyProject.Directive
namespace MyProject.Filter
Example with a service
_.each(Services, (Service: any) => {
ngModule.service(ID, Service);
}

10. TSD – Definition
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
tsd install angulartics
tsd update –s –o
tsd.json (config)

11. TSD – Holl(rr)ow(r) Bible?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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

12. TSD – Holl(rr)ow(r) Bible?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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

13. Controller and viewModels 1/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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>{….}

14. Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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’;

15. Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
ViewModel Animal
Controller Dog Controller Cat
viewModel.YouNowOlder() viewModel.YouNowOlder()

16. Controller and viewModels 2/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
ViewModel Animal
Controller Snake
viewModel.YouNowOlder()
ViewModel Reptile extend ViewModel.Animal

17. Controller and viewModels 3/3
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• Create Models with functions
• Reuseable! Clean Code! Enjoy it!
<button ng-click=”controller.viewModel.animalYouNowOlder()”>
I’m {{viewModel.age}}
</button>

18. Injection?
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
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);
}

19. Better Code
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
1) example
if (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;
}

20. Some Tipps and Tricks
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• 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

21. Beginner Problems
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -
• Which Type?
• Where I can find it?
• How to include Angular Code in Typescript?
• Object not defined like
animal.name use animal[‘name’]

22. Documentation
Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl -

23. THE SILVER BULLET FOR IONIC1
David Hohl
www.fishme.de
@fishme2010
Meetup 08.12.2016
THANK YOU – ENJOY TYPESCRIPT!