Meteor.JS - a Full Stack JavaScript Web Development Framework

1. Meteor
Next Generation Web Development

2. Startups
Big Corporations
Once Upon A Time

3. Startups
Small and nimble team
Infinite creative energy, resourcefulness.
Extremely adaptive
Ability to focus and make a small niche of
customers become extremely satisfied
Social networks, apps store, cloud
computing help startups to reach large
number of customers

4. Big Corporations
Thousands of employees.
Huge budget for sales & marketing,
R&D.
Efficient process after years of doing
business in place.
Recognized brand with loyal customers.
Established distribution channels with
network of partners and allies.

5. Most Startups fail !
1st year
2nd year
3rd year
4th year

6. But Some Hit a HOME RUN !
vs
vs

7. 7
Acting like a Lean Startup to Increase Success Rate!
Why build MVP ?

8. Turn an idea into MVP
Crafty product no one wants to use.
Products that only better funded
companies can build
Startup Product

9. Use MVP to take the beachead
Innovators
Early Majority
Early Adopters
Late Majority
Laggards
Beachead

10. Feedback Loop
Feedback Loop
Lean UX
Lean Analytics
Agile Development
Product Instinct & Intuition

11. Meteor
Next Generation Web Development

12. What is Meteor?
Why Meteor is a great tool for start-ups?

13. So you want to build a (rich) web app?

14. What do you use?

15. JS
Framework
Template
Library
Server &
Language
DB

16. Realtime?

17. Open Source Platform for building web apps
Full Reactive stack:
Client <--> Server <--> DB
What is Meteor?

19. Data on the Wire.
One Language.
Database Everywhere.
Latency Compensation.
Full Stack Reactivity.
Embrace the Ecosystem.
Simple and Clean APIs

20. Collections
Session
Templates
Helpers
Events
Pub/Sub

21. Messages = new Meteor.Collection("messages");
Messages.insert({text: "Hello, world!"});
msg = Messages.find({text: “help”).fetch();
Collections:
data store on server and client
data store on server and client

22. Session.set("Page.theme", "midnight");
Session.get("Page.theme");
Session:
global key/value store + reactivity
global key/value store + reactivity

23. <template name="mainpage">
<div class="{{theme}}">...</div>
</template>
Templates:
html string, instance, reactive
html string, instance, reactive

24. <template name="mainpage">
<div class="{{theme}}">...</div>
</template>
Template.mainpage.theme = function(){
Session.get("Page.theme");
}
Helpers:
data, iterators, logic, etc.
data, iterators, logic, etc.

25. Template.inviteDialog.events({
'click .themebutton': function (e, t) {
Session.set("Page.theme", e.currentTarget.id);
}});
Events:
event handlers, template specific
event handlers, template specific

26. Pub/Sub:
set of records
server publishes
client subscribes
client subscribes
client subscribes
client subscribes

27. Performance
Security
Single Page Apps
Community
Why is meteor good for startups?

28. @eventedmindeventedmind.com

29. twitter: @eventedmindemail: mather@eventedmind.comwww.eventedmind.com
Meteor
• Event Handling vs. Reactivity
• Reactive Data Sources
• Templates & Handlebars
• Reactive Rendering

30. twitter: @eventedmindemail: mather@eventedmind.comwww.eventedmind.com
eventedmind.com
@eventedmind