https://meteor.com

github.com/Slava

Reactive Programming

made simple

Hi, I am Slava

I am a Core Developer at Meteor, company building a new open-source, all JavaScript full-stack framework.

Find more about Meteor on https://meteor.com

Meteor allows you to build modern web and mobile apps fast and easy.

https://todos.meteor.com

Modern applications:

Instant response

Reactive UI

Fast Load Time

Mobile Support

Real-time data sync

Client-Server RPCs

Isomorphic JS

Declarative Structured Templates

Repeatable Builds

JSConf.asia 2013

Introduction to Meteor

by Emily Stark

http://youtu.be/rQCbXNEot5s

or https://meteor.com

The Meteor stack

Typeahead.js

React.js

Spark.js

Calendar JQuery

DataTables JQuery

D3.js or Chart.js

State of one component can affect another component

(made up example diagram)

Dependency graph tracking by hands

Tracker

  • small library (<2Kb gzipped)
  • can make almost any code reactive
  • figures out dependencies and propagates changes
  • glue all the things on the page!

                        Tracker.autorun(function () {
                          // do stuff!
                        });

https://meteor.com/tracker


  var city = new ReactiveVar("San Francisco");

  // Prints the message about San Francisco
  Tracker.autorun(function () {
    console.log( "Broadcasting from " + city.get() );
  });



  // Triggers autorun to rerun and print the new message
  city.set("Singapore");

Any code wrapped into Tracker becomes reactive


  var city = new ReactiveVar("London");
  var secret = new ReactiveVar(true);
  
  Tracker.autorun(function () {
    if (secret.get())
      console.log("It is a secret!");
    else
      console.log("The city is " + city.get());
  });

Smart dependency tracking

Dead code block

Tracker is smart enough to understand that as long as "secret" doesn't change, changes to "city" won't matter

Dependency Tracking is usually tied to the framework


  angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function($scope) {
      $scope.firstName = 'Thomas';
      $scope.lastName = 'Anderson';
  
      $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.firstName + ' ' + $scope.lastName + '!';
      };
    }]);

Dependency Tracking is usually tied to the framework


  App.Person = Ember.Object.extend({
    firstName: null,
    lastName: null,

    fullName: function() {
      return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
  });

Chart.js

.update()

Video.js

.currentTime()

d3.js

.data()

fullcalendar

.gotoDate()

clicks/selections

clicks/selections

hover

playback, jumps

Typeahead.js

React.js

Spark.js

Calendar JQuery

DataTables JQuery

D3.js or Chart.js

Demo

React.js component

manual DOM manip.

charting library

var date = currentDate.get();
document.getElementById("day").innerText =
    daysOfWeek[date.getDay()];
document.getElementById("forecast").innerText =
    temperatures.get(date.getDay());

React.render(
  React.createElement(OrderedList, {data: temperatures.toArray()}),
  document.getElementById("react-mount"));
if (! temperatureChart)
  temperatureChart = new Chart(ctx).Line(data);
else {
  for (var i = 0; i < temperatures.length(); i++)
    temperatureChart.datasets[0].points[i].value =
      temperatures.get(i);
  temperatureChart.update();
}

Recap

Tracker is a small library for deps tracking

 

Can glue things together pretty easily

 

Is smart enough to keep you lazy but not to do all the work for you

Is that it? We want lunch!

That's it! Questions?

Slava

imslavko

Still hungry for stuff?

Meteor's reactive templating library Blaze uses Tracker under the hood implicitly.

 

This allows Blaze to track fine-grained changes and make minimal DOM updates to sync up the page.

https://meteor.com/blaze


<div class="friendList">
  <ul>
    {{#each friends}}
      <li class="{{selected}}">
        {{firstName}} {{lastName}}
      </li>
    {{/each}}
  </ul>
</div>
Made with Slides.com