Hey folks! Some of you may already know about us. We quietly launched a new meetup group in Amsterdam few weeks ago. As we are gearing up for our second event soon, we thought we would introduce ourselves in a more official way.

Who are we?

We are TechFolks Amsterdam. A meetup group focused on all things technology.

The founding members include:

Our first meetup

Our first meetup was hosted on 20th September, and we focused on test development as our topic for all the talks.

Daria Golub presenting her tak

It really took us by surprise that we had this many…

I started getting seriously interested in RxJS by mid 2016, especially when I started developing FrintJS.

It was quite difficult for me to find my way into reactive programming. And I can imagine beginners may still feel the same way now. To keep myself updated and motivated, I started finding and following some people on Twitter who are very involved with RxJS and reactive programming in general.

This has worked for me very positively, and helped me understand the direction the RxJS community is taking, and be informed about new toolings and various other resources that keep popping up in…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package.

Even though FrintJS is rendering library agnostic (and supports React and Vue.js both), we will stick to React.js only for the sake of this article.

To make the most out of this, it is advised that you read these previous articles from our blog first:

Higher-order component

The API of the observe higher-order component (HoC) is quite simple:

import React from 'react';
import { observe } from 'frint-react';
function MyComponent(props) {

Illustration of a website design

In this article, we will focus on rendering FrintJS Child Apps in specific areas of our UI (which we call “Regions”), using React.js as our rendering library.

To make the most out of this article, it is advised that you read these two previous articles first:

What is a Region?

In a traditional website, you usually have elements like header, footer, sidebar, etc. They are areas in your website where you put relevant content accordingly.

  • Header: may contain logo and navigation links
  • Footer: more navigation, and copyright information
  • Main: your main content area
  • Sidebar

FrintJS itself is agnostic of any rendering library. The core is primarily focused on managing its dependencies with providers, so that other tools and integrations can form around it.

While the main frint package takes care of creating Apps with providers, we have other packages like frint-react handling React.js integration. Same way, we also have frint-vue that enables you to render your Vue.js components using similar API to that of React’s integration.

Rendering with Vue.js alone

Before getting into FrintJS, let’s first create and render a Component with Vue.js alone.

We will be using JSX for the examples below. Let’s say we have a…

Redux is an extremely popular state management library in the React.js ecosystem. It also comes with integrations like react-redux which gives you a higher-order component to connect your Redux store to your React components.

How can this killer duo be utilized in FrintJS Apps too?

Example Store

Before getting into FrintJS, let’s first have a basic store with Redux. Our application will have a counter, that we can increment and decrement.


Define some constants for our action types:

// constants/index.jsexport const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

Action creators:

// actions/counter.jsimport { 
} from '../constants';
export function incrementCounter()…

Previously, we covered creating Apps with providers, and then rendering them with React.js in the browser and server. Today, we will see how we can access the providers defined in FrintJS Apps from inside React components.

Higher-order component

We ship a higher-order component (HoC) called observe from our React integration package frint-react.

The observe HoC allows you to wrap your target Component while giving you access to your FrintJS App’s instance, enabling you to prepare the props that you can pass to your target Component later.

You can either generate a synchronous props object, or stream it asynchronously using an Observable with…

I spent more time on this image than writing this post =D

Previously, I wrote about dependency injection and how providers are set up in FrintJS Apps. Today, we will be using the same APIs and render a FrintJS App with React in the browser and server.

Rendering with react-dom

In the most basic and simple example, we can render a React component like this using ReactDOM:

import React from 'react';
import { render } from 'react-dom';
function MyComponent() {
return <p>Hello World</p>;
<MyComponent />,

We define a component, and then render it using the render function coming from react-dom package by specifying a target node.

The code above assumes you…

Redux is a great library for managing state in your applications. Combining it with React.js also gives your application a nice structure allowing you to benefit from various other tools built and supported by the community.

I also enjoy RxJS a lot. And the journey of building FrintJS has helped me embrace reactive programming even further. In this post, I will explore how we can stream the state from a Redux store using Observables.

Redux store

Let’s say we have a simple Redux store, that increments and decrements a counter value.


We can start by creating our reducer first:


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…

Fahad Heylaal

Maker of things · JavaScript · RxJS · ReactJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store