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: stephan@yauh.de

• Blog: http://yauh.de