Meteor Introduction - Ashish

Post on 11-Apr-2017

239 Views

Category:

Software

1 Downloads

Preview:

Click to see full reader

Transcript

The JavaScript app platform

www.meteor.com

What We’ll Cover

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

What is Meteor?

What is Meteor …

A reactive , data-synchronizing,

Latency-compensating, time-saving platform.

for building fast, interactive web apps

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…

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>

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>

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.

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

What's different ?

Meteor App

•Write all JavaScript (if you want to)

•Use the same APIs on client and server.

Build advanced apps quicklywith a small team

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

Cordova/Phonegap

Why Meteor?

Table stakesTodayYesterday

Browser Mobile

Refresh button Live updates

Individual sessions Multiuser collaboration

Links and forms Native-style GUI

Updates without refreshing the browser

Real-time collaboration

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

Meteor code demo

MongoDB DOMServer Client

Messages.

insert()Messages.insert()

Meteor Data Flows

MinimongoOptimistic UI

What We Saw – Meteor Tool

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

What We Saw – Framework Features

Reactive renderingDatabase sync Intuitive, isomorphic APIMinimal boilerplate code

The Meteor Platform

App Microservices

PLATFORM

Blaze

Livequery

Client Data Cache

MongoDB SQL REST

App Components & Logic

React Angular

SERVER

CLIENT

SOURCES

DDP

MobileWeb

Who is using Meteor?

Companies using Meteor

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”

Meteor community

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

Who is behind Meteor?

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

What’s next?

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

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

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

www.meteor.com

Thank You!

top related