IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE...
Transcript of IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE...
![Page 1: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/1.jpg)
![Page 2: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/2.jpg)
IONIC V2
Mike Hartington | @mhartington
![Page 4: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/4.jpg)
Side Menus
Tabs
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List
Collection Repeat
Popup
Popover
Loading Overlay
Inputs
Buttons
Form Controls
The beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
![Page 5: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/5.jpg)
![Page 6: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/6.jpg)
ONE MILLION apps built with the SDK
Ionic apps top app store charts
Used everywhere from
YC/TechStars companies to Fortune 50 co’s
![Page 7: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/7.jpg)
But I though the web and hybrid apps were slow?
Maybe a few years ago, but...
![Page 8: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/8.jpg)
A LOT'S CHANGED
Better APIs
ES6/ES7 & Typescript
Better Devices & OSs
Did I mention ES6?!
![Page 9: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/9.jpg)
ANGULAR 2
![Page 10: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/10.jpg)
Angular 1 - getting long in the tooth
Lot of NG specific APIS for yesterday's browser
Wasn't built for ES6/7
![Page 11: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/11.jpg)
NG-EUROPE
RIP $scope, Directives, Controllers, Service
![Page 12: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/12.jpg)
angular.module('MainController', [])
.controller('MainCtrl',function($scope){ $scope.items = [1,2,3]; $scope.add = function(){ $scope.items.push($scope.items.length + 1) } })
NG1 APIs
![Page 13: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/13.jpg)
ES6 Class
export class MainController { constructor(){ this.items = [1,2,3]; } add(){ this.items.push(this.items.length + 1) } }
![Page 14: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/14.jpg)
TEMPLATES
![Page 15: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/15.jpg)
NG1 Template
<div ng-controller="MainCtrl"> <p ng-repeat="item in items">{{item}}</p> <button ng-click="add()">Add item</button> </div>
![Page 16: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/16.jpg)
@Component({ selector: 'hello-app', template: ` <p *ngFor="#item of items">{{item}}</p> <button (click)="add()">Add item</button> `})
export class MainController { constructor(){ this.items = [1,2,3]; } add(){ this.items.push(this.items.length + 1) }}
![Page 17: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/17.jpg)
Controllers => Classes Directives => Components
Angular.module => ES6 Modules
![Page 18: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/18.jpg)
WELL, WHAT ABOUT IONIC?
![Page 19: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/19.jpg)
![Page 20: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/20.jpg)
Simplicity
Platform Continuity
Performance
Creative Freedom
Code once
![Page 21: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/21.jpg)
<ion-content>
<ion-list>
<ion-item>
<ion-avatart item-left>
<img src="img.png" />
</ion-avatart>
<p>User 1</p>
</ion-item>
</ion-list>
</ion-content>
SIMPLICITY
![Page 22: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/22.jpg)
@Page({ template: ` <ion-navbar> <ion-title>{{name}}</ion-title> </ion-navbar> <ion-content> Hi, my name is {{name}} </ion-content>`})export class Profile { constructor() { this.name = 'Mike'; }}
SIMPLICITY
![Page 23: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/23.jpg)
LET’S LOOK AT A REAL APP
![Page 24: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/24.jpg)
EVERYTHING FROM IONIC 1 IS IN IONIC 2
![Page 25: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/25.jpg)
JUST MUCH MORE POWERFUL
![Page 26: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/26.jpg)
WANT TO TRY IT OUT?
![Page 28: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/28.jpg)
GET STARTED WITH IONIC
Ionic Documentation
Ionic Forum
Ionic Slack Signup
Contribute on GitHub
![Page 29: IONIC V2 - chariotsolutions.com · for developing hybrid mobile apps with web technologies. ONE MILLION apps built with the SDK Ionic apps top app store charts Used everywhere from](https://reader030.fdocuments.us/reader030/viewer/2022011900/5ee14d0aad6a402d666c3b2b/html5/thumbnails/29.jpg)
https://github.com/mhartington/PhillyETE2016
</HTML>
@mhartington