An Introduction to Reaction's Architecture

Spencer here.

I'm committing to writing one blog post a week on product, architecture, and the Reaction application. I'll be writing with an eye toward the future, describing both how Reaction currently works, as well as how Reaction should work.

Over the past few month, I've been building a set of diagrams to help visualize just how the Reaction application is architected. I plan on sharing my work with the community throughout the next few posts, with each post focusing on an individual diagram. Here's an example of a diagram for login flow:

As Reaction is under active development, these diagrams (and subsequent blog posts) will be subject to change at any time. If you find any issues, let us know in the comments or via our Gitter chat channel and we'll get things updated.

The goals for this series are threefold:

  1. You are able to read and understand the Reaction Flow Diagrams on your own.
  2. You come away understanding Reaction's core architecture at a macro level
  3. You have a framework for discussing how to extend Reaction to fit your specific needs

Diagram Keys

Here's an overview of the keys I'll be using for each diagram. Click on the image to enlarge.

image of the Flow Chart TOC

This is a pretty broad bucket, and includes any kind of interaction that can be made with Reaction from the UI. For instance, if a user's input is required to cause something to happen, then you'll see this object. Some specific examples include:

  • Buttons
  • Links
  • Form or Form Elements
  • Switches
  • Dropdown Selectors

The yellow diamond indicates a fork in the logic of a particular part of the app, and should indicate what is being checked and what happens for both the positive and negative case. If there is no negative or positive case indicated, assume there is no path taken for that case.

Occasionally, there will be a logic object with more than two cases. In some cases, there are multiple paths for the same case. When you see that, assume that all paths with the same outcome will happen for that case.

Events are places in the Reaction flow that can be hooked into easily from a plugin. We're still working on documenting our event API, so some of these events have not been created yet. Events are also tied into our internal analytics plugin, which exports them to Segment.io's Analytics API v2, as well as Google Analytics Enhanced Ecommerce. We'll dig into our events API in more detail with an upcoming post.

An alert is displayed to the current user. Some alerts have actions that can be taken from within. We support both Toast Alerts and Modal Alerts.

This represents an email that is sent to one or more recipients. You must have SMTP set up in order for any emails to be triggered. We'll dig into emails later.

This indicates a persistent in-app notification. Notifications show up in a user's notification panel and remain there until read. Some events trigger notifications for multiple users.

This indicates any additional details that don't quite fit into any of the other categories. Sometimes, it's used for describing the specifics of how something works. Other times, it's for indicating possible values or fields within a form.

The pink cylinder indicates a data source, whether it's a third-party API, the Reaction Mongo database, or some other data store. Because database reads and writes are implicit, I don't always indicate when this is active.

This indicates where another flow would connect. Where possible, these are hyperlinked, so that you may click through to the next flow. If you're viewing the diagram on LucidChart, you should be able to click through by holding CMD + SHIFT (CTRL + SHIFT on Windows) and clicking the flow object.

These green octagons represent a view of some kind, whether it's a set of components or an entire page's worth. Its purpose is to represent actions and parts of the flow that happen from different views within the app.

This signifies leaving the app to perform an action on another domain, like tracking a package on the USPS website, or making a payment via PayPal.

Hopefully, this gives you a general overview of how these flow diagrams are built. Now you're ready to start exploring on your own! You'll need a LucidChart account to view the diagrams in their entirety, so go ahead and create a free account. Then, dive right in.

What's Next

For the rest of this 6-part series, I'll be doing some deep dives into specific parts of the Reaction architecture, infrastructure, and application flow. I'll be covering a number of topics, from architecture, the commerce funnel (product, cart, checkout), and core functionality, to orders, administration, and finally, upcoming functionality that's on our Roadmap.

Next up: events and event hooks. See you soon.

comments powered by Disqus