@composi/runtime:
Effects
Managing Effects in a Program
Some code in a project will create side effects. This might be data manipulation, code that runs asynchronously and fetches data or manages a looping poll, setup of a websocket, or changes the visual appearance of an element in the DOM. @composi/core's runtime has three ways of implementing effects: actions, subscriptions and lifecycle hooks.
Actions
The main way that you will deal with effects are through actions. These are triggered when they receive a message. There are three possible origins for a message: when a user interacts with the View, an event can send a message that gets processed by an action, an action can send a message to another action, and a subscription can send a message to an action. Learn more about actions in the documentation for update.Subscriptions
If you need to run code when your program starts, you need to use subsriptions. Usually this will be fore fetching data, setting up a looping poll, create a web socket or web service. When you get a result that you want to make available to your program you can send a message to an action to do so. Learn more about subscrition in its docs.
Lifecycle Hooks
@composi/core implements three lifecycle hooks. These work differently from React in that they get registered on the element you want to track. There are three lifecycle hooks: onmount, onupdate and onunmount. These enable you to implement visual effects on DOM elements. You would use these to do something like hide or show elements or animate them. Examples of when to use them: you would use onmount to animate a item added to a list; use onupdate to set focus on an input element; use onunmount to animate an item when removed from a list. Lifecycle hooks make it easy to implement visual effects for the elements in your program's view. Learn more about lifecycle hooks in the documentation.
A Program with Effects Only
Below is an example of a runtime program that has two effects but does not return a view. Instead the view returns undefined. This program's init has state and an effect. The effect causes a counter to start at load time. When it reaches five, it triggers another affect to alert the final result. If you open the web inspector console, you'll see the count progress, followed by an alert upon completion.
See the Pen @composi/core + runtime Effects-1 by Robert Biggs (@rbiggs) on CodePen.
When your program is very simple it may not seem like such a big deal to separate effects into separate spheres. But as a program becomes more complex, implementing actions, subscriptions and lifecycle hooks results in code that is easier to reason about and maintain. State management goes in actions, startup async code goes in subscriptions, visual effects get handled by lifecycle hooks.
batch
Sometimes you may have several effects that you need to run together. Or you have one big effect doing alot of things that you want to break down into smaller pieces. @composi/core provides batch for these purposes. It allows you to create a map of effects that you can execute one after the other. Be aware that effects run asynchronously and independently of each other. So, event though they are being executed in order, they will probably terminate at different times. If you want to execute effects sequentially, one after the other, then you should look into running them as ES6 async/await functions.
Below is an example illustrating how to batch effects together. Open the browser console to see the result of the three effects:
See the Pen @composi/core + runtime Batched Effects by Robert Biggs (@rbiggs) on CodePen.