Adding business logic
A core principle behind Subframe’s code export flow is that business logic (like making an API call or managing React state) belongs in code, not a design tool. Thus, Subframe does not export any business logic, other than UI-specific interactions like animating an accordion open / close.
Let’s consider a hypothetical music streaming app called Spoofy to demonstrate integrating business logic into Subframe pages and components.
We’ve made a CodeSandbox project for the examples below so you can play around with the code.
Example 1 - Magic link login form
For our example app, we’ll build a simple magic link login form. This is what we want the end-result to look like:
We’ve finished copying the page code from Subframe, so now let’s add some basic functionality.
- We add a fake fetch function that simulates a network request and a
handleSubmit
function that handles the form submission. - We also want to update our Button to show that we’re currently submitting the form, so we’ll maintain a
submitting
state variable and pass it to the Button in thedisabled
andloading
props.
You can see the changes we made in the highlighted lines below:
We now have an interactive login form!
Example 2 - Interactive track cards
We now want to build a feature where we show the user their most-listened-to tracks of the past week and allow them to favorite tracks so they can easily find them later.
When adding business logic to Subframe-designed components, we recommend not editing the generated code inside the src/ui/
directory directly, but instead wrapping the component.
We built a TrackCard
component and FavoriteTracks
page in Subframe and brought them to our codebase:
Now we’ll add the functionality to be able to favorite tracks:
- We’ll wrap the original
TrackCard
component with a new component that will manage the simple business logic. - We’ll use this wrapper component in our
FavoriteTracks
page which manages the data, thefavorite
state, and provides the onClick handlers.
And we’re done! The end result looks like this:
You may have noticed that we’re using slots for our image and favorite button. We’ll cover the reasons for this in Props and Slots.