12. 結果: 複雑な構造
HTML Templates App Logic
Reactive UI update system
Native mobile container
Speculative client-side updates
Client-side data store
Custom data sync protocol
Realtime database monitoring
Build & update system
We want to focus on the app, not the infrastructure
App Microservices
PLATFOR
M
Blaze
Livequery
Client Data Cache
MongoDB SQL REST
App Components & Logic
React Angular
SERVER
CLIENT
SOURCES
DDP
MobileWeb
20. Workpop: Raised $7.9 million Series A led by Trinity Ventures
“the most rapid prototyping, iteration and development
we’ve ever seen from an early stage company”
21. Meteor community
Over 200 meetup groups
Over 6000 community-authored packages
Ranked in top10 on GitHub
23. Meteor Development Group
Funded (won’t disappear)
- $20 Million series B - May 2015
Active development by full-time employees
Revenue product: Galaxy
- high-availability/large scale Meteor hosting
Meteor platform is MIT-licensed
- host anywhere; you own the code
27. Example Apps
Todos — a full-featured todo list app
collaborative app, access control, responsive
meteor create --example todos
Local Market — a mobile social engagement app
Twitter integration, camera integration, mobile-optimized
meteor create --example localmarket
I’m __________, and I’m here to talk to you about Meteor.
Today we’re going to do a broad overview of Meteor.
[speak through the list]
So let’s get started!
What is Meteor?
[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.
So how does Meteor do this? Let’s 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 Meteor’s 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
Everyone here probably has a framework that they are already comfortable in. So why would you want to consider trying Meteor?
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 didn’t 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 that’s 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 it’s 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 it’s important that the changes be reflected immediately. There is a lot going on here, and managing it can get really complex.
In Trello’s own words: “We’ve bled all over it.”
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.
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 minimongo…
which 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 validation
In 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.
So let’s review what we saw:
On the infrastructure side,
* we saw that it’s 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.
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 Meteor’s 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.
All of this adds up to the Meteor platform. It’s 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.
So, who is 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
Let’s look at one of them
Workpop is a job marketplace for hourly workers built on Meteor
They were able to raise $8 million, and their key investor,
Trinity ventures, said the pace of development was “fastest they’ve ever seen from an early stage company”
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 repository…and 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.
But when you’re looking at a platform, you should also consider who is behind it, because you really want to know how it’s likely to develop and whether they will stand behind it.
So let’s 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
You’ll want to understand Meteor’s 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
Let’s 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 Meteor’s 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 MDG
We’ll see the ability to support communication with other services through REST and other microservice architectures
And we’ll see better support for large applications as well as the full integration of ES6 modules
You can find learning resources at meteor.com/learn. Here are a few highlights:
If you want to take Meteor for a spin, I’d 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
There’s 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
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.
So, that’s it! I’d like to thank you for your time, and I’d like to know if you have any questions.