Introduction to Meteor - revised edition

30
Building Better Apps with Meteor Quickening Evolution since the Paleogene A talk by Stephan Hochhaus

description

In 2014, users simply expect more from web apps, developers expect less complexity. This presentation explains, why Meteor is the next generation platform that delievers a better user experience with less development effort and shows the three main traits that help evolve programming from the dinosaur stage to the modern web.

Transcript of Introduction to Meteor - revised edition

Page 1: Introduction to Meteor - revised edition

Building Better Apps with Meteor

Quickening Evolution since the Paleogene

A talk by Stephan Hochhaus

Page 2: Introduction to Meteor - revised edition

The web in 2014What’s hot with users and developers

Page 3: Introduction to Meteor - revised edition

Users expect more

Page 4: Introduction to Meteor - revised edition

Developers expect less

Page 5: Introduction to Meteor - revised edition

Have you met Meteor?Meteor rocks!

Page 6: Introduction to Meteor - revised edition

- Disposable Heroes

“Back to the frontYou will do what I say, when I say”

Page 7: Introduction to Meteor - revised edition

- Disposable Heroes

“Back to the frontYou will do what I say, when I say”

Database everywhere

Page 8: Introduction to Meteor - revised edition

- Disposable Heroes

“Back to the frontYou will do what I say, when I say”

Database everywhere

Full stack reactivity

Page 9: Introduction to Meteor - revised edition

- Disposable Heroes

“Back to the frontYou will do what I say, when I say”

Database everywhere

Full stack reactivity Latency compensation

Page 10: Introduction to Meteor - revised edition

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)

Page 11: Introduction to Meteor - revised edition

Database everywhere

Server

Client

Client

Client

Client

Client

Page 12: Introduction to Meteor - revised edition

Database everywhere

Server

Client

Client

Client

Client

Client

Database

SELECT count(*) FROM products WHERE quantity > 1

Page 13: Introduction to Meteor - revised edition

Database everywhere

Server

Client

Client

Client

Client

Client

Database

Data

Data

Data

Data

Data

SELECT count(*) FROM products WHERE quantity > 1

{{products.length}}

Page 14: Introduction to Meteor - revised edition

Database everywhere

Server

Client

Client

Client

Client

Client

Page 15: Introduction to Meteor - revised edition

Database everywhere

Server

Client

Client

Client

Client

Client

Database

Products.find({quantity: { $gt: 0 }}).count()

Page 16: Introduction to Meteor - revised edition

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()

Page 17: Introduction to Meteor - revised edition

What’s Reactivity?

Page 18: Introduction to Meteor - revised edition

Fullstack Reactivity

Page 19: Introduction to Meteor - revised edition

Fullstack ReactivityTraditional programming

• var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7

Page 20: Introduction to Meteor - revised edition

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

Page 21: Introduction to Meteor - revised edition

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

Page 22: Introduction to Meteor - revised edition

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

Page 23: Introduction to Meteor - revised edition

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

Page 24: Introduction to Meteor - revised edition

Let’s look at latency

Page 25: Introduction to Meteor - revised edition

Let’s look at latency

Page 26: Introduction to Meteor - revised edition

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

Page 27: Introduction to Meteor - revised edition

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

Page 28: Introduction to Meteor - revised edition

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

Page 29: Introduction to Meteor - revised edition

What’s next?• Ready to dive into Meteor?

• meteorinaction.com

• Get in contact

• Twitter: @yauh

• E-Mail: [email protected]

• Blog: http://yauh.de

Page 30: Introduction to Meteor - revised edition