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.
We are TechFolks Amsterdam. A meetup group focused on all things technology.
The founding members include:
Our first meetup was hosted on 20th September, and we focused on test development as our topic for all the talks.
It really took us by surprise that we had this many attendees on our first event, and that too without much advertising from our side. …
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 the community. …
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:
The API of the observe
higher-order component (HoC) is quite simple:
import React from 'react';
import { observe } from 'frint-react';function MyComponent(props) {
return <div>...</div>; …
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:
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.
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.
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 basic component that prints out “Hello…
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?
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';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
// actions/counter.jsimport {
INCREMENT_COUNTER,
DECREMENT_COUNTER
} from '../constants';export function incrementCounter() {
return { type: INCREMENT_COUNTER }…
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.
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 this HoC. …
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.
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>;
}render(
<MyComponent />,
document.getElementById('root')
);
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 have an HTML element with root
as its…
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.
Let’s say we have a simple Redux store, that increments and decrements a counter value.
We can start by creating our reducer first:
const INITIAL_STATE = { value: 0…
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.
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
, …
About