Top Banner
The JavaScript app platform www.meteor.com
33

Meteor Introduction - Ashish

Apr 11, 2017

Download

Software

Ashish Kumar
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Meteor Introduction - Ashish

The JavaScript app platform

www.meteor.com

Page 2: Meteor Introduction - Ashish

What We’ll Cover

What is Meteor?Why Meteor?Code DemoWho is using it?Who is behind it?What’s next?

Page 3: Meteor Introduction - Ashish

What is Meteor?

Page 4: Meteor Introduction - Ashish

What is Meteor …

A reactive , data-synchronizing,

Latency-compensating, time-saving platform.

for building fast, interactive web apps

Page 5: Meteor Introduction - Ashish

One codebase,all platforms

Open and extensible

100% pureJavaScript

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

What is Meteor…

Page 6: Meteor Introduction - Ashish

What's different ?

Traditional App• Browser makes a request to server,

http://example.com/items.html

•server responds with html code <html>

<p>Item 1</p>

<p>Item 2</p>

</html>

Page 7: Meteor Introduction - Ashish

What's different ?Meteor App

•Browser subscribes (to items) from Server

Subscribe to items

•Also browser knows when new items added on

server.•Response is :<p>Item 1</p><p>Item 2</p>

Page 8: Meteor Introduction - Ashish

What's different ?

Meteor AppLatency Compensation

When adding new item by browser, •local storage updated first, •then send to server for update.•Server then updates client “Everything

went OK” .Hence Reactive.

Page 9: Meteor Introduction - Ashish

What's different ?

Meteor AppBrowser ServerAngular , Ember,

Backbone, React,

XMLHttpRequest,WebSocket,

Sockjs,jQuery,BootStrap

Rails, Django,

PHP,Node, Go,

Express,MongoDB,MySQL,

AppEngine, Postgres,Apache

Page 10: Meteor Introduction - Ashish

What's different ?

Meteor App

•Write all JavaScript (if you want to)

•Use the same APIs on client and server.

Page 11: Meteor Introduction - Ashish

Build advanced apps quicklywith a small team

Page 12: Meteor Introduction - Ashish

Meteor componentsCommand Line ToolView Layer – Blaze (Angular, React)LivequeryFull stack package system – atmospherejs.-comBuild system

Cordova/Phonegap

Page 13: Meteor Introduction - Ashish

Why Meteor?

Page 14: Meteor Introduction - Ashish

Table stakesTodayYesterday

Browser Mobile

Refresh button Live updates

Individual sessions Multiuser collaboration

Links and forms Native-style GUI

Page 15: Meteor Introduction - Ashish

Updates without refreshing the browser

Page 16: Meteor Introduction - Ashish

Real-time collaboration

Page 17: Meteor Introduction - Ashish

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

PLATFORM

Blaze

Livequery

Client Data Cache

MongoDB SQL REST

App Components & Logic

React Angular

SERVER

CLIENT

SOURCES

DDP

MobileWeb

Page 18: Meteor Introduction - Ashish

Meteor code demo

Page 19: Meteor Introduction - Ashish

MongoDB DOMServer Client

Messages.

insert()Messages.insert()

Meteor Data Flows

MinimongoOptimistic UI

Page 20: Meteor Introduction - Ashish

What We Saw – Meteor Tool

Install to deploy in minutes w/free hostingHot code pushMulti-platform supportFull-stack packages

Page 21: Meteor Introduction - Ashish

What We Saw – Framework Features

Reactive renderingDatabase sync Intuitive, isomorphic APIMinimal boilerplate code

Page 22: Meteor Introduction - Ashish

The Meteor Platform

App Microservices

PLATFORM

Blaze

Livequery

Client Data Cache

MongoDB SQL REST

App Components & Logic

React Angular

SERVER

CLIENT

SOURCES

DDP

MobileWeb

Page 23: Meteor Introduction - Ashish

Who is using Meteor?

Page 24: Meteor Introduction - Ashish

Companies using Meteor

Page 25: Meteor Introduction - Ashish

Workpop: Raised $7.9 million Series A led by Trinity Ven-tures

“the most rapid prototyping, iteration and development we’ve ever seen from an early stage company”

Page 26: Meteor Introduction - Ashish

Meteor community

Over 200 meetup groupsOver 6000 community-authored pack-agesRanked in top10 on GitHub

Page 27: Meteor Introduction - Ashish

Who is behind Meteor?

Page 28: Meteor Introduction - Ashish

Meteor Development GroupFunded (won’t disappear)

- $31 Million in 3 rounds - 2015Active development by full-time employeesRevenue product: Galaxy

- high-availability/large scale Meteor hostingMeteor platform is MIT-licensed

- host anywhere; you own the code

Page 29: Meteor Introduction - Ashish

What’s next?

Page 30: Meteor Introduction - Ashish

Roadmap

Meteor 1.2 – Summer 2015• ES2015 (ES6)• 1st Class Angular, React supportFuture Directions• Full-stack reactive SQL• REST and microservices• Large app patterns, ES2015 modules, and

more

Page 31: Meteor Introduction - Ashish

meteor.com/learn

Official Meteor TutorialOfficial Meteor DocsMeteor ForumsDiscover Meteor (book)Stack Overflow

meteor.com/try

docs.meteor.com

forums.meteor.com

book.discovermeteor.com

stackoverflow.com/questions/tagged/meteor

Page 32: Meteor Introduction - Ashish

Example Apps

Todos — a full-featured todo list appcollaborative app, access control, respon-

sive

meteor create --example todos

Local Market — a mobile social engagement appTwitter integration, camera integration, mobile-optimized

meteor create --example localmarket

Page 33: Meteor Introduction - Ashish

www.meteor.com

Thank You!