building ios app using meteor
TRANSCRIPT
![Page 1: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/1.jpg)
Building iOS App using
MeteorJSAshish
@ashish_fagna
![Page 2: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/2.jpg)
Agenda• Meteor Concepts• Ionic• Demo : iOS app using Meteor
![Page 3: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/3.jpg)
What is Meteor …
A reactive ,
data-synchronizing,
Latency-compensating,
time-saving platform.
for building fast, interactive web apps
![Page 4: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/4.jpg)
One codebase,all platformsOpen and extensible
100% pureJavaScript
Collaborative iOS and Android app<1000 lines of
JavaScript
A full-stack, open source platform for building web and mobile apps in JavaScript
Fast and fun development
What is Meteor…
![Page 5: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/5.jpg)
What's different ?
Traditional App
• Browser makes a request to server, http://example.com/items.html
•server responds with html code <html>
<p>Item 1</p>
<p>Item 2</p>
</html>
![Page 6: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/6.jpg)
What's different ?
Meteor App
•Browser subscribes (to items) from ServerSubscribe to items
•Also browser knows when new items added on
server.
•Response is :<p>Item 1</p>
<p>Item 2</p>
![Page 7: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/7.jpg)
What's different ?Meteor App
Latency Compensation
When adding new item by browser,
•local storage updated first,
•then send to server for update.
•Server then updates client “Everything went OK”
.
Hence Reactive.
![Page 8: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/8.jpg)
What's different ?Meteor App
Browser ServerAngular , Ember, Backbone, React,XMLHttpRequest,WebSocket,Sockjs,jQuery,BootStrap
Rails, Django,PHP,Node, Go, Express,MongoDB,MySQL,AppEngine, Postgres,Apache
![Page 9: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/9.jpg)
What's different ?
Meteor App
•Write all JavaScript (if you want to)
•Use the same APIs on client and server.
![Page 10: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/10.jpg)
Meteor componentsCommand Line Tool
View Layer – Blaze (Angular, React)
Livequery
Full stack package system – atmospherejs.com
Build system
Cordova/Phonegap
![Page 11: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/11.jpg)
MongoDB DOMServer Client
Message
s.insert(
)Messages.insert()
Meteor Data Flows
MinimongoOptimistic UI
MongoDB
![Page 12: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/12.jpg)
The Meteor Platform
App Microservices
PLATFORM
Blaze
Livequery
Client Data Cache
MongoDB SQL REST
App Components & Logic
React Angular
SERVER
CLIENT
SOURCES
DDP
MobileWeb
![Page 13: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/13.jpg)
Cordova, PhoneGap, & Ionic• Apache Cordova is community project, letting
you build mobile apps for various mobile platforms (HTML5, Javascript and CSS3)
• Phonegap is a version of Cordova but it's Adobe's product.
• Ionic Framework is a set of css classes and a library of Javascript directives and modules, built on top of Cordova, with AngularJS.
![Page 14: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/14.jpg)
Cordova v/s Native• Apache Cordova
–Hybrid Apps–Web wrapped in native–Native APIs–One code base, many platforms
• Native SDKs–Views–UI Components–Navigation–Transitions–Animations–Interactions
![Page 15: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/15.jpg)
Downside of Native
• Knowledge of each platform• Separate code bases• Expensive
![Page 16: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/16.jpg)
Ionic
![Page 17: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/17.jpg)
Ionic is “Bootstrap for Native”• Responsive• UI Components• Transitions• Icons
![Page 18: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/18.jpg)
Ionic for AngularJS• Ionic has been optimised for AngularJS
• AngularJS Features–Directives –Services–Interactions–Navigation and History–Animations and Transitions–Performance–Much More…
![Page 19: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/19.jpg)
Ionic Sample Code
![Page 20: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/20.jpg)
Lists
Ionic Lists
![Page 21: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/21.jpg)
Tabs• Nested views• Separate history• Angular UI Router
![Page 22: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/22.jpg)
Side Menu
![Page 23: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/23.jpg)
Navigation• Angular UI Router• Back button• Transitions
![Page 24: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/24.jpg)
Create a meteor app
1.meteor create <<APP_NAME>>
2.cd <<APP_NAME>
3.meteor //this runs the app at port 3000
![Page 25: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/25.jpg)
Add platform
Add platform to project• meteor add-platform ios• meteor add-platform android• meteor list-platforms
Install mobile specific packages• meteor add mdg:camera• meteor add mdg:geolocation• meteor add mdg:camera
![Page 26: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/26.jpg)
Run App
To run in simulator• meteor run ios
To run on device• meteor run ios -p <local port>
![Page 27: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/27.jpg)
Demo App
![Page 28: Building iOS app using meteor](https://reader036.vdocument.in/reader036/viewer/2022070515/587b68ed1a28ab38258b730b/html5/thumbnails/28.jpg)
Thank You