Meteor Introduction - Ashish
•Download as PPTX, PDF•
0 likes•363 views
Meteor is a reactive, data-synchronizing platform for building fast, interactive web and mobile apps using a single JavaScript codebase. It allows for real-time collaboration and updates without page refreshes by synchronizing data between the client and server. Companies like Workpop have used Meteor to rapidly prototype and build apps. The Meteor Development Group actively maintains and develops the open source platform.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Meteor Introduction - Ashish
Similar to Meteor Introduction - Ashish (20)
More from Entrepreneur / Startup
More from Entrepreneur / Startup (12)
Recently uploaded
Recently uploaded (20)
Meteor Introduction - Ashish
- 1. The JavaScript app platform www.meteor.com
- 2. What We’ll Cover What is Meteor? Why Meteor? Code Demo Who is using it? Who is behind it? What’s next?
- 4. What is Meteor … A reactive , data-synchronizing, Latency-compensating, time-saving platform. for building fast, interactive web apps
- 5. One codebase, all platforms Open and extensible 100% pure JavaScript Collaborative iOS and Android app <1000 lines of JavaScript A full-stack, open source platform for building web and mobile apps in JavaScript Fast and fun development What is Meteor…
- 6. What's different ? Traditional App • Browser makes a request to server, http://example.com/items.html •server responds with html code <html> <p>Item 1</p> <p>Item 2</p> </html>
- 7. What's different ? Meteor App •Browser subscribes (to items) from Server Subscribe to items •Also browser knows when new items added on server. •Response is : <p>Item 1</p> <p>Item 2</p>
- 8. What's different ? Meteor App Latency Compensation When adding new item by browser, • local storage updated first, • then send to server for update. • Server then updates client “Everything went OK” . Hence Reactive.
- 9. What's different ? Meteor App Browser Server Angular , Ember, Backbone, React, XMLHttpRequest, WebSocket, Sockjs,jQuery, BootStrap Rails, Django, PHP, Node, Go, Express, MongoDB, MySQL, AppEngine, Postgres, Apache
- 10. What's different ? Meteor App •Write all JavaScript (if you want to) •Use the same APIs on client and server.
- 11. Build advanced apps quickly with a small team
- 12. Meteor components Command Line Tool View Layer – Blaze (Angular, React) Livequery Full stack package system – atmospherejs.com Build system Cordova/Phonegap
- 13. Why Meteor?
- 14. Table stakes TodayYesterday Browser Mobile Refresh button Live updates Individual sessions Multiuser collaboration Links and forms Native-style GUI
- 15. Updates without refreshing the browser
- 17. Result: Complex stack 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
- 18. Meteor code demo
- 19. MongoDB DOM Server Client Meteor Data Flows Minimongo Optimistic UI
- 20. What We Saw – Meteor Tool Install to deploy in minutes w/free hosting Hot code push Multi-platform support Full-stack packages
- 21. What We Saw – Framework Features Reactive rendering Database sync Intuitive, isomorphic API Minimal boilerplate code
- 22. The Meteor Platform App Microservices PLATFORM Blaze Livequery Client Data Cache MongoDB SQL REST App Components & Logic React Angular SERVER CLIENT SOURCES DDP MobileWeb
- 23. Who is using Meteor?
- 25. 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”
- 26. Meteor community Over 200 meetup groups Over 6000 community-authored packages Ranked in top10 on GitHub
- 27. Who is behind Meteor?
- 28. Meteor Development Group Funded (won’t disappear) - $31 Million in 3 rounds - 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
- 29. What’s next?
- 30. Roadmap Meteor 1.2 – Summer 2015 • ES2015 (ES6) • 1st Class Angular, React support Future Directions • Full-stack reactive SQL • REST and microservices • Large app patterns, ES2015 modules, and more
- 31. meteor.com/learn Official Meteor Tutorial Official Meteor Docs Meteor Forums Discover Meteor (book) Stack Overflow meteor.com/try docs.meteor.com forums.meteor.com book.discovermeteor.com stackoverflow.com/questions/tagged/meteor
- 32. 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
Editor's Notes
- 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.
- 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.