Architecture

Architecture is taken from Elm due to it's simplicity and emphasis on type safety. It can be summarized as a basic pattern of fully encapsulated, infinitely nestable components. It is great for modularity, code reuse, testing & type safety. Ultimately it makes it easy to build advanced applications and maintain high quality as requirements as changes and features built up.

Basic pattern

The logic of every program / component breaks up into three cleanly separated parts:

• Model — the state of your application
• Update — a way to update your state
• View — a way to view your state as HTML

This pattern is so ubiquitous that every application / component starts with a following skeleton. Particular instance just fills in details with corresponding logic.

Note: Fragments like import type / export type and other type annotations like value:number are flow syntax extensions. You can simply ignore that stuff for now, but feel free to jump ahead if that helps.

import {html, forward} from "reflex"
import type {DOM, Address} from "reflex"

// Model
export class Model {

}

// Update
type Message =
  | { type: "NoOp" }


export const update = (model:Model, message:Message):Model => {
    switch (message.type) {
      case "NoOp":
        return model
    }
  }

// View
export const view = (model:Model, send:Address<Message>):DOM =>
html.div({
  // ...
}, [
  // ...
])

That is really the essence of it! All examples will just fill in this skeleton with increasingly interesting logic.

Note: Not all components will support NoOp messages. It is in skeleton just to illustrate how to create / handle message types.