Thinking in Apps with FrintJS

Image by Jake Page

When you build something with FrintJS, you do it by creating an App first. The primary app that you create is called a “Root App” by convention.

While having a single Root App is a requirement, FrintJS also gives you the APIs to create and register multiple Child Apps to your Root App.

Why create Child Apps?

All applications, given enough time, grow big. Concept of Child Apps in FrintJS help you break your large monolithic applications into smaller isolated Apps, that you can load and register (and optionally render) on demand.

If you are building something for the browser, imagine loading each App via their own bundle asynchronously (like app1.js, app2.js, and so on).

Having smaller Apps means they are responsible for doing their own thing only and easier to manage in the long run.

Once you get the providers sorted out well in your Root App, you can even distribute the work of Child Apps to separate teams simultaneously with ease.

An example application

Think of a big project management application. It may have these features:

• Users management
• Todo list management
• Calendar for events management

Let’s break it down into smaller Apps

If you were building this big application with FrintJS, you could break it down into multiple Apps as follows:

• Root: The primary base of the application (Root App)
• Users: Child App for handling users
• Todos: Child App for all things todos
• Events: Child App for managing everything related to calendar/events

Each Child App could have its own set of providers (dependencies of your App), and other Child Apps do not need to share them unless really needed.

frint-cli itself is built with FrintJS, where the primary $ frint command is a Root App, and sub-commands like $ frint help and $ frint new are separate Child Apps.

Creating and registering Child Apps

Let’s create our Root App first:

import { createApp } from 'frint';
const RootApp = createApp({
  name: 'MyRootApp',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
    },
  ],
});
const app = new RootApp();

Now that we have created a Root App and also instantiated it, we can start creating Child Apps:

const TodosApp = createApp({
  name: 'Todos',
});

We can register the Child App as follows:

app.registerApp(TodosApp);

And that’s it. The Todos Child App is now registered to the Root App.

The instance of Todos app can be obtained as follows:

const todosApp = app.getAppInstance('Todos');

Passing providers down from Root App to Child Apps

It is very likely that you have some really important providers defined in your Root App, that you would like your Child Apps to access.

FrintJS allows providers to be “cascaded” when they are defined in Root Apps.

For example, in above code example, we noticed that Root App has a provider named foo. To make it accessible to Todos Child App, we can update your Root App definition slightly:

import { createApp } from 'frint';
const RootApp = createApp({
  name: 'MyRootApp',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
      cascade: true,
    },
  ],
});
const app = new RootApp();

Because of this additional cascade property, the provider foo will be made accessible in all registered Child Apps.

The Todos app could access it like this:

const todosApp = app.getAppInstance('Todos');
todosApp.get('foo'); // `foo value here`

You can read more about it in our documentation.

What about rendering Child Apps?

I intentionally didn’t touch this topic in this post, since this would involve dealing with rendering libraries like React or Vue.js.

FrintJS has integration with both React and Vue.js by the way!

I highly recommend reading about the concepts of Components and Regions in the FrintJS documentation website, which will describe everything you need to know with code samples too.

You can also take a look at a working example dealing with multiple Child Apps here.

I have covered the topic on rendering Child Apps with React.js, in another blog post here.