Rapid Mobile Development with Meteor.js

13,377 views

Published on

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 Famo.us. 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
1 Comment
27 Likes
Statistics
Notes
  • slide #15: mrt add appache fails with: modules/meteorite/lib/project.js:225 throw("Package named " + pkgName + " doesn't exist in your meteor in ^ Package named appcache doesn't exist in your meteor installation, smart.json, or on atmosphere
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,377
On SlideShare
0
From Embeds
0
Number of Embeds
3,026
Actions
Shares
0
Downloads
181
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

Rapid Mobile Development with Meteor.js

  1. 1. METEOR.JS MOBILE APPS (WITH FAMO.US AND CORDOVA) Created by Andrew Reedy / @andrewreedy
  2. 2. OVERVIEW Choosing the stack Meteor Cordova Famo.us Tower
  3. 3. RAPID DEVELOPMENT Small Team Short Deadline Lean Startup
  4. 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. 5. METEOR Meteor is a fairly young (0.8.1.3) 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. 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. 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. 8. DDP / NO REST It handles Remote Procedure Calls (RPC). It manages data.
  9. 9. DATA EVERYWHERE Mirrors a subset of the data to the client. No Ajax calls needed Data is there instantaneously. Handles latency compensation.
  10. 10. PUBLISHING //ontheserver Meteor.publish('posts',function(author){ returnPosts.find({flagged:false,author:author}); });
  11. 11. SUBSCRIBING //ontheclient Meteor.subscribe('posts','bob-smith');
  12. 12. INSTALLING METEOR curlhttps://install.meteor.com|/bin/sh
  13. 13. CREATE AN APP meteorcreatemyApp cdmyApp meteormyApp
  14. 14. I'VE GOT 99 PROBLEMS BUT USER ACCOUNTS AIN'T ONE meteoraddaccounts-ui meteoraddaccounts-twitter
  15. 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. 16. PACKAGES / COMMUNITY Easy to create packages and publish them. Huge community of package developers. //SmartJSON { "name":"visit-tracker", "description":"Logvisitsforinternalanalyticsandconversionattribution(GeoIP,UserAgent, "homepage":"https://github.com/andrewreedy/meteor-visit-tracker", "author":"AndrewReedy", "version":"0.0.5", "git":"https://github.com/andrewreedy/meteor-visit-tracker.git", "packages":{ "headers":{}, "collection-hooks":{} } } //PublishPackage mrtrelease. mrtpublish. //UsePackage mrtaddvisit-tracker
  17. 17. BUNDLING APP meteorbundle../bundle.tar.gz cd.. tar-xzvfbundle.tar.gz foreverstartbundle/main.js
  18. 18. DEPLOYING APP meteordeploymyapp.meteor.com
  19. 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/ cordovapluginaddhttps://github.com/raix/Meteor-cordova.git mvplatforms/ios/www/index.example.htmlplatforms/ios/www/index.html cp../designs/meteor.cordova.cssplatforms/ios/www/css/
  20. 20. CORDOVA APIS Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage
  21. 21. PROBLEM Web apps don't feel like native apps.. they don't have the smooth physics and fast GPU rendering
  22. 22. FAMO.US Free & Open Source Famo.us 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. Famo.us university Inspired by video game physics engines Bypasses HTML5
  23. 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. 24. SURFACES Building blocks of UI Contain html and css Famo.us positions and animates them Map to GPU textures (just div's)
  25. 25. TRANSFORMS Uses GPU matrix3d to animate and move around surfaces Audio / 3D Lightbox
  26. 26. METEOR + FAMO.US There are few meteor packages that bring famo.us into meteor Famono - Favorite so far mrtaddfamono Famous Components - Wrap Famo.us in BLAZE components for meteor (not sure how I feel about this) mrtaddfamous-compontents Yelp Example Meteor Shower Example
  27. 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. 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. 29. TOWER
  30. 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)
  31. 31. NEW IN THE BUILDING...
  32. 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. 33. OPTIONS!
  34. 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)
  35. 35. WAIT WE STILL USE THESE...
  36. 36. MMM THAT'S BETTER!
  37. 37. COMMUNITY ENGAGEMENT Partnering with commercial real estate companies Exposing community engagement metrics Building the tools to interact with community
  38. 38. LAUNCHING OUR BETA Sign up for our private beta at https://tower.io Our first test buildings 101 W Broadway & The Mark Downtown San Diego
  39. 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. 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. 41. CITYBOARD Metrics dashboard to put up around the city of San Diego to display real-time city data. (economic disparity)
  42. 42. SURFGARDEN Turn old surfboards into vertical gardens for the less fortunate.
  43. 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. 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.
  45. 45. THE END BY ANDREW REEDY BETA: HTTPS://TOWER.IO HTTP://TWITTER.COM/GOTOWER HTTP://FACEBOOK.COM/TOWERAPP

×