Modular applications with frint.js

Uladzimir Dziomin

 

 

 

 

 

 

 

@UladzimirD

https://github.com/spzm

 

Monolith Web Application

"Headless" Monolith Web Application

Microservice Web Application

Micro Frontends

I'm sorry... WAT?

Our preferred (and proven) approach is to split the browser-based code into micro frontends. 

In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.

Microfrontend Web Applications

Micro Frontends

Microfrontend approaches

  • Single-SPA "meta framework"
  • Multiple single-page apps that live at different URLs
  • Project Mosaic
  • Web Components as the integration layer.
  • SPA in iframes using window.postMessage APISingle-SPA “meta framework”
  • SPA communicating with shared event/data bus
  • ...

Frint.js

Modular JavaScript framework
for building Scalable & Reactive applications.

Why do we need Frint?

  • Framework can align the development across all teams
  • Everyone building Apps the same way
  • Gives us control over what we allow and NOT allow to external developers
  • Ultimately gives us a foundation to build upon
  • Allows us to predictably keep backwards compatibility every quarter
  • Open Source & well maintained documentation for all
  • Code splitting

Split your application across multiple apps

Load apps coming in from separate bundles

Why not just use React or AngularJS directly?

  • Frint complements React (or any other functional rendering library)
  • The framework itself is very decoupled, and core is not directly tied to React
  • React is treated just as a rendering library by us
  • Frint takes care of the overall structure of your application
  • AngularJS is a full featured framework of its own
  • We needed to build on top of existing frontend (which is based on React) progressively
  • Starting from scratch in frontend was not an option

Frint main concepts

Frint App

import { createApp } from 'frint';

const RootApp = createApp({
  name: 'MyAppName'
  providers: [
    { name: 'hello', value: 'Hi world' }
  ]
});

const app = new RootApp();
app.get('hello');

Components

import React from 'react';

export default () => {
  return <div><p>Hello World</p></div>
}
---------------------------

import { createApp } from 'frint';
import MyComponent from './myComponent';

const RootApp = createApp({
  name: 'MyAppName'
  providers: [
    { name: 'component', useValue: MyComponent }
  ]
});

export default new RootApp();

Rendering App

import React from 'react';

export default () => {
  return <div><p>Hello World</p></div>
}

---------------------------

import { createApp } from 'frint';
import MyComponent from './myComponent';


const RootApp = createApp({
  name: 'MyAppName'
  providers: [
    { name: 'component', useValue: MyComponent }
  ]
});

const app = new RootApp();

Observable Component

import React from 'react';

export default ({ appName }) => {
  return <div><p>App name: {appName}</p></div>
}

---------------------------

import { Observable } from 'rxjs';
import { obsserve } from 'frint-react';
import MyComponent from './myComponent';


export default observe(function (app) {
  const props = { appName: app.getOtion('name') };

  return Observable.of(props);
})(MyComponent);

Component is reactive

export default observe(function (app) {
  return Observable.interval(100)
    .map(interval => ({ interval}));
})(MyComponent);

Child apps control

import { render } from 'frint-react';

import RootApp from './rootApp';
import ChildApp from './childApp';

window.app = new RootApp();
render(
  window.app, 
  document.getElementById('root')
);

window.app.registerApp(ChildApp, {
  regions: ['sidebar']
});

Regions

import React from 'react';
import { Region } from 'frint-react';

export default (props) => {
  return (
    <div>
      <p>Hello world!</p>

      <Region name="sidebar" />
    </div>
  );
} 
$ mkdir frint-test
$ cd frint-test
$ npm install -g frint-cli
$ frint init --example kitchensink
$ npm install
$ npm start

Try it out

Questions time!

 

 

 

 

 

 

 

 

https://goo.gl/3kvxE6

Modular application with frint.js

By Uladzimir Dziomin

Made with Slides.com

Modular application with frint.js

  • 51

More from Uladzimir Dziomin