building ios app using meteor

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>

Item 1

Item 2

</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 :Item 1

Item 2

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 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

building ios app using meteor

Engineering