Introduction to Meteor - revised edition
-
Upload
stephan-hochhaus -
Category
Technology
-
view
440 -
download
3
description
Transcript of Introduction to Meteor - revised edition
Building Better Apps with Meteor
Quickening Evolution since the Paleogene
A talk by Stephan Hochhaus
The web in 2014What’s hot with users and developers
Users expect more
Developers expect less
Have you met Meteor?Meteor rocks!
- Disposable Heroes
“Back to the frontYou will do what I say, when I say”
- Disposable Heroes
“Back to the frontYou will do what I say, when I say”
Database everywhere
- Disposable Heroes
“Back to the frontYou will do what I say, when I say”
Database everywhere
Full stack reactivity
- Disposable Heroes
“Back to the frontYou will do what I say, when I say”
Database everywhere
Full stack reactivity Latency compensation
The tech behind the magic• JavaScript all the way
• Spacebars and JavaScriptin the browser
• Node.js on the server
• MongoDB as the database
• WebSockets as transport layer
• Distributed Data Protocol (DDP)
Database everywhere
Server
Client
Client
Client
Client
Client
Database everywhere
Server
Client
Client
Client
Client
Client
Database
SELECT count(*) FROM products WHERE quantity > 1
Database everywhere
Server
Client
Client
Client
Client
Client
Database
Data
Data
Data
Data
Data
SELECT count(*) FROM products WHERE quantity > 1
{{products.length}}
Database everywhere
Server
Client
Client
Client
Client
Client
Database everywhere
Server
Client
Client
Client
Client
Client
Database
Products.find({quantity: { $gt: 0 }}).count()
Database everywhere
Server
Client
Client
Client
Client
Client
Database
Subset of Database
Subset of Database
Subset of Database
Subset of Database
Subset of Database
Products.find({quantity: { $gt: 0 }}).count()
What’s Reactivity?
Fullstack Reactivity
Fullstack ReactivityTraditional programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
Fullstack ReactivityTraditional programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
• a = 5;console.log(c);# c is still 7
Fullstack ReactivityTraditional programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
• a = 5;console.log(c);# c is still 7
• c = a + b;console.log(c);# c is finally 10
Fullstack ReactivityTraditional programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
• a = 5;console.log(c);# c is still 7
• c = a + b;console.log(c);# c is finally 10
Reactive programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
Fullstack ReactivityTraditional programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
• a = 5;console.log(c);# c is still 7
• c = a + b;console.log(c);# c is finally 10
Reactive programming
• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7
• a = 5;console.log(c);# c is magically 10
Let’s look at latency
Let’s look at latency
Latency compensation
Browser
MongoDB
MiniMongo
Code
Server
5. Call server method and send comment dataCode
User
1. Submitcomment
3. Simulate storing to DB
2. Validate data6. Validate data
7. Store to DB
8. Confirm success 4. Update View
Premise:Let’s pretend things work right the first time
Anatomy of Meteor• Meteor is a platform for developing web apps
• Everything you need to get started isinstalled with a single command
• Imagine MEAN and grunt had a child
• Both Meteor and npm packages canbe used to extend functionality Node.js
MongoDB
Smart Packages
(DDP, Deps, Blaze,
SpaceBars, …)
CLI Tool
Take-Away• Meteor is an all-inclusive solution for
building up-to-date web applications
• Gives developers less details to worry about and more time to create impressive user experiences
• It takes hours, not weeks to become productive, which increases developer motivation
• Less development effort translates into cheaper projects and quicker time to market
What’s next?• Ready to dive into Meteor?
• meteorinaction.com
• Get in contact
• Twitter: @yauh
• E-Mail: [email protected]
• Blog: http://yauh.de