Your SlideShare is downloading. ×
Rapid Mobile Development with Meteor.js
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Rapid Mobile Development with Meteor.js


Published on

Learn how to make realtime cross-platform mobile applications using Meteor.js. …

Learn how to make realtime cross-platform mobile applications using Meteor.js.

Tower’s CTO, Andrew Reedy will give a brief overview of how to take advantage of the realtime javascript platform Meteor.js for quickly developing database everywhere, scaleable web applications. He explains how to set up Meteor with Cordova and also Tower is a San Diego based startup and mobile application that connects people inside of residential towers, office buildings, and what they call temporary towers (resorts, cruise ships, conferences.) See how Tower takes advantage of a modern stack including Meteor, MongoDB, Cordova, Redis, ElasticSearch, Docker, and CoreOS to scale their mobile app..

Published in: Software, Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. METEOR.JS MOBILE APPS (WITH FAMO.US AND CORDOVA) Created by Andrew Reedy / @andrewreedy
  • 2. OVERVIEW Choosing the stack Meteor Cordova Tower
  • 3. RAPID DEVELOPMENT Small Team Short Deadline Lean Startup
  • 4. APPLICATION REQUIREMENTS Cross Platform Real-time Native Feel (Physics and speed) Share code between server and client Offline Access Quick setup and deployment Scalable
  • 5. METEOR Meteor is a fairly young ( JavaScript framework that works on top of Node and has a few interesting characteristics. (You must be okay with not having everything built for you. You are on the edge.)
  • 6. METEOR Single page web app Reactive - Data changes are reflected through out the app Share code between server and client Distributed Data Protocol not REST Pub/Sub - Data everywhere Minimongo - Run queries on the client Accounts Packages (including oauth) Asset Compiler / Packaging +More
  • 7. REACTIVITY / DATA MongoDB - support out of the box Oplog tailing - interprets the operations log so that it doesn't slow down the db Reactive Redis - automatically indexes JSON data and allows you to subscribe to any part of it. Elastic Search - easily river meteor data into ES and provides methods to search it. RethinkDB - they recently release change feed; working on a meteor package.
  • 8. DDP / NO REST It handles Remote Procedure Calls (RPC). It manages data.
  • 9. DATA EVERYWHERE Mirrors a subset of the data to the client. No Ajax calls needed Data is there instantaneously. Handles latency compensation.
  • 10. PUBLISHING //ontheserver Meteor.publish('posts',function(author){ returnPosts.find({flagged:false,author:author}); });
  • 11. SUBSCRIBING //ontheclient Meteor.subscribe('posts','bob-smith');
  • 12. INSTALLING METEOR curl|/bin/sh
  • 13. CREATE AN APP meteorcreatemyApp cdmyApp meteormyApp
  • 14. I'VE GOT 99 PROBLEMS BUT USER ACCOUNTS AIN'T ONE meteoraddaccounts-ui meteoraddaccounts-twitter
  • 15. METEORITE / ATMOSPHERE Meteors package system is still premature so Percolate Studio 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 npminstall-gmeteorite mrtaddcordova mrtaddappcache mrtaddfastclick mrtaddfamono mrtaddelasticsearch
  • 16. PACKAGES / COMMUNITY Easy to create packages and publish them. Huge community of package developers. //SmartJSON { "name":"visit-tracker", "description":"Logvisitsforinternalanalyticsandconversionattribution(GeoIP,UserAgent, "homepage":"", "author":"AndrewReedy", "version":"0.0.5", "git":"", "packages":{ "headers":{}, "collection-hooks":{} } } //PublishPackage mrtrelease. mrtpublish. //UsePackage mrtaddvisit-tracker
  • 17. BUNDLING APP meteorbundle../bundle.tar.gz cd.. tar-xzvfbundle.tar.gz foreverstartbundle/main.js
  • 19. CORDOVA (3.5) (XCODE 5.1) Apache open source library that exposes mobile native APIs to javascript (leaderboard example) sudonpminstall-gcordova cordovacreateMeteorShowerscom.meteorshowers"MeteorShowers" cdMeteorShowers cordovaplatformaddios cordovaprepare cp-R../designs/icons./platforms/ios/MeteorShowers/Resources/ cp-R../designs/splash./platforms/ios/MeteorShowers/Resources/ cordovapluginadd mvplatforms/ios/www/index.example.htmlplatforms/ios/www/index.html cp../designs/meteor.cordova.cssplatforms/ios/www/css/
  • 20. CORDOVA APIS Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage
  • 21. PROBLEM Web apps don't feel like native apps.. they don't have the smooth physics and fast GPU rendering
  • 22. FAMO.US Free & Open Source is a JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL. university Inspired by video game physics engines Bypasses HTML5
  • 23. RENDERING Renders to the GPU (using css matrix3d) Combine and multiply the matrices and insert into the DOM as one Uses requestAnimationFrame() to render at 60 frames per second or screen refresh rate
  • 24. SURFACES Building blocks of UI Contain html and css positions and animates them Map to GPU textures (just div's)
  • 25. TRANSFORMS Uses GPU matrix3d to animate and move around surfaces Audio / 3D Lightbox
  • 26. METEOR + FAMO.US There are few meteor packages that bring into meteor Famono - Favorite so far mrtaddfamono Famous Components - Wrap in BLAZE components for meteor (not sure how I feel about this) mrtaddfamous-compontents Yelp Example Meteor Shower Example
  • 27. DISCONNECTED Modern buildings, nano tech, electric cars .. still can't connect to the person who lives above you Constantly flooded with updates about what high school friends had for lunch.. but have no idea who the people you see everyday are Easy to connect to anyone in the world who likes a certain topic.. Hard to find out who shares similar interests in your building Over half the world’s population now lives in an urban area, and 75% will call a city home by 2050
  • 28. NEW URBANISM There's a lot of people trying to solve the issue of fitting mass amounts of people in a small geographic area (sustainable products, modern architecture, vertical farming, city planners, ride sharing) New urbanism - organize cities in such a way that anything someone needs is in walking / biking distance Sharing economy movement (Peers) .. a new way to deal with limited resources and build community Resource based economy - Jacque Fresco, is an American futurist/engineer talked of a future building design that encompassed everything we need in our daily life.
  • 29. TOWER
  • 30. FINALLY CONNECTED Tower is a geo-specific social networking app and community platform that connects you to the people where you live, work and play Residential Tower (condos, dorms, barracks) Office Tower Temporary Tower (resort, cruise ship, etc)
  • 32. 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 could quickly connect with the other guy who likes rugby in your building! You're a freelance designer in a co-working space.. Who knew there was a law firm upstairs in desperate need of a redesign?
  • 33. OPTIONS!
  • 34. BASE FEATURE SET 3 Towers, each with a customizable profile Public / private groups (company, yoga friends) Events (tower happy hour) Internal micro-economy (offer laundry service, give away couch, share a kayak) Tower feed (introduce yourself) Interests (see who else surfs in your building) Local / internal deals (10% off the attorney in your building, 20% off the bar next door)
  • 37. COMMUNITY ENGAGEMENT Partnering with commercial real estate companies Exposing community engagement metrics Building the tools to interact with community
  • 38. LAUNCHING OUR BETA Sign up for our private beta at Our first test buildings 101 W Broadway & The Mark Downtown San Diego
  • 39. TO STAY IN SAN DIEGO..? Growing community of tech startups in San Diego Influx of VC firms because of SD's Biotech industry Innovative organizations forming around the community: EvoNexus, CommNexus, Qualcomm Labs, I.D.E.A District, Irvine Company, Makers Quarter, FabLab, SD Civic Innovation Lab, Cyber Hive, San Diego Startup Week
  • 40. OPEN CITY PROJECT Tower working with SD Civic Innovation Lab #hackforchange to show that citizens can be civicaly engaged in more productive ways than sitting in a council meeting Vote on projects to work on and prototype in the month of June
  • 41. CITYBOARD Metrics dashboard to put up around the city of San Diego to display real-time city data. (economic disparity)
  • 42. SURFGARDEN Turn old surfboards into vertical gardens for the less fortunate.
  • 43. EMERGENCYMESH Using Open Garden mesh network to distribute and cache emergency data in the event of a catastrophe such as the fires where the network is down
  • 44. SAN DIEGO A CENTER FOR INNOVATION If we take a piece of advice from Vanilla Ice: ... stop collaborate and listen.. we can work together to make San Diego not just America's finest city to live in but also a center for tech innovation.