React Native Vs Ionic - Which One Is a Better Mobile App Development Framework
Rapid mobile app development using Ionic framework
-
Upload
svswaminathan -
Category
Software
-
view
96 -
download
1
Transcript of Rapid mobile app development using Ionic framework
![Page 1: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/1.jpg)
Rapid mobile app development using Ionic framework
Swaminathan VetriSenior Engineer at Target | Microsoft MVP
![Page 2: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/2.jpg)
About me
• Senior Engineer @ Target• Microsoft MVP - Visual Studio & Development
technologies• Windows/Web/Cross platform mobile developer• Blogger, Speaker, Amateur Photographer, Gadget Freak
photographer, Gadget freak
@svswaminathan
wannabeegeek.com
![Page 3: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/3.jpg)
![Page 4: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/4.jpg)
Objective
What is Ionic ?Why Ionic?What it offers ?How it speeds up mobile app development ?Demos, Demos and Demos …
![Page 5: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/5.jpg)
IONIC IS THE BEAUTIFUL, OPEN SOURCE SDK FOR DEVELOPING NATIVE AND PROGRESSIVE
WEB APPS
![Page 6: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/6.jpg)
Why Ionic ?
![Page 7: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/7.jpg)
Where does Ionic fit in ?
Your App
Ionic
Angular JS
Cordova
Native SDK
![Page 8: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/8.jpg)
MORE THAN CODE.IONIC IS AN ECOSYSTEM
![Page 9: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/9.jpg)
Mobile app development with Ionic
Idea
Prototype
BuildDistribute
Monitoranalytics
![Page 10: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/10.jpg)
What Ionic offers ?
![Page 11: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/11.jpg)
Ionic CreatorCreator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.
![Page 12: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/12.jpg)
LETS CREATE
![Page 13: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/13.jpg)
Ionic CLI Install ionic from npm
npm install –g ionic cordova ionic start ionic serve Ionic build ionic emulate/run ionic resources ionic docs ionic upload ionic share and many more and more …
![Page 14: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/14.jpg)
LETS COMMAND
![Page 15: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/15.jpg)
ToolingIonic playground – can be used as a REPL for
learning IonicIonic Lab – Desktop app to create ionic appsAny text editor of your choice
Visual Studio 2015VS CodeSublime TextAtomVimEmacs etc.,
![Page 16: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/16.jpg)
Ionic frameworkJS componentsCSS componentsIon iconsngCordova/Ionic nativeIonic Cloud
![Page 17: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/17.jpg)
JS Components Action Sheet Backdrop Popup Popover Modal Loading Spinner Slide box Tabs Side Menus Navigation Header Footer
Form inputs ion-checkbox ion-radio ion-toggle
Lists ion-list ion-item ion-delete-button ion-option-button ion-reorder-button collection-repeat
ion-refresher ion-pane ion-content
and many more and more ….
![Page 18: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/18.jpg)
CSS Components Header Footer Buttons List Cards Form inputs Toggle Range Select Tabs Grid
and many more and more ….
![Page 19: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/19.jpg)
ngCordova/Ionic Native ngCordova gives simple AngularJS wrapper for most commonly used
cordova plugins to make app development efficient and faster Barcode scanner Camera TouchID Oauth iBeacon Social Sharing Push notifications Progress indicators and many more and more …
Ionic Native is ngCordova’s ES6 and Typescript equivalent focused more for ng2 and Ionic v2 apps
![Page 20: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/20.jpg)
LETS BUILD
![Page 21: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/21.jpg)
Ionic CloudUsers - User authenticationPush - Push notificationsDeploy - Live app deploymentPackage - Native app packagingOther services in alpha/beta
Analytics - To capture the various telemetry about the appDeep linking – To easily link to content hidden deep inside the
app
and many more and more ….
![Page 22: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/22.jpg)
Ionic View Ionic View makes it easy to share your Ionic and
Cordova apps with clients and testers around the world, all without ever going through the App Store.
Sign up at apps.ionic.ioRun the below ionic CLI commands
ionic upload ionic share <email>
![Page 23: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/23.jpg)
LETS VIEW
![Page 24: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/24.jpg)
Useful links Ionic creator - http://ionic.io/products/creator
Ionic lab - http://lab.ionic.io/
Ionic playground – http://play.ionic.io/
Ionic framework– http://ionicframework.com/docs/
Ionic cloud– http://docs.ionic.io/
Ionic view – http://view.ionic.io/ Ionic market place - https://market.ionic.io/Demo code -
https://github.com/svswaminathan/ionic-mods16-demo
![Page 25: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/25.jpg)
Questions/Feedback
@svswaminathan
![Page 26: Rapid mobile app development using Ionic framework](https://reader035.fdocuments.in/reader035/viewer/2022062821/58a3bd681a28ab62218b6131/html5/thumbnails/26.jpg)