The Quickest way to build JavaScript App

Ashish Pandey

@ashishapy

blog.ashishapy.com

What is Meteor?

Language
Data
on wire
Rectivity
JavaScript, in all environments: application server, web browser, and mobile device.
The server sends data, not HTML, and the client renders it.
UI to seamlessly reflect the true state of the world with minimal development effort
https://www.meteor.com/

How do you choose technology stack ?

Let's get started 

Sample code
$ meteor create myidea
https://www.meteor.com/tutorials
https://atmospherejs.com/

Application Structure

Special Directories

imports/
node_modules/
client/
server/
public/
private/
client/compatibility
tests/

is not loaded anywhere and files must be imported using import

is not loaded anywhere & node.js packages installed

is not loaded on the server & all files are concatenated and minified in prod mode

is not loaded on the client & loads them into a Node.js server instance

are served as-is to the client

are only accessible from server code and can be loaded via the Assets API.

is for JS libraries that rely on variables declared with var

is not loaded anywhere and Use this for any test code

File Load Order

  1. HTML template files are always loaded before everything else
  2. Files beginning with main are loaded last
  3. Files inside any lib/ directory are loaded next
  4. Files with deeper paths are loaded next
  5. Files are then loaded in alphabetical order of the entire path

Few Common App Features

Analytics etc.

​Beautiful & Responsive UI
Account Management
Admin / CMS
Database
IT Security
Email
Routing
Testing

Router

$ meteor add iron:router
$ meteor add kadira:flow-router
Guide
Guide
meteor npm install --save react-router
Guide

Beautiful UI / Theme

Free Template: almsaeedstudio

Premium Template (Metero Compatible):

  1. Inspinia
  2. HOMER
  3. Rubix

meteor guide

https://guide.meteor.com/

Database

Server-side collections

Todos = new Mongo.Collection('Todos');

Client-side collections

Todos = new Mongo.Collection('Todos');

Local collections

SelectedTodos = new Mongo.Collection(null);

Designing your data schema

meteor add aldeed:simple-schema

meteor add jagi:astronomy

or

Lists.schema = new SimpleSchema({
  name: {type: String},
  incompleteCount: {type: Number, defaultValue: 0},
  userId: {type: String, regEx: SimpleSchema.RegEx.Id, optional: true}
});

JavaScript

Meteor 1.3 & 1.4

4.5
3.2
$ meteor npm install --save bcrypt

GraphQL

An Application Query Language
Ask for what you need, get exactly that
Get many resources in a single request
Powerful developer tools GraphiQL
ex. GraphQL Demo & Github GraphQL
No more versioning to evolve APIs
Works with any programming language & database
APIs are self documented
vs
Relay
Made with Slides.com