getting started with meteor - association for computing ...princetonacm.acm.org/tcfpro/getting...
TRANSCRIPT
![Page 1: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/1.jpg)
1
Getting Started with Meteor
TCF IT Professional ConferenceMarch 14, 2014
Michael P. Redlich@mpredli
about.me/mpredli/
1Thursday, March 13, 14
![Page 2: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/2.jpg)
Who’s Mike?
• BS in CS from
• “Petrochemical Research Organization”
• Ai-Logix, Inc. (now AudioCodes)
• Amateur Computer Group of New Jersey
• Publications
• Presentations
2
2Thursday, March 13, 14
![Page 3: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/3.jpg)
Objectives
• What is Meteor?
• Why Meteor?
• The Seven Principles
• Getting Started with Meteor
• Live Demos (yea!)
• Meteor Resources
3
3Thursday, March 13, 14
![Page 4: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/4.jpg)
What is Meteor? (1)
• “...an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.”
Meteor Web Site, http://www.meteor.com/
• A full-stack framework using JavaScript
• Compiles, combines, and distributes your HTML, CSS, and JavaScript
4
4Thursday, March 13, 14
![Page 5: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/5.jpg)
What is Meteor? (2)
• Built on top of
• Shares code between the client-side and server-side of your application
5
5Thursday, March 13, 14
![Page 6: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/6.jpg)
What is Node.js?
• “...a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”
Node.js Web Site, http://www.nodejs.org/
6
6Thursday, March 13, 14
![Page 7: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/7.jpg)
Why Meteor?
• “Meteor is radically faster, radically easier platform for Internet-scale thick client applications.”
Avital Oliver, “Meteor Smart Packages”, ETE Conference, 4/2/2013
• Easy to learn
• Rapid application development
• Powerful data synchronization
7
7Thursday, March 13, 14
![Page 8: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/8.jpg)
The Seven Principles• Data on the Wire
• One Langauge
• Database Everywhere
• Latency Compensation
• Full-Stack Reactivity
• Embrace the Ecosystem
• Simplicity = Productivity
8
8Thursday, March 13, 14
![Page 9: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/9.jpg)
(#1) Data on the Wire
• Don’t send HTML over the network
• Let client decide how to render data
• Browser renders the templates as data changes
9
9Thursday, March 13, 14
![Page 10: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/10.jpg)
(#2) One Language
• Everything is JavaScript
• Built-in JavaScript packages include:
• CoffeeScript
• jQuery
• Bootstrap
• Backbone
10
10Thursday, March 13, 14
![Page 11: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/11.jpg)
(#3) Database Everywhere
• MongoDB works on both the client and the server
• The client-side database API looks just like MongoDB server-side API
• Database operations are cached in memory on the client-side to yield...
11
11Thursday, March 13, 14
![Page 12: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/12.jpg)
(#4) Latency Compensation
• Designed to create a zero-latency connection to the database
• Database on client-side is updated first
• Database on server-side is updated later
12
12Thursday, March 13, 14
![Page 13: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/13.jpg)
(#5) Full-Stack Reactivity
• Embraces the concept of reactive programming
• Everything is real-time
• Templates automatically re-render themselves as data changes
13
13Thursday, March 13, 14
![Page 14: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/14.jpg)
(#6) Embrace the Ecosystem
• Meteor is open-source
• Integrates existing open-source tools and frameworks
14
14Thursday, March 13, 14
![Page 15: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/15.jpg)
(#7) Simplicity = Productivity
• For something to seem simple, it must actually be simple
• API are plain and simple
15
15Thursday, March 13, 14
![Page 16: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/16.jpg)
Conventions Used in This Presentation
• Command Prompt ($)
• Keywords (meteor, create, etc.)
• Variables (variable)
16
16Thursday, March 13, 14
![Page 17: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/17.jpg)
Getting Started
• Download Meteor
• Create your first Meteor app
• Explore the built-in examples
17
17Thursday, March 13, 14
![Page 18: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/18.jpg)
18
Download Meteor
• Unix/Linux
$ curl https://install.meteor.com | sh
• Windows (unofficial support)
• win.meteor.com
• developed by Tom Wijsman
• now facilitated by Stephen Darnell
18Thursday, March 13, 14
![Page 19: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/19.jpg)
Create Your First Meteor App
$ meteor create myapp
$ cd myapp
myapp $ meteor
19
19Thursday, March 13, 14
![Page 20: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/20.jpg)
Live Demo!
20
20Thursday, March 13, 14
![Page 21: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/21.jpg)
Explore the Built-in Examples
• Four (4) built-in examples
• Leaderboard (simplest)
$ meteor create --example leaderboard
21
21Thursday, March 13, 14
![Page 22: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/22.jpg)
Live Demo!
22
22Thursday, March 13, 14
![Page 23: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/23.jpg)
Structuring Your Meteor Application
23
• Special folders:
• /server
• /client
• /public
• /lib
• /collections
23Thursday, March 13, 14
![Page 24: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/24.jpg)
Smart Packages (1)
• JavaScript programs
• Extend your Meteor environment
• Injects code into client-side or server-side of your application
24
24Thursday, March 13, 14
![Page 25: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/25.jpg)
Smart Packages (2)
• Core smart packages:
• spark
• reload
• livedata
• mongo-livedata
• minimongo
25
25Thursday, March 13, 14
![Page 26: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/26.jpg)
Smart Packages (3)
• List all available packages
$ meteor list
• Adding a package
$ meteor add packageName
• Removing a package
$ meteor remove packageName
26
26Thursday, March 13, 14
![Page 27: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/27.jpg)
Deploying Your Meteor Application
• Full application server
• Deploy on Meteor’s infrastructure
$ meteor deploy myapp.meteor.com
27
27Thursday, March 13, 14
![Page 28: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/28.jpg)
Meteorite
• A wrapper utility for Meteor
• developed by Tom Coleman
• Supports third-party applications
• Does everything Meteor does plus...
28
28Thursday, March 13, 14
![Page 29: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/29.jpg)
Meteor Resources (1)
29
29Thursday, March 13, 14
![Page 30: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/30.jpg)
30
Meteor Resources (2)
•meteor.com
• github.com/meteor/meteor
• themeteorbook.com
• eventedmind.com
• atmosphere.meteor.com
• fastcolabs.com/3007015/how-use-mysql-meteor
30Thursday, March 13, 14
![Page 31: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/31.jpg)
Upcoming Events (1)
• Trenton Computer Festival
• March 14-15, 2014
• tcf-nj.org
• Emerging Technologies for the Enterprise
• April 22-23, 2014
• phillyemergingtech.com
31
31Thursday, March 13, 14
![Page 32: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/32.jpg)
32
Upcoming Events (2)
32Thursday, March 13, 14
![Page 33: Getting Started with Meteor - Association for Computing ...princetonacm.acm.org/tcfpro/Getting Started with Meteor.pdf · • Getting Started with Meteor ... Node.js uses an event-driven,](https://reader030.vdocuments.us/reader030/viewer/2022040521/5e7c56f05dfa686fee459ba5/html5/thumbnails/33.jpg)
33
Thanks!
@mpredli
javasig.org
33Thursday, March 13, 14