PowerPoint Presentation

The JavaScript app platform

www.meteor.com

Im __________, and Im here to talk to you about Meteor.

MeteorMeteor

Today were going to do a broad overview of Meteor.

[speak through the list]

So lets get started!

Meteor?

What is Meteor?

1100% pureJavaScript

Collaborative iOS and Android app1000 JavaScriptWebJavaScript

[time bullets with *]

Meteor is a full-stack, open source platform for building web and mobile apps in JavaScript

*With Meteor you can write your whole app in pure JavaScript, frontend and backend.

*And from that single JavaScript codebase, you can target iOS, Android, and the web.

*Meteor is made of packages and is MIT-licensed, so it is very open and extensible.

*And because of its design and tooling, you can get started and productive very quickly.

*For example, the app pictured on the right is a demo that implements a collaborative mobile app in less than 1000 lines of js.

In short, the goal of Meteor is to allow you to build advanced apps quickly, with a small team allowing even individuals to achieve things that used to be possible only at large companies like Google and Facebook.

Meteor Blaze (Angular, React)(Livequery) atmospherejs.com Cordova/Phonegap

So how does Meteor do this? Lets step through some of Meteors components

It has a command line tool, which allows you to create, edit, and deploy apps

It has a view layer, which by default is Meteors Blaze package, but you use any framework you want, such as Angular, React, or Famous

Livequery takes a production database like MongoDB and transforms it into a real-time database. You can think of it like an open-source version of Firebase

Meteor has a full-stack package system that coordinates server, client, and mobile codebases and is hosted on atmospherejs.com

And it has a build system that includes not just client and browser but also mobile

Meteor

Everyone here probably has a framework that they are already comfortable in. So why would you want to consider trying Meteor?

Table stakes

PC

UI

To begin with, table stakes for app functionality have changed a lot over the last 5-10 years.

We went from a place where all users came to sites on *desktop* browsers to where the majority now arrives on mobile.

We went from where we didnt mind hitting the refresh button to get updates to where we expect to be notified live.

We went from being a group of individuals consuming content to being a collaborative team that can create and change that content together.

And we went from a simple web of links and forms to where we expect our web apps to have a UI thats as good as native apps.

This started with apps like Twitter, which notifies you with this scrolling alert when there are new tweets in a conversation. This is pretty easy to do in most frameworks by polling the server, and its OK if the notification comes a few seconds after the new tweets come in. But things have become more complicated

This is Trello. We have two users, one on top and one on the bottom. When the top user adds some text and hits enter, the other user immediately sees that text appear as a card. Then the first user can drag that card and the user of the bottom can see it move. Note that and this is a very sophisticated U with features like drag and drop. Also, these people may be talking live on the phone or maybe a hangout, so its important that the changes be reflected immediately. There is a lot going on here, and managing it can get really complex.

Brett KieferThe Trello Tech Stack

http://blog.fogcreek.com/the-trello-tech-stack/

In Trellos own words: Weve bled all over it.

:

HTML TemplatesApp LogicReactive UI update systemNative mobile containerSpeculative client-side updatesClient-side data storeCustom data sync protocolRealtime database monitoringBuild & update systemWe want to focus on the app, not the infrastructure

App Microservices

PLATFORM

Blaze

Livequery

Client Data Cache

MongoDB

SQL

REST

App Components & Logic

React

Angular

SERVERCLIENTSOURCES

DDP

Mobile

Web

The problem is that we started with simple frameworks that were designed for the way the web used to be, and we are adding more and more tools to it, spending much more time integrating them.

*This is why Meteor was created: to bring together a collection of well integrated tools, allowing you to build highly interactive apps with much less code.

Meteor

MongoDBDOMServerClient

Messages.insert()Messages.insert()Meteor

MinimongoOptimistic UI

We are now able to understand how data flows through Meteor.

When we hit enter and the code does an insert into the messages collection, it does so using something called a meteor method,The Meteor method sends the update over a websocket to the server, but it also updates minimongowhich pushes the data immediately to the DOM. This is called optimistic ui, and it makes the app feel really fast and responsive.Meanwhile, the message goes to the server, where the same insert runs, but here the server can authenticate the user and do other validationIn most cases, the result is the same, so nothing will change. But say another user has added a message while ours was in flight. That message should go before ours.This will be propagated back through the websocket, and the optimistic update will be discarded and replaced with the data from the server. Meanwhile, this update is also pushed to all other subscribed clients using the same mechanism.

What We Saw Meteor ToolInstall to deploy in minutes w/free hostingHot code pushMulti-platform supportFull-stack packages

So lets review what we saw:

On the infrastructure side,

* we saw that its quick to install Meteor, build apps, and deploy them with free hosting.

* We saw hot code push

* We saw support for iOS and Android

* And we saw full-stack packages, like accounts, which coordinate UI elements with front- and back-end code.

What We Saw Framework FeaturesReactive renderingDatabase sync Intuitive, isomorphic APIMinimal boilerplate code

On the framework side,

*we saw reactive rendering, where Meteor rerenders the DOM using dynamic data.

*We saw database synchronization between 2 clients and a server.

*We saw Meteors intuitive, isomorphic API, where we were able to query with the same API on the client and the server, even though we were working with different packages.

*And we saw how little code we needed to build a functional chat app.

The Meteor Platform

App Microservices

PLATFORM

Blaze

Livequery

Client Data Cache

MongoDB

SQL

REST

App Components & Logic

React

Angular

SERVERCLIENTSOURCES

DDP

Mobile

Web

All of this adds up to the Meteor platform. Its called a platform and not a framework because it encompasses an end-to-end solution for building apps completely with Javascript, including the full stack and all the tooling required to get from nothing to a complete web application.

Who is using Meteor?

So, who is using Meteor?

Companies using Meteor

Here are some examples. 4 of these companies raised over $1 million in series A rounds, one was acquired by Box, a couple have exceeded 100k users in over 50 countries

Workpop: Raised $7.9 million Series A led by Trinity Ventures the most rapid prototyping, iteration and development weve ever seen from an early stage company

Lets look at one of themWorkpop is a job marketplace for hourly workers built on MeteorThey were able to raise $8 million, and their key investor,Trinity ventures, said the pace of development was fastest theyve ever seen from an early stage company

Meteor communityOver 200 meetup groupsOver 6000 community-authored packagesRanked in top10 on GitHub

Meteor also has a very strong community, with over 200 meetup groups worldwide you can check them out at meetup.com [mention your local meetup]. The community is very active in discussions on the Meteor forum, and there now over 6000 packages in Atmosphere, the Meteor package repositoryand that number is growing rapidly.Meteor has reached the top ten starred repos on Github and is likely to overtake Rails later this year.

The community is really friendly and welcoming.

Who is behind Meteor?

But when youre looking at a platform, you should also consider who is behind it, because you really want to know how its likely to develop and whether they will stand behind it.

Meteor Development GroupFunded (wont disappear)- $20 Million series B - May 2015Active development by full-time employeesRevenue product: Galaxy - high-availability/large scale Meteor hostingMeteor platform is MIT-licensed- host anywhere; you own the code

So lets talk about the Meteor Development Group.

One thing to pay attention to is that they are well-funded they just raised a $20 million dollar round, and they are not in danger of disappearing anytime soon. This is actually really important, because a lot of times developers will make framework and then get hired away or acquired, and the framework stops developing.

It also means that Meteor is being developed by full-time employees who came from companies Google, Facebook, and Asana

Youll want to understand Meteors revenue model. Meteor will have a service called Galaxy, which will allow you to `meteor deploy` directly to robust, high-availability clusters on services like AWS. The free service will continue to be free

And the Meteor platform is MIT-licensed, so you can do what you like with it and can still host Meteor anywhere that can host node apps

Whats next?

Meteor 1.2 2015ES2015 (ES6)1st Class Angular, React supportFull-stack reactive SQLREST and microservicesLarge app patterns, ES2015 modules, and more

Lets look at the latest developments. First, for 1.2

You can write your Meteor code in ES015, formerly known as ES6, so you can start using the latest in javascript.Angular and React will graduate from community-supported to fully integrated. You can remove Meteors Blaze completely if you like

In the near future, we can look forward to full livequery support in SQL. You can of course use the node drivers for any existing database, and there are also community packages for Redis, Postgres, and others, but this will have the full support of MDGWell see the ability to support communication with other services through REST and other microservice architecturesAnd well see better support for large applications as well as the full integration of ES6 modules

meteor.com/learn

MeteorMeteorMeteorDiscover Meteor ()Stack Overflow

meteor.com/trydocs.meteor.comforums.meteor.combook.discovermeteor.comstackoverflow.com/questions/tagged/meteor

You can find learning resources at meteor.com/learn. Here are a few highlights:

If you want to take Meteor for a spin, Id try the official meteor tutorial. It takes only an hour or so, and it shows you how to do everything I showed you - and a few other things - in more detail.

You can find the full Meteor API at docs.meteor.com

The Meteor community is very active and has group discussions at forums.meteor.com

Theres a great book on Meteor called Discover Meteor. One of the authors also created the first Meteor community package manager and now works at Meteor

And if you have how-to questions, be sure to check out stack overflow with questions tagged meteor

Example AppsTodos a full-featured todo list appcollaborative app, access control, responsive

meteor create --example todosLocal Market a mobile social engagement appTwitter integration, camera integration, mobile-optimizedmeteor create --example localmarket

If you want a good sample app to play around with in Meteor, you can download either of these from the command line using the Meteor tool

to-dos shows how to build a collaborative app that demonstrates access control and is responsive to desktop and mobile.

And Local Market, which was pictured near the beginning of this presentation, is a mobile-optimized app you can actually load it on your phone. It demonstrates social media integration with Twitter, camera integration, and how to build a beautiful UI with Meteor.

www.meteor.com

So, thats it! Id like to thank you for your time, and Id like to know if you have any questions.