Reactive Programming Made Simple - JakartaJS

Post on 10-Feb-2017

639 views 1 download

Transcript of Reactive Programming Made Simple - JakartaJS

Reac%ve Programming Made Simple

And It’s Meteor Secret Sauce

Riza Fahmi - CTO

What Is Reac%ve Anyway?

SPA

Classic SPA: GMail

Update Without Refresh

Reac%ve-ready Framework

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

Meteor Stack

Typeahead.js Calendar

jQuery

DataTables jQuery

D3 or Chart.js

React.js

Calendar App

Dependency Tracking By Hands

Tracker

• Small library ( < 2Kb gzipped )

• Can make almost any code reac<ve

• Glue all the things on the page!

h>ps://meteor.com/tracker

Tracker.autorun(function () { // do your non-reactive stuff!

});

Just wrap it up

Live demo on the browser console

That it! I’m done!!

More Appropriate Demo

Manual DOM Manip…

React.js Component

Chart Library

Recap

Manual DOM Manip…

React.js Component

Chart Library

Tracker.autorun( function () {

});Tracker.autorun( function () {

});

Tracker.autorun( function () {

});

It’s A Wrap!• More about Tracker: meteor.com/tracker

• How Meteor uses Tracker: meteor.com/blaze

• Slides: slideshare

• Example code: github.com/rizafahmi/reac<ve-made-simple

• Meteor Jakarta meetup: meetup.com/Meteor-Jakarta

github.com/rizafahmi

twiNer.com/rizafahmi22