building ios app using meteor
Post on 15-Jan-2017
239 Views
Preview:
TRANSCRIPT
Building iOS App using
MeteorJSAshish
@ashish_fagna
Agenda• Meteor Concepts• Ionic• Demo : iOS app using Meteor
What is Meteor …
A reactive ,
data-synchronizing,
Latency-compensating,
time-saving platform.
for building fast, interactive web apps
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…
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>
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>
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.
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
What's different ?
Meteor App
•Write all JavaScript (if you want to)
•Use the same APIs on client and server.
Meteor componentsCommand Line Tool
View Layer – Blaze (Angular, React)
Livequery
Full stack package system – atmospherejs.com
Build system
Cordova/Phonegap
MongoDB DOMServer Client
Message
s.insert(
)Messages.insert()
Meteor Data Flows
MinimongoOptimistic UI
MongoDB
The Meteor Platform
App Microservices
PLATFORM
Blaze
Livequery
Client Data Cache
MongoDB SQL REST
App Components & Logic
React Angular
SERVER
CLIENT
SOURCES
DDP
MobileWeb
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.
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
Downside of Native
• Knowledge of each platform• Separate code bases• Expensive
Ionic
Ionic is “Bootstrap for Native”• Responsive• UI Components• Transitions• Icons
Ionic for AngularJS• Ionic has been optimised for AngularJS
• AngularJS Features–Directives –Services–Interactions–Navigation and History–Animations and Transitions–Performance–Much More…
Ionic Sample Code
Lists
Ionic Lists
Tabs• Nested views• Separate history• Angular UI Router
Side Menu
Navigation• Angular UI Router• Back button• Transitions
Create a meteor app
1.meteor create <<APP_NAME>>
2.cd <<APP_NAME>
3.meteor //this runs the app at port 3000
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
Run App
To run in simulator• meteor run ios
To run on device• meteor run ios -p <local port>
Demo App
Thank You
top related