Quick intro to Meteor JS

Using the data provided by the Meteor, constructed a small and quick look to this great framework

Transcript

1. METEOR JS A complete open source platform for building web and mobile apps.
2. curl https:// install.meteor.com/ | sh Installation
3. Let’s create a quick app
4. Principles • Data on the Wire. Meteor doesn't send HTML over the network. The server sends data and lets the client render it. • One Language. Meteor lets you write both the client and the server parts of your application in JavaScript. • Database Everywhere. You can use the same methods to access your database from the client or the server. • Latency Compensation. On the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly. • Full Stack Reactivity. In Meteor, realtime is the default. All layers, from database to template, update themselves automatically when necessary. • Embrace the Ecosystem. Meteor is open source and integrates with existing open source tools and frameworks. • Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Meteor's main functionality has clean, classically beautiful APIs.
5. A simple to-do app • meteor create simple-todos • That will create a folder with the following files • simple-todos.js # a JavaScript file loaded on both client and server • simple-todos.html # an HTML file that defines view templates • simple-todos.css # a CSS file to define your app's styles • .meteor # internal Meteor files
6. THE HTML The important parts here are, we got a each cycle that will print a task for each one in the tasks array, the template tasks it’s down and it shows an <li> element with some text.
7. THE JAVASCRIPT Plain simple, we populate the tasks array with various task objects. But this only lives in the client, if you reload your browser after making changes to this collection, all hope will be lost.
8. COLLECTIONS Meteor works with Mongo.db, so we we’ll create a new collection and save everything to our data base
9. BODY EVENTS Now, to add data to our DB, we need a form to input that data, and also, we need a function that listens to the events of this form, in our case, we’ll use simple elements to get this done.
10. ADDING EDIT AND DELETE For this, we’ll need to add extra HTML that’s self explanatory, but there’s something to focus your attention here, can you find it? also if we would like to set checked tasks with a different class, we could add markup like this <li class="{{#if checked}}checked{{/if}}">
11. Where it’s great? Overall, this looks like your average node server
12. The same code runs from the client to the cloud, from packages to database APIs. The same code runs cross browsers and mobile devices via Meteor's unified Isobuild system.
13. Meteor presents 'Data-on-the-wire' with latency compensation and conflict resolution built-in. When data changes, updates propagate reliably to affected clients and users’ screens update via Livequery, full stack DB drivers and mini database sources.
14. Client GUI components provide the look, feel and response of a thick client app using Meteor's Blaze framework or integrating with AngularJS and ReactJS.
15. Meteor's Distributed Data Protocol (DDP) provides 'REST for Websockets', a standard protocol for delivering microservice APIs over Websockets that push data from the cloud to live-updating clients.
16. Meteor it’s great for everything