Angular + Meteor. Real Time!

About Me

 

I'm a software developer at @Jalasoft.

Fan of Javascript. Specially of Meteor and Apollo Stack

@kenji_lozano

What we'll cover?

  • What is Meteor?
  • Client Architecture
  • Meteor behind the scenes
  • Angular-Meteor in Action!

JAVASCRIPT APPS

THE FASTEST WAY TO BUILD

Meteor is an open source platform for web, mobile and desktop

What means "Platform"?

Library

Framework

Platform

JAVASCRIPT APPS

THE FASTEST WAY TO BUILD

Meteor is an open source platform for web, mobile and desktop

What means "APPS"?

Based on client connected Architecture

Websites

Apps

  • Links and Forums
  • Single Pages
  • Runs on the Browser
  • Focused on the UI/UX
  • Not required to refresh
  • Browser, Mobile and more

Client connected Architecture

  • Live updates to the client
  • Optimistic UI
  • Same behavior

Web Sockets

Meteor 

  • Client Connected Architecture
  • Javascript Everywhere
  • Why Meteor?
  • Amazing Community

Client Connected Architecture

Client connected Architecture

Minimongo

Minimongo

DDP

Server

Client

Publish & Subscribe

Publish & Subscribe

How does it works?

Publications

How does it works?

// on the server
Meteor.publish('posts', function() {
  return Posts.find({flagged: false});
});

Data Distributed Protocol

You can think of the publication / subscription system as a funnel that transfers data from a collection on the server (source) to one on the client (destination).

Subscriptions

How does it works?

// on the server
Meteor.publish('posts', function(author) {
  return Posts.find({
    flagged: false,
    author: author
  });
});
// on the client
Meteor.subscribe('posts', 'bob-smith');

Javascript Everywhere

Isomorphic Javascript


    var name = response.name


    GET http://myServer/user



    SELECT name
    FROM users
    WHERE id=12345


Users.find(
    { _id: 12345 },
    {
        fields: { name: 1 }
    }
);

Now let's do it in a Meteor way!

Meteor Data Flow

DDP

Server

Client

Subscription

Publication

Method

Method

Minimongo

Mongo

Post.insert

Optimistic UI

Post.insert

Why Meteor?

Why Meteor?

Ship more with less code.

Build apps for any device.

Integrates technologies that you already use.

Amazing Community

Meteor Community

12823

26814

508K

12

PACKAGES

STACK OVERFLOW QUESTIONS

UNIQUE INSTALLS

UPCOMMING EVENTS

Angular-Meteor in Action!

Let's get started

Thanks to @Urigo! https://github.com/Urigo/angular-meteor

   $ meteor create --example angular2-boilerplate myApp
   $ cd myApp
   $ meteor npm install
   $ meteor

Let's see an Example running

Contribute!

Help us to grow as @angularBolivia community

Thank You!

Hope you enjoyed this talk!

Wait... Something is coming.

...stay tuned with Angular Community and don't miss the upcoming events.