Programming in Reactive style with MeteorJS

{ By: "Nirmal V",
Date: 15/07/2017
Location: Kochi Ruby Meetup, Kochi }

Full stack pure JS Framework
for building awesome apps in no time

What's inside

• MongoDB
• NodeJS
• Lots of packages

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.

Meteor Features

• Web and Mobile − Meteor offers platform for developing Web, Android and IOS apps.

• Universal Apps − The same code for web browsers and mobile devices.

• Packages − Huge number of packages easy to install and use.

• Meteor Galaxy − Cloud service for Meteor app deployment.

Meteor Advantages

• Developers only need JavaScript for server and client side development.
• The coding is very simple and beginner friendly.
• Meteor apps are real time by default.
• Official and community packages are huge time saver.

Meteor Limitations

• Meteor isn't very suitable for large and complex application.

• There is a lot of magic going on when working with Meteor so developers might find themself limited in some way.

Installing Meteor

If you are familiar with the command line, you’ll know that this command just downloads (or curls) a bunch of files from meteor.com and pipes it to the bin/sh directory. bin/sh is the location of the script interpreter "Shell", which will run the script.

 curl https://install.meteor.com | /bin/sh

This meteor command takes care of loading up all our files and scripts. Now open up a web browser and navigate to http://localhost:3000/.  

Creating a meteor App

meteor create meteorApp
cd meteorApp
meteor

Reactive Programming

One of the really cool things about Meteor is the concept of "Reactive Programming". What this term essentially means is that, any changes made to the HTML, CSS and Javascript files will be automatically picked up by Meteor.  So once you save a file after making changes, the browser will automatically reload to display the changes. You don't have to restart the application or even refresh your browser.

1. A Meteor application contains HTML/CSS and JavaScript that runs inside a client (web browser) and JavaScript that runs on the server (inside a NodeJS wrapper).
2. Meteor automates the packaging and transmission of JS, CSS files.
3. If you add a javascript file inside the application directory, the javascript code will be executed in both the server and the client .

Application Structure

1. HTML template files are always loaded before everything else
2. Files in the lib directory are loaded next.
3. Files that match   main.*  are loaded last
4. Files in subdirectories are loaded before files in parent directories
5. Within a directory, files are loaded in alphabetical order.

Load Order

Since Meteor uses a single language – Javascript on both the client(browser) and the server, Meteor provides us with isClient and isServer checks to separate out what part of the code needs to be executed on the server and what needs to be executed inside the browser.

Separating Server/Client Code

if (Meteor.isClient) {
  // Client Code....
}

if (Meteor.isServer) {
  // Server code....
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteor lets us create two folders - server and client. The code that is inside of the server directory will only be executed on the server and similarly, the code that is inside the client directory will only be executed inside the browser.

Separating Server/Client Code

Meteor server will serve any files under the public directory. Put your favicon.ico, robots.txt, sitemap.xml and images in this directory. 

Public assets

Files from this folder can be accessed only from the server. They will be hidden from the client. You can put JSON or EJSON files that only server will use inside this folder.

Private

Some JavaScript libraries are exporting variables as globals. Use this folder for files that needs to be executed without being wrapped in a new variable scope.

client/compatibility

Meteor - Templates

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>
 
<template name = "myParagraph">
   <p>{{text}}</p>
</template>

meteorApp.html

if (Meteor.isClient) {
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

meteorApp.js

Meteor - Templates

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>

meteorApp.html

if (Meteor.isClient) {
   // This code only runs on the client
   Template.body.helpers({
      paragraphs: [
         { text: "This is paragraph 1..." },
         { text: "This is paragraph 2..." },
         { text: "This is paragraph 3..." },
         { text: "This is paragraph 4..." },
         { text: "This is paragraph 5..." }
      ]
   });
}

meteorApp.js

Meteor - Template Events

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <p>PARAGRAPH...</p>
   <button class = "myClass">CLASS</button>
   <button id = "myId">ID</button>
</template>

if (Meteor.isClient) {
   Template.myTemplate.events({
      'click p': function(){
         console.log("The PARAGRAPH is clicked...");
      },	
      'click .myClass': function(){
         console.log("The CLASS is clicked...");
      },	
      'click #myId': function(){
         console.log("The ID is clicked...");
      },
   });
}

Meteor - Forms

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "text" name = "myForm">
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

if (Meteor.isClient) {

   Template.myTemplate.events({
      'submit form': function(event){
         event.preventDefault();
         var textValue = event.target.myForm.value;
         console.log(textValue);
         event.target.myForm.value = "";
      }
   });
}

The client and server share the same database API.  Code running on the server has direct access to the database but the code running on the client does not.

Every Meteor client includes an in-memory database cache. Server publishes sets of JSON documents and clients subscribes to those sets.

Reactive datastore - a data store that will update its templates when its value itself changes.

• Session Storage
• Collections

DATA STORE

Session Storage

Session storage allows us to store key-value pairs that are reactive in nature. This can be used to keep track of the current page or current user or for keeping our UI in sync.

Session.set("currentTask", "Learn Meteor");
Session.set("currentPage", "documentationPage");

Session.get("currentTask"); 
Session.get("currentPage");

Collections

MongoDB is the only database that is currently supported by Meteor.

Meteor.Collection class is used to declare and manipulate MongoDB collections.

Tasks = new Meteor.Collection("tasks");

Tasks.insert({ title: "Learn Meteor", priority: 1 });

Tasks.find({});

Tasks.find({ title: "Learn Meteor" });

Tasks.update({ title: "Learn Meteor }, { priority: 2 

Meteor - Email

if (Meteor.isServer) {

   Meteor.startup( function() {
      process.env.MAIL_URL = "smtp://YOUR_DEFAULT_SMTP_LOGIN:
YOUR_DEFAULT_PASSWORD@smtp.mailgun.org:587";
		
      Email.send({
         to: "toemailadress@email.com",
         from: "fromemailadress@email.com",
         subject: "Meteor Email",
         text: "The email content..."
      });
		
   });
}

Packaging and Deploying

meteor deploy js-conf.meteor.com

meteor bundle js-conf.tgz

nirmalkamath@gmail.com

https://www.linkedin.com/in/nirmal-v-a2bb9657/

Thanks!