METEOR.JSMOBILE APPS(WITH FAMO.US AND CORDOVA)

Created by Andrew Reedy / @andrewreedy

OVERVIEWChoosing the stack

MeteorCordovaFamo.usTower

RAPID DEVELOPMENT

Small TeamShort DeadlineLean Startup

APPLICATIONREQUIREMENTS

Cross PlatformReal-time

Native Feel (Physics and speed)Share code between server and client

Offline AccessQuick setup and deployment

Scalable

METEORMeteor is a fairly young (0.8.1.3) JavaScript framework that

works on top of Node and has a few interestingcharacteristics.

(You must be okay with not having everything built for you.You are on the edge.)

METEORSingle page web app

Reactive - Data changes are reflected through out the appShare code between server and client

Distributed Data Protocol not RESTPub/Sub - Data everywhere

Minimongo - Run queries on the clientAccounts Packages (including oauth)

Asset Compiler / Packaging+More

REACTIVITY / DATAMongoDB - support out of the box

Oplog tailing - interprets the operations log so that itdoesn't slow down the db

Reactive Redis - automatically indexes JSON data andallows you to subscribe to any part of it.

Elastic Search - easily river meteor data into ES andprovides methods to search it.

RethinkDB - they recently release change feed; working ona meteor package.

DDP / NO RESTIt handles Remote Procedure Calls (RPC).

It manages data.

DATA EVERYWHERE

Mirrors a subset of the data to the client.No Ajax calls needed

Data is there instantaneously.Handles latency compensation.

PUBLISHING

// on the serverMeteor.publish('posts', function(author) { return Posts.find({flagged: false, author: author});});

SUBSCRIBING

// on the clientMeteor.subscribe('posts', 'bob-smith');

INSTALLING METEOR curl https://install.meteor.com | /bin/sh

CREATE AN APP meteor create myAppcd myAppmeteor myApp

I'VE GOT 99 PROBLEMS BUTUSER ACCOUNTS AIN'T ONE meteor add accounts-uimeteor add accounts-twitter

METEORITE / ATMOSPHEREMeteors package system is still premature so PercolateStudio created meteorite and atmosphere (soon will be

combined into meteors package system).Use NPM packages and now with Famono we can use bower

/ github packages directly npm install -g meteoritemrt add cordovamrt add appcachemrt add fastclickmrt add famonomrt add elasticsearch

PACKAGES / COMMUNITYEasy to create packages and publish them. Huge community

of package developers. // Smart JSON{ "name": "visit-tracker", "description": "Log visits for internal analytics and conversion attribution (GeoIP, UserAgent, Traffic Source)" "homepage": "https://github.com/andrewreedy/meteor-visit-tracker", "author": "Andrew Reedy", "version": "0.0.5", "git": "https://github.com/andrewreedy/meteor-visit-tracker.git", "packages": { "headers": {}, "collection-hooks": {} }}

// Publish Packagemrt release .mrt publish .

// Use Packagemrt add visit-tracker

BUNDLING APP meteor bundle ../bundle.tar.gzcd ..tar -xzvf bundle.tar.gzforever start bundle/main.js

DEPLOYING APP meteor deploy myapp.meteor.com

CORDOVA (3.5) (XCODE 5.1)Apache open source library that exposes mobile native APIs

to javascript (leaderboard example) sudo npm install -g cordovacordova create MeteorShowers com.meteorshowers "Meteor Showers"cd MeteorShowerscordova platform add ioscordova preparecp -R ../designs/icons ./platforms/ios/Meteor\ Showers/Resources/cp -R ../designs/splash ./platforms/ios/Meteor\ Showers/Resources/cordova plugin add https://github.com/raix/Meteor-cordova.gitmv platforms/ios/www/index.example.html platforms/ios/www/index.htmlcp ../designs/meteor.cordova.css platforms/ios/www/css/

CORDOVA APISAccelerometerCameraCaptureCompassConnectionContactsDeviceEvents

FileGeolocationGlobalizationInAppBrowserMediaNotificationSplashscreenStorage

PROBLEMWeb apps don't feel like native apps.. they don't have the

smooth physics and fast GPU rendering

FAMO.USFree & Open SourceFamo.us is a JavaScript framework that includes an opensource 3D layout engine fully integrated with a 3D physicsanimation engine that can render to DOM, Canvas, orWebGL.Famo.us universityInspired by video game physics enginesBypasses HTML5

RENDERINGRenders to the GPU (using css matrix3d)Combine and multiply the matrices and insert into theDOM as oneUses requestAnimationFrame() to render at 60 frames persecond or screen refresh rate

SURFACESBuilding blocks of UIContain html and cssFamo.us positions and animates themMap to GPU textures (just div's)

TRANSFORMSUses GPU matrix3d to animate and move around surfaces

Audio / 3DLightbox

METEOR + FAMO.USThere are few meteor packages that bring famo.us into

meteorFamono - Favorite so far

mrt add famono

Famous Components - Wrap Famo.us in BLAZEcomponents for meteor (not sure how I feel about this) mrt add famous-compontents

Yelp ExampleMeteor Shower Example

DISCONNECTEDModern buildings, nano tech, electric cars .. still can'tconnect to the person who lives above youConstantly flooded with updates about what high schoolfriends had for lunch.. but have no idea who the peopleyou see everyday areEasy to connect to anyone in the world who likes a certaintopic.. Hard to find out who shares similar interests inyour buildingOver half the world’s population now lives in an urbanarea, and 75% will call a city home by 2050

NEW URBANISMThere's a lot of people trying to solve the issue of fittingmass amounts of people in a small geographic area(sustainable products, modern architecture, verticalfarming, city planners, ride sharing)New urbanism - organize cities in such a way thatanything someone needs is in walking / biking distanceSharing economy movement (Peers) .. a new way to dealwith limited resources and build communityResource based economy - Jacque Fresco, is anAmerican futurist/engineer talked of a future buildingdesign that encompassed everything we need in our dailylife.

TOWER

FINALLY CONNECTEDTower is a geo-specific social networking app and

community platform that connects you to the people whereyou live, work and play

Residential Tower (condos, dorms, barracks)Office TowerTemporary Tower (resort, cruise ship, etc)

NEW IN THE BUILDING...

A FEW USECASES..You've just moved to a new city and don't have any friends... download Tower instantly make connections!First day moving into the dorms ... what if you couldquickly connect with the other guy who likes rugby in yourbuilding!You're a freelance designer in a co-working space.. Whoknew there was a law firm upstairs in desperate need of aredesign?

OPTIONS!

BASE FEATURE SET3 Towers, each with a customizable profilePublic / private groups (company, yoga friends)Events (tower happy hour)Internal micro-economy (offer laundry service, give awaycouch, share a kayak)Tower feed (introduce yourself)Interests (see who else surfs in your building)Local / internal deals (10% off the attorney in yourbuilding, 20% off the bar next door)

WAIT WE STILL USE THESE...

MMM THAT'S BETTER!

COMMUNITY ENGAGEMENTPartnering with commercial real estate companiesExposing community engagement metricsBuilding the tools to interact with community

LAUNCHING OUR BETASign up for our private beta at https://tower.ioOur first test buildings 101 W Broadway & The MarkDowntown San Diego

TO STAY IN SAN DIEGO..?Growing community of tech startups in San DiegoInflux of VC firms because of SD's Biotech industryInnovative organizations forming around the community:EvoNexus, CommNexus, Qualcomm Labs, I.D.E.A District,Irvine Company, Makers Quarter, FabLab, SD CivicInnovation Lab, Cyber Hive, San Diego Startup Week

OPEN CITY PROJECTTower working with SD Civic Innovation Lab#hackforchange to show that citizens can be civicalyengaged in more productive ways than sitting in a councilmeetingVote on projects to work on and prototype in the monthof June

CITYBOARDMetrics dashboard to put up around the city of San Diegoto display real-time city data. (economic disparity)

SURFGARDENTurn old surfboards into vertical gardens for the lessfortunate.

EMERGENCYMESHUsing Open Garden mesh network to distribute and cacheemergency data in the event of a catastrophe such as thefires where the network is down

SAN DIEGO A CENTER FORINNOVATION

If we take a piece of advice from Vanilla Ice: ... stopcollaborate and listen.. we can work together to make San

Diego not just America's finest city to live in but also a centerfor tech innovation.

THE ENDBY ANDREW REEDY

BETA: HTTPS://TOWER.IOHTTP://TWITTER.COM/GOTOWERHTTP://FACEBOOK.COM/TOWERAPP