Introducing Synchronous Dispatcher

The Easiest and Fastest Event Framework for React Ever!

Posted by Heikki Kupiainen/Oppikone on 18.07.2017 09:37:36

Synchronous Dispatcher Is Simpler, Cleaner and Better

In this article I will introduce the super lightweight yet extremely powerful and intuitive Synchronous Dispatcher event framework that I created just for you, dear Reader, to help you develop fantastic software in a painless way. It can be used as a central building block for creating a simple centralized application data storage.

Synchronous Dispatcher is a wonderful little framework - or should I rather call it a design pattern - that I designed already in 2010 for ActionScript programming language - later I ported it for JavaScript as well. Those times ActionScript (used by Flash-based web apps) already had the maturity that JavaScript-based techniques are now slowly catching up with. Some who think that React is something new may be surprised to hear that React essentially is only a remake or at best a reinvention of Adobe Flex (initially called Macromedia Flex, later Apache Flex) framework that was introduced already in 2004 - it essentially introduced a virtual DOM model: you could create your own Flex components that you would then use as construction blocks inside your HTML-like templates. Adobe Flex really already had everything that React has today!

Mate Framework, an event framework for Adobe Flex that was introduced in 2010, was almost the same as "Redux" is today for "React" - but Mate Framework had exactly the same weakness that Redux has today. It is unnecessarily complex! But Redux is even worse: the Redux way of handling events is done using endless lists of switch-case structures - don't you think we could have something sleeker in 2017 than repeating dozens of times if else if else... that "switch-caseing" essentially is about?

The Synchronous Dispatcher is different - it's simple and sleek: it enables you to define events and handlers in a snap. Let's make coding fun again!

Using Synchronous Dispatcher

Using Synchronous Dispatcher is simple: when you want to make a React component to listen for an event you just add a handle to the constructor of that component, for instance:

handle('CAR-MODEL-SELECTED', this.onCarModelSelected)

And wherever you want to dispatch the event, you just call dispatch method:

dispatch('CAR-MODEL-SELECTED', carModelId)

Import Synchronous Dispatcher's handle function to your React App:

import { handle } from 'synchronous-dispatcher';

If you are curious to check Synchronous Dispatcher in action, please have a look at source code for a version of Car App Demo that uses Synchronous Dispatcher here.

Power of Direct Binding

In Synchronous Dispatcher architecture, event handlers are directly bound to their corresponding events. That is truly superior to frameworks such as Redux - that require you to bind event handlers to their events manually, through an awkward switch-case concoction. Let's look at this in detail! Here is an example of a typical Redux "Reducer", taken from Redux Todos examples Github project:

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
          ? {...todo, completed: !todo.completed}
          : todo
      )
    default:
      return state
}

What is happening here is that you are defining manually an awkward switch-case structure to tell Redux what to do in case of different events. A switch-case structure is basically nothing more than an alternative notation for if else if else... loop. It means that every time an event is dispatched in your application, all switch-cases in all your reducers are iterated through until a match is found for the event name!

A more mature way to implement this would be using a hash table (also called HashMap in Java and associative array in JavaScript or ActionScript). Consider that you have 500 Redux events in your app. And consider a situation that an event handler is programmed to dispatch another event and so on... Using Redux style switch-case mapping, all possibilities are iterated every time an event was dispatched! Using hash tables instead you would spare your processor from quite a lot redundant work! Now someone might be asking, so what? I have a super fast Intel 7 processor anyway! But remember that when you are creating browser-based software, not everyone has a supercomputer. Different kinds of tablets and phones vary greatly in performance. And if you have a coding style that lavishly spends processing time without caring about performance, it is guaranteed that at some point when you continue decorating your app with more of this type of carelessly designed code piled on top of earlier wasteful code - soon even browsers running on fast computers will start crashing and displaying a crash messag like "Well, this is embarrassing..."

But this does not need to be. Have a look at my reference implementation of Synchronous Dispatcher that does not waste precious processing resources! When you call handle function that defines an action to be executed when a certain event is fired, what happens under the hood is that your action is mapped to its event using a hash table! If you still need clarification why this is better than endless switch-case loops, have a look at the article on hash tables.

Now dive deeper and read how to use Synchronous Dispatcher to implement an incredibly simple and fast central data management strategy in your app!