reactive programming made simple - jakartajs

17
Reac%ve Programming Made Simple And It’s Meteor Secret Sauce Riza Fahmi - CTO

Upload: riza-fahmi

Post on 10-Feb-2017

639 views

Category:

Presentations & Public Speaking


1 download

TRANSCRIPT

Page 1: Reactive Programming Made Simple - JakartaJS

Reac%ve Programming Made Simple

And It’s Meteor Secret Sauce

Riza Fahmi - CTO

Page 2: Reactive Programming Made Simple - JakartaJS

What Is Reac%ve Anyway?

Page 3: Reactive Programming Made Simple - JakartaJS

SPA

Page 4: Reactive Programming Made Simple - JakartaJS

Classic SPA: GMail

Page 5: Reactive Programming Made Simple - JakartaJS

Update Without Refresh

Page 6: Reactive Programming Made Simple - JakartaJS

Reac%ve-ready Framework

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

Page 7: Reactive Programming Made Simple - JakartaJS

Meteor Stack

Page 8: Reactive Programming Made Simple - JakartaJS

Typeahead.js Calendar

jQuery

DataTables jQuery

D3 or Chart.js

React.js

Page 9: Reactive Programming Made Simple - JakartaJS

Calendar App

Page 10: Reactive Programming Made Simple - JakartaJS
Page 11: Reactive Programming Made Simple - JakartaJS

Dependency Tracking By Hands

Page 12: Reactive Programming Made Simple - JakartaJS

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!

});

Page 13: Reactive Programming Made Simple - JakartaJS

Just wrap it up

Live demo on the browser console

Page 14: Reactive Programming Made Simple - JakartaJS

That it! I’m done!!

Page 15: Reactive Programming Made Simple - JakartaJS

More Appropriate Demo

Manual DOM Manip…

React.js Component

Chart Library

Page 16: Reactive Programming Made Simple - JakartaJS

Recap

Manual DOM Manip…

React.js Component

Chart Library

Tracker.autorun( function () {

});Tracker.autorun( function () {

});

Tracker.autorun( function () {

});

Page 17: Reactive Programming Made Simple - JakartaJS

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