Skip to content

Instantly share code, notes, and snippets.

@shrop

shrop/intro-meteor.js.md

Last active October 1, 2022 16:54
Show Gist options
  • Save shrop/8134391 to your computer and use it in GitHub Desktop.
Save shrop/8134391 to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to Meteor.js
Raw
intro-meteor.js.md

Intro to Meteor.js

What is Meteor.js?

Why Meteor?

  • Seven Principals of Meteor
    • Data on the Wire
    • One language
    • Database Everywhere
    • Latency Compensation
    • Full Stack Reactivity
    • Embrace the Ecosystem
    • Simplicity Equals Productivity
  • Meteor sends data between the client and server, not fully rendered HTML.
  • JavaScript on the client and server
  • Same API is used to access the database on the client and server
  • Application appear very fast for the client since Meteor automatically synchronizes models for fast prefetching
  • Live page updates when the database changes, without browser refreshes, thanks to the event-driven interface. Drupal? Wordpress?
  • Can't reiterate enough the importance of Meteor being Open source
  • Easy to learn thanks to Meteor's simple and beautiful API
  • Hot code pushes

The More You Know

  • Handlebars is used for HTML templates
  • MongoDB is currently used as the database behind Meteor apps. Other database types may be supported in the future.
  • Atmosphere is a list of additional packages which can installed with Meteorite. More info.
    • Note: Meteor 1.0 fully support Atmosphere
  • Structuring your application
    • $ meteor create app-name uses a skeleton to create a folder named app-name and three files, app-name.html, app-name.css, and app-name.js.
      • Note: You can update the default skel structure here: ~/.meteor/tools/latest/tools/skel/
    • Meteor automatically finds all HTML templates, JavaScript, and CSS in an application and handles processing these
      • main.* files are loaded last at each folder level. Example: client/main.js will load after client/file1.js and client/file2.js.
      • Files which don't exist in app-name/client, app-name/server, and app-name/tests` are loaded on the client and server. You can use isClient and isServer to separate code to run on only client or server. here is a better way to organize server and client code:
        • Files in app-name/client are only loaded on the client
        • Files in app-name/server are only loaded on the server
      • Files in the app-name/private directory are for static server assets. See Assets.
      • Files in the app-name/lib directory are loaded first
      • Files in subdirectories are loaded before files in parent directories
      • Files are loaded alphabetically by filename in each directory
      • app-name/public is the place to store assets such as common images, favicon.ico, and robots.txt
      • app-name/client/compatibility is a place to place JavaScript libraries and are executed prior to other client-side JavaScript files
  • $ meteor deploy myapp.meteor.com will deploy your app on meteor.com's web infrastructure easily
  • Packages autopublish and insecure are included in new Meteor apps by default to ease development. You will probably want to remove these and provide your own functions to handle subscriptions and security before deploying your application in production.
  • Want to expose your app's data as an API? See Collection API
  • Deployment options
  • Meteor comes with a number of helpful packages to help make development faster. Try $ meteor list
  • The Meteor server restarts when file changes happen
  • The Meteor serer will wait for errors to be resolved if it can't start the application due to an error.
  • Meteor code is synchronous in style thanks to Node Fibers. This means that each connection can have blocking code and no "pyramid of doom" due to lots of callbacks in asynchronous Node.js programming techniques. While each connection has blocking code, Fibers runs ontop of he Node event loop, allowed it to simultanrously server other clients.
  • Meteor uses minimongo on the client side. This is a lightweight MongoDB basically.

Demos

Installing Meteor

Installing Meteorite

  • $ npm install -g meteorite
    • You can install npm with Homebrew $ brew install npm if you don't already have it installed.

Creating an App

  • $ meteor create my-app

Explore Meteor and Meteorite Usage

  • $ meteor help
  • $ meteor help command
  • $ mrt add package
  • $ mrt install package
  • $ mrt update package
  • $ meteor run
  • $ meteor add
  • $ meteor remove
  • $ meteor list
  • $ meteor logs
  • $ meteor mongo
  • $ meteor reset
  • $ meteor bundle
  • $ meteor update

Live Code Demo/Examples

  • Templates
  • Collections
  • etc.

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment