Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Meteor-nepal introduction to meteor
Similaire à Meteor-nepal introduction to meteor (20)
Dernier
Dernier (20)
Meteor-nepal introduction to meteor
- 1. The JavaScript app platform www.meteor.com var piyush = { github : piyushcoder , twiter : nepalipiyush, co-founder: wsnepal }
- 2. What We’ll Cover What is Meteor? Why Meteor? Code Demo Architecture What’s next?
- 4. 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
- 5. Build advanced apps quickly with a small team
- 6. Meteor components Command Line Tool View Layer – Blaze (Angular, React) Livequery Full stack package system – atmospherejs.com Build system Cordova/Phonegap
- 7. Why Meteor?
- 8. Table stakes TodayYesterday Browser Mobile Refresh button Live updates Individual sessions Multiuser collaboration Links and forms Native-style GUI
- 9. Updates without refreshing the browser
- 11. 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
- 12. Meteor code demo
- 13. MongoDB DOM Server Client Meteor Data Flows Minimongo Optimistic UI
- 14. What We Saw – Meteor Tool Hot code push Multi-platform support Full-stack packages
- 15. What We Saw – Framework Features Reactive rendering Database sync Intuitive, isomorphic API Minimal boilerplate code
- 16. The Meteor Platform App Microservices PLATFORM Blaze Livequery Client Data Cache MongoDB SQL REST App Components & Logic React Angular SERVER CLIENT SOURCES DDP MobileWeb
- 17. Roadmap Meteor 1.3 – late march • ES6 with import/export feature • NPM modules by default Soon enough • APOLLO <reactive graphQl>
- 18. 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
- 19. 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
- 20. We’re HIRING
Notes de l'éditeur
- 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.
- 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, who is using 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.