Building Reactive Apps with Meteor
•
1 like•328 views
Ignite talk about reactive development and Meteor (http://meteor.com). Initially held at dev@Interconnect 2015 (Las Vegas)
Recommended
Recommended
More Related Content
What's hot
What's hot (17)
Similar to Building Reactive Apps with Meteor
Similar to Building Reactive Apps with Meteor (20)
More from Florian Georg
More from Florian Georg (9)
Recently uploaded
Recently uploaded (20)
Building Reactive Apps with Meteor
- 1. © 2014 IBM CorporationFebruary 22 – 24, 2015 Stop Observing, Start Reacting A new way for building collaborative, real-time Apps
- 11. meteor.com
- 12. Single Page Apps (Web/Mobile) Based on Node.js MongoDB Client-side HTML Templating devOps tooling Meteor – Go Full Stack
- 13. CLI and Folder Structures Sent only to client (concat + minified) Server backend only Everything else: runs on Client AND Server
- 14. https://meteorhacks.com/introduction-to-ddp.html Pub-Sub + RPC EJSON Websockets / Long Polling Currently using MongoDB (Redis) The DDP Protocol
- 15. Tracker Infers & tracks code dependencies Automatic (Re-) Computations Reactivity on data changes Event-driven: no listeners
- 16. Pub/Sub to Collections Instant updates to all Clients Isomorphic API Reactive Collections
- 17. Instant UI updates Client-side data replica Latency Compensation https://meteorhacks.com/introduction-to-latency-compensation.html
- 18. Simplified UI code Auto-updates DOM on changes Reactive UI Templates client/templates/MyTalks.html client/templates/MyTalks.js
- 19. Social Accounts Security Package Management Cordova / Hybrid Mobile support Easy to consume Node.js packages Ready to use Platform
Editor's Notes
- Back in the 90’s … Websites looked and felt pretty much like this IE had a marketshare of around 90 % - While it was the web – it was still pretty „static“ and aligned with the needs single user – use cases
- Technologies back then While we tried to build more appealing and interactive apps Used things like Perl for CGI and languages and frameworks that were originally not built for the web PHP was the arguably first scripting language that enabled larger web applications for many of us And the coolest technologies for building engaging client and user experience was Macromedia Flash https://cdn.tutsplus.com/active/uploads/legacy/articles/017_flashStory/img/about-flash4.png http://froebe.net/blog/wp-content/uploads/2010/02/perl.jpeg
- Welcome to the age of “Cloud” Fast forward two decades, much has changed and we need to adapt to a new world Find out: how do we build applications for the „age of cloud computing“ What are the impacts on business and delivery models, and what kind of technology can we use to build products in that context
- The first thing that I noticed was: This was interesting – back then I was quite happy to move away from brittle web scripting towards “serious” programming languages like Java EE Now what I found interesting is how technologies that were out there for a long time, outgrow their initial limitations and playing grounds during the last years So technologies like JavaScript “matured” into foundations that can now be used to build and operate enterprise-grade Cloud software
- These „new old“ technologies provide delivery teams crucial capabilities for business agility: - Get MVPs fast to the market, learn & validate quickly Lean collaboration as integrated teams using common languages on all application layers Elastically scale out and replicate success as your product adoptions grows
- Changing demands for modern apps: Deploy and run at any scale – from mobile devices to world-wide distributed cloud clusters Users expect milliseconds respond times And 100% uptime So in the end we want Applications that are Responsive, Resilient , Elastic and Message Driven – these are Reactive Applications
- Responsiveness: the system must respond in a timely manner if at all possible. This is the foundation of good UX and enaging systems. Resiliency: Also stays responsive and available in the event of errors – using concepts like replication, isolation and delegation for high-availability Elasticity: Stay responsive under varying workloads – e.g. implies architecture without central bottlenecks, enabling concepts like dynamic sharding, replication and cost-effective scaling Message-driven: All these are enabled non-blockimg. asynchronous message-passing systems components.
- When building these reactive applications, we need to solve certain problems over and over again. e.g. Handling user identity, social accounts, permissions Security and access control to protected data collections Application flow handling and routing And finally usually some „glue“ and devOps tooling to integrate all components into
- So when looking at the available options on how to build modern software systems, there is a vast number of comparable commercial and open source frameworks to pick and choose from. Research indicates that this can result in a psychological phenomenon called „choice overload“, leading situations where teams waste time on evaluating lots of technology – and being unsatisfied with their choice no matter what. From my perspective, that‘s one reason why opinionated, full-stack frameworks and also PaaS are appealing to many developers.
- With the meteor Framework, I‘ll choose one particular example to give a very brief overview of how such a framework can look like. Meteor just raised 11Mi$ VC, and is arguably the most capable and popular platform today to build single-page, reactive, real-time collaborative apps.
- What is Meteor ? It is a full stack framework for building reactive web and hybrid mobile apps. It‘s based on Node.js,so async JavaScript from the client to the backend It currently uses MongoDB as a data store And brings a couple of ready-to-use components and tools, e.g. for client templating and build/test/deploy tooling
- In order to facilitate quick prototyping, Meteor provides a set of command line tools, and uses a small set of easy conventions, e.g. for project folder structures. Code can either run on the client, the server, or both.
- https://www.meteor.com/ddp The foundation is a protocol called DDP (distributed data protocol), which enables Publish/Subscribe and RPC over websockets or HTTP long polling. The data is exchanged as JSON messages, and enables Metor to do low latency „live queries“ against the backend data store. Currently backed by MongoDB. Simple protocol for fetching/live-updates structured data from the server Based on websockets, its like “REST for websockets” Client – Server protocol. While written for Meteor, other implementations are possible (e.g. Objective C) Live query against backend DBs: not just return result, but also real-time stream of create/update/delete messages as the result of the query changes over time Currently for MongoDB (using oplog tailing), experimental for Redis. Read loads scale close to linear Works like a message bus without having to care about PubSub, Potentially the point to watch at massive scale – but pretty good for most SaaS Live query against backend DBs: not just return result, but also real-time stream of create/update/delete messages as the result of the query changes over time Currently for MongoDB (using oplog tailing), experimental for Redis. Read loads scale close to linear Works like a message bus without having to care about PubSub, Potentially the point to watch at massive scale – but pretty good for most SaaS
- https://www.meteor.com/tracker Based on the DDP protocol, there‘s the so called Tracker: Lightweight library for transparent reactive programming Lets you build complex event-driven logic without boilderplate event handler code – no more listeners ! It automatically infers code dependencies and invalidates / recalculates as soon as some underlaying data / expression changes It’s like Pub/Sub updates automagically – just write your logic !
- The next step in achieving reactivity is making data collections “real time”, e.g. reactive. With meteor, the server publishes a view on the data, and all subscribing clients get automatically updated on changes.
- To even more improve reactivity there are advanced concepts transparently buit in, e.g. latency compensation, where the client UI updates don’t have to wait for the server rountrip to finish.
- Putting everything together, you can write incredibly productive code, e.g. logic-less UI templates. You don’t need to write data binding code or listening for changes – the UI gets updated in a reactive fashion as soon as the data changes.
- Aside from the groundwork, Meteor includes a rich set of common components, e.g. for handling Social Accounts and Authentication, Security and Package Management for building hybrid mobile apps, and others. Aside from that, it’s quite easy to use Node.js packages, although some modifications may be needed.
- And finally theres a whole ecosystem of extensions and packages to use.
- So I hope you got a good overview of what reactive development is all about, Why meteor is so popular currently. If you want to see more of it, and know e.g. hot to run apps on our bluemix PaaS, Just ping me – I‘m around here. Thanks.