Get Reactive Today

View Github Repository Open presentation in a new window

mhaidarh

See all presentation from mhaidarh

Get Reactive Today

0 0

talk-reactive

:zap: Talk about getting into reactive programming

On Github mhaidarh / talk-reactive

Get Reactive Today

Getting started into reactive programming/development with any technology stack or Meteor

  • Bahasa, English, or bilingual?
  • Give the big picture what is going to talk about, so mostly the explanation is simplified.
  • This isn't just about Meteor, but all kinds of applicable system. Because the current condition is, everyone is using various different stacks.
  • Let's have a all-way discussion, not just a one-way presentation.
  • This is one of my first public talks, so let me know if there's a suggestion or something wrong.
http://bit.ly/mhaidarh-talk-reactive This presentation is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License "Happy slide icon" designed by Julien Deveaux from the Noun Project

M Haidar Hanif | Technology Generalist @mhaidarh | +MHaidarHanif http://mhaidarhanif.org [or just google me]

  • Quick introduction about personal identity.
  • Currently a generalist alias a student.
  • Will be software engineer/developer/designer.

Let's begin with a story

of informatics student who is approaching his graduation soon and trying to finish an MVP for a thesis before it officially got started...

  • Just a side story before and after discover Meteor and reactive programming.
  • Also how amazing software development mainly web is revolving rapidly.
  • Most current education system haven't catch up yet.
  • And then I discovered the next stage of software/web development workflow, notably Meteor.

Quick Question

  • Who are here have actually know reactive programming before Meteor?
  • Actually tried Meteor?
  • Using/developing reactive or real-time application?
  • But you have seen all of that, right?

Quick Demo Time!

  • Open TodoMVC, Meteor and SocketStream version

What is reactivity?

“Reactivity is a data-centric feature that allows executing certain functions when the data, which they depend on, change. Reactivity is not a pattern, it's a general idea implemented using several patterns.”

What is reactive programming?

“A programming paradigm that is a subset of dataflow programming, oriented around data flows and the propagation of change.”

What about functional reactive programming (FRP)?

“FRP is programming with asynchronous data streams. And anything can be a stream: variables, user inputs, properties, caches, data structures, etc. Then the stream can be manipulated (with create, merge, combine, filter, map, scan, etc) using functions that create new stream, because the original stream is immutable.” There is even object-oriented reactive programming (OORP).

Furthermore

  • Mostly implemented in the next step of functional programming
  • Native support in Elm or with additional library in Haskell.
Implemented in dozen of languages with RX (Reactive Extensions) Framework Even used in a UI library with its application architecture, React and Flux

An ordinary illustration: Typical/Imperative

var a = 1;     // 1
var b = a + 1; // 2
a = 10;        // 10
b = a + 1;     // 11

A super illustration: Reactive 

var a = 1;
var b <= a + 1;
a = 10;
// b is automagically 11

A comprehensive illustration: Observable

From the observer pattern

Supposed there is a stream where within it there are some ongoing events ordered in time

There are a lot of ways of seeing the reactive stream. But here we can use a common observer pattern with marbles to illustrate reactivity. It can emit three different signals: a value (of some type that can change over time), an error, or a "completed" signal. These emitted evetns captured asynchronously.

Reactive vs* Real-Time

Reactive Real-Time Living/Responsive Instant/Immediate Paradigm/System System Model/Code/Style Structure/Organization 11 12 *in most cases This is just some notes. Actually not so much differences, often can be interchangeable. But the point is, reactive is not necessarily a real-time.

Why do we do this?

Because it's hot

Also it's the future

"Space shuttle icon" designed by Aly Dodds from the Noun Project

Also like hot code push. So, who agree or think the same?

Why, seriously?

This way we can improve the performance of our system or application. Particularly reducing the amount of work to quickly implement a logic that require data flow, and more power beyond asynchronous.

Additionally, it is a time-saving and bug-preventing programming paradigm worthy of all developers.

What I've done with it

Still in exploration and experimentation

What we can get and build

  • Programs that consistently react to events, especially an actual real-time system
  • Always responsive application that is quick to react to all users --anywhere and anytime-- with consistent positive user experience
  • Better interactive applications that highly dependent time such as GUIs, animations, computer music, or robot controllers
  • Building the future of the more modern app that we haven't seen yet
Like a chat, shopping store,

The Reactive Manifesto

http://reactivemanifesto.org

“Organisations working in disparate domains are independently discovering patterns for building software that look the same. These systems are more robust, more resilient, more flexible and better positioned to meet modern demands.” This principles basically expressing that relationships in code could last happily ever after.

Refer to system modeling after human organizations or inter-human communication

  • Responsive and asynchronous
  • Elastic or scalable under load
  • Resilient in the presence of failures
  • Message or event driven

Meet Meteor

https://meteor.com

The most amazingly easy and rapid web development platform for building full-stack reactive and real-time JavaScript web/mobile apps to date

  • So as you have previously know...
  • Meteor is more than a framework, it is a platform with combining the best of Node.js and NoSQL as the first class citizen.
  • Meteor make it really easy to build reactive apps without early cumbersome details.

7 Principles of Meteor

Data on the Wire One Language Database Everywhere Latency Compensation Full Stack Reactivity Embrace the Ecosystem Simplicity Equals Productivity Read them completely on Meteor documentation.

5. Full Stack Reactivity

Make realtime the default. All layers, from database to template, should make an event-driven interface available.

Meteor make it really easy and seamless to do this.

Inside Meteor Core Library

  • Meteor Tracker (formerly Deps): Transparent reactive programming in JavaScript and Dependency tracker to allow reactive callbacks
  • Meteor Blaze: Reactive UI/Templating Library
  • Tracker is a very simple convention or interface that gives the power of an FRP system without requiring to rewrite the program as a FRP data flow graph. Combined with Tracker-aware libraries, this lets to build complex event-driven programs without writing a lot of boilerplate event-handling code. Also reactive data sources (like your database) talk to reactive data consumers (such as a live-updating HTML templating library) without the application code in between having to be involved.
  • Blaze is a powerful library for creating live-updating user interfaces. Blaze has the same purpose as Angular, Backbone, Ember, React, Polymer, or Knockout; but is much easier to use. The template syntax is using Spacebars, Meteor's dialect of Handlebars, but could also use another templating language. It is like "reactive jQuery", but declarative rather than imperative. It consists of a template compiler and a reactive DOM engine.

Full Demo Time!

  • ...
  • Creating Meteor-Jakarta website

News Time!

Concurrently on 28 October 2014!

HTML5 specification has finalized and became a W3C recommendation http://www.w3.org/blog/news/archives/4167

Meteor 1.0 has released https://meteor.com/blog/2014/10/28/meteor-1-0

Promo Time!

Influential/Inspiring Developers

Promo Time!

Recently Active Community/Meetup

if interested to join or even become a co-organizer

Startup Idea

Satellid: Micro Knowledge Management System https://github.com/hazeorid/satellid

  • Platform for managing any kind of knowledge
  • Still in early development, design, system, SaaS, business value, and experience craftsmanship
  • The MVP will be based on Meteor
  • Because most tools and system are not good enough.
  • Focusing on micro scale, modularity is high.
  • Featuring reactivity, JSON only document, transclusion, and much more.
  • Actually also my thesis.

Any comments or questions?

"Asteroid icon" designed by Iain Hector from the Noun Project

I feel for the first run of Meteor is kinda very slow, huge size, resource intensive, and hard to debug. Especially meteor-tool package and when updating package catalog. Too many hidden complexities and no verbose option. Most of the time the server logs are not very helpful for newcomers. Also, it is previously not using semantic versioning properly (there is Meteor v0.9.3.1?!). You can not run multiple Meteor instance on same machine even on different port easily. There is no Meteor version manager yet. Do you feel the same? Last but not least, it is still one of the best technology choice for today. But even at 1.0, I don't think it ready yet for global adoption.

All Assets Repository

Additional Info and Materials

Check out the repo's README

Super Quick Discussion?

Chat on https://gitter.im/mhaidarh/talk-reactive

This presentation is just a glimpse, a tip of the iceberg, of all things that need to explore and be covered. For complete knowledge, learn more from the additional info and materials. You can even consider to take a course.
As always, thank you!