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.

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

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

3. Users expect more

4. Developers expect less

5. Have you met Meteor?
Meteor rocks!

6. “Back to the front
You will do what I say, when I say”
- Disposable Heroes

7. Database
everywhere
“Back to the front
You will do what I say, when I say”
- Disposable Heroes

8. Database
everywhere
“Back to the front
You will do what I say, when I say”
- Disposable Heroes
Full stack reactivity

9. Database
everywhere
“Back to the front
You will do what I say, when I say”
Full stack reactivity Latency compensation
- Disposable Heroes

10. The tech behind the magic
• JavaScript all the way
• Spacebars and JavaScript
in the browser
• Node.js on the server
• MongoDB as the database
• WebSockets as transport layer
• Distributed Data Protocol (DDP)

11. Database everywhere
Server
Client
Client
Client
Client
Client

12. Database everywhere
SELECT count(*)
FROM products
WHERE quantity > 1
Server
Client
Client
Client
Client
Client
Database

13. Database everywhere
Server
Client
Client
Client
Client
Client
Database
Data
Data
Data
Data
Data
SELECT count(*)
FROM products
WHERE quantity > 1
{{products.length}}

14. Database everywhere
Server
Client
Client
Client
Client
Client

15. Database everywhere
Products.find({quantity: { $gt: 0 }}).count()
Server
Client
Client
Client
Client
Client
Database

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

17. What’s Reactivity?

18. Fullstack Reactivity

19. Fullstack Reactivity
Traditional programming
• var a = 2;
var b = 5;
var c = a + b;
console.log(c);
# c is 7

20. Fullstack Reactivity
Traditional 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

21. Fullstack Reactivity
Traditional 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

22. Fullstack Reactivity
Traditional 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

23. Fullstack Reactivity
Traditional 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

24. Let’s look at latency

25. Let’s look at latency

26. Latency compensation
Premise:
Let’s pretend things work right the first time
6. Validate data 2. Validate data
Browser
MongoDB
MiniMongo
Code
Server
5. Call server method and send comment data
Code
User
1. Submit
comment
3. Simulate
storing to DB
7. Store to DB
8. Confirm success 4. Update
View

27. Anatomy of Meteor
• Meteor is a platform for developing web apps
• Everything you need to get started is
installed with a single command
• Imagine MEAN and grunt had a child
• Both Meteor and npm packages can
be used to extend functionality Node.js
CLI Tool
Smart
Packages
(DDP, Deps,
Blaze,
SpaceBars,
…)
MongoDB

28. 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

29. What’s next?
• Ready to dive into Meteor?
• meteorinaction.com
• Get in contact
• Twitter: @yauh
• E-Mail: stephan@yauh.de
• Blog: http://yauh.de