Forem: Fahad Heylaal

Featurevisor: Git-based feature flag & experiments management

Fahad Heylaal — Mon, 03 Jul 2023 14:30:00 +0000

Recently released an Open Source Git-based feature flagging and experiments management tool, where you can define everything in a Git repository as YAMLs and then evaluate your features in your application.

Why?

Decouple your application releases from deployments
Have team and organization level reviews and approvals

Features

Feature flags
Experiments (A/B and Multivariates)
Segmentation for targeting users
Gradual rollouts
Conditional variables
Consistent bucketing
Multiple environments
Tagging
Force bucketing
Tracking
Status site generator
Universal SDKs (for Node.js & browsers)

Roadmap

Get more tests in
Release a stable v1.0 API
Expand SDK support for Swift and Kotlin, and more

Please reach out with any feedback and opinions that can help me make this tool better over time! Thanks <3

ProppyJS: Functional props composition for components (supports ReactJS & VueJS)

Fahad Heylaal — Wed, 06 Jun 2018 10:22:02 +0000

ProppyJS is a tiny 1.5kB JavaScript library for composing props (object that components receive to render themselves).

The generated props can then be used in your favourite components-based UI framework (like React or Vue.js).

Overview

Lifts the logic one level above components
Gives access to application-wide dependencies (like Redux store, config, etc) anywhere in components tree
Clear separation of logic and presentation layer
Your components become stateless
Easier to unit test
Connects to any UI Component library (React, Preact, and Vue.js supported)
Interoperability with other libraries (Redux and RxJS integrations)
Small footprint spread across separate packages focusing on one thing only

Packages

Package	Size	Description
proppy	`1.5K`	Core package
proppy-react	`1.0K`	React integration
proppy-vue	`0.7K`	Vue.js integration
proppy-preact	`1.1K`	Preact integration
proppy-redux	`0.6K`	Redux integration
proppy-rx	`0.6K`	RxJS integration

Comparisons

Redux

Redux is meant for state management for your whole application, based on actions and reducers.

Proppy is aimed at lifting the logic one level above your Components, and only deal with the behaviour of their props.

While react-redux allows you to access your single Store from anywhere in the components tree, Proppy allows you to access providers.

And the Redux store, for example, can be one of the providers here.

Proppy is unopinionated about what you use for your application's state management, and doesn't lock you in to any specific state management or rendering library.

recompose

recompose has been the original inspiration for building ProppyJS.

A few key differences:

Not tied to any rendering libraries (like React or Vue.js)
Allows access to application-wide dependencies (like Redux store, config, etc)
Deals with only props generation
Doesn’t create a new component in tree per function

Streaming Redux state as an Observable with RxJS

Fahad Heylaal — Sun, 21 Jan 2018 15:38:48 +0000

This article was first published on Medium.

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.

Reducer:

We can start by creating our reducer first:

const INITIAL_STATE = { value: 0 };

function counterReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return Object.assign({}, {
        value: state.value + 1
      });
    case 'DECREMENT_COUNTER':
      return Object.assign({}, {
        value: state.value - 1
      });
    default:
      return state;
  }
}

Store:

Now we can create a Store out of it:

import { createStore } from 'redux';

const store = createStore(counterReducer);

Since your store is ready, you can start dispatching actions to it:

store.dispatch({ type: 'INCREMENT_COUNTER' }); // 1 (+1)
store.dispatch({ type: 'INCREMENT_COUNTER' }); // 2 (+1)
store.dispatch({ type: 'DECREMENT_COUNTER' }); // 1 (-1)

Listening to state changes:

You can start listening to your state changes with simple callback:

const unsubscribe = store.subscribe(function () {
  const currentState = store.getState(); // { value: 1 }
});

// cancel listener when you don't need it
unsubscribe();

State as an Observable

Listening to state changes with a simple callback can fit most applications’ needs. But if you are working with Observables already, it would make it easier for you to access the Redux state as a stream, which you can then connect with other Observables as you see fit.

But how can we convert the store to a state$ stream?

It is common convention in the community to end your variable or function name with a $ sign, if it is returning an Observable.

We will first do it the hard way, and then I will show you a lesser known API from Redux that works well with reactive libraries too.

Store’s state as an Observable:

Let’s create a function that accepts Redux store, and returns an Observable of its state.

import { Observable } from 'rxjs/Observable';

function getState$(store) {
  return new Observable(function (observer) {
    // more to follow...
  });
}

const state$ = getState$(store);

const subscription = state$.subscribe(function (state) { 
  console.log(state);
});

Emit on new state changes:

We want the state$ to emit new values as the Redux store changes over time. So let’s add that logic to the function:

function getState$(store) {
  return new Observable(function (observer) {
    const unsubscribe = store.subscribe(function () {
      observer.next(store.getState());
    });
  });
}

What we did above is start listening to the Redux store for changes, and whenever there is any change, we are emitting a new next event with the current state of store.

Emit an initial value:

But we cannot stop just here. Irrespective of when a state change occurs (via dispatching of actions), we want our state$ subscribers to be able to receive an initial value right after their subscription:

function getState$(store) {
  return new Observable(function (observer) {
    observer.next(store.getState());

    const unsubscribe = store.subscribe(function () {
      observer.next(store.getState());
    });
  });
}

Now the subscribers will get an initial value right away, and as more state changes happen, they will keep receiving the new values over time.

Taking care of memory leak

We just need to make one more addition to our function. We have to make sure that as soon as our Observables are unsubscribed, the store listener is also cancelled.

We can do this by returning a function, which will be treated as an unsubscribe callback:

function getState$(store) {
  return new Observable(function (observer) {
    observer.next(store.getState());

    const unsubscribe = store.subscribe(function () {
      observer.next(store.getState());
    });

    return unsubscribe;
  });
}

Unsubscribing in RxJS will be done like this:

const subscription = getState$(store);
subscription.unsubscribe();

Final working function:

Here’s a fully working function with comments, that receives the Redux store as an argument, and returns the state as an Observable:

import { Observable } from 'rxjs/Observable';

function getState$(store) {
  return new Observable(function (observer) {
    // emit the current state as first value:
    observer.next(store.getState());

    const unsubscribe = store.subscribe(function () {
      // emit on every new state changes
      observer.next(store.getState());
    });

    // let's return the function that will be called
    // when the Observable is unsubscribed
    return unsubscribe;
  });
}

Short cut with `Observable.from()`

While we did everything manually in this post to go through the process of creating an Observable out of Redux store, you can also just use Observable.from():

import { from } from 'rxjs/observable/from';

const state$ = from(store);

Applying RxJS operators on your Redux state

Operators in RxJS will allow to process your state further with ease.

Mapping:

You could get only the counter value (integer) out of your state as a stream:

import { map } from 'rxjs/operators/map';

const state$ = getState$(store);

const counter$ = state$.pipe(
  map(state => state.value)
);

The pipe method is introduced since RxJS v5.5, and you can read further about pipeable (previously called "lettable") operators here.

You can then subscribe to counter$ only:

counter$.subscribe(n => console.log(n));

Filtering:

You can decide which values are emitted with filter. Let’s say, you only want to emit values, if the numbers are even:

import { map } from 'rxjs/operators/map';
import { filter } from 'rxjs/operators/filter';

const state$ = getState$(store);

const evenCounter$ = state$.pipe(
  map(state => state.value),
  filter(n => n % 2 === 0)
);

You can learn about more operators in their documentation here.

Closing thoughts

Redux is awesome, and has helped a big chunk of the JavaScript community to think in a functional way. RxJS is great, and is continuously evolving and helping developers embrace reactive programming with ease.

The two make a great pair. And hope you can benefit from both!

You may also want to check out redux-observable, which has a concept of “Epics”, which allows you to access actions as a stream.

This post was fully focused on state as a stream.

Dependency Injection with FrintJS

Fahad Heylaal — Tue, 02 Jan 2018 09:29:14 +0000

This article was first published on Medium.

For those who do not know yet, FrintJS is an environment agnostic framework for building scalable reactive applications supporting both React and Vue.js.

Since the v1 release in early 2017, the core of the FrintJS framework has been mostly responsible for handling dependencies in your Apps. While other packages are mostly built around the core frint package’s API.

Providers

We have a terminology for dependencies in your FrintJS apps. We call them providers. Providers are any value that you can define in your FrintJS App, which can later be obtained by their unique names.

Creating a FrintJS app is as simple as:

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyAppName',
});

Below we will show you how providers can be defined in your App in three different ways.

You will find some similarities with Angular 2+, that’s because frint uses a fork of diyai, which is a port of the Angular’s Injector API built in a way to be used without needing TypeScript

Known values

If you already know the value of your provider, you can use the useValue property like this:

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyAppName',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
    },
  ],
});

Now once you instantiate your App, you can get the foo value as follows:

const app = new MyApp();

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

Generated values

There are times, when you don’t really know the value of your provider, and can only generate them when the App itself is instantiated. The useFactory property can be used in those scenarios:

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyAppName',
  providers: [
    {
      name: 'bar',
      useFactory: function () {
        return 'bar value here';
      },
    },
  ],
});

Now the bar provider can be obtained from your App’s instance as follows:

const app = new MyApp();

const bar = app.get('bar'); // `bar value here`

Please note that, the function that generates bar's value is only called once during the App’s instantiation. After that, it will keep returning the same cached value from the App’s internal registry of all providers.

Generated from ES6 classes

There are also cases, where you can also write your providers as ES6 classes first:

class Baz {
  getValue() {
    return 'baz value here';
  }
}

To set ES6 classes as providers, we can use the useClass property when defining them in FrintJS Apps:

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyAppName',
  providers: [
    {
      name: 'baz',
      useClass: Baz,
    },
  ],
});

Now whenever your App gets instantiated, it will also instantiate the Baz class, and set the instance as baz provider’s value.

const app = new MyApp();

const baz = app.get('baz'); // instance of Baz class
console.log(baz.getValue()); // `baz value here`

Similar to useFactory, the class will be instantiated only once during your App’s instantiation and will return the same cached value every time you do app.get('baz').

Injecting providers in other providers

Now that we understand how providers can be defined in various ways in FrintJS Apps, we can go further into advanced use cases where one provider may depend on another provider.

From above examples, let’s say bar provider needs to know the value of foo. How do we inject foo into bar?

We can use the deps (short for dependencies) property:

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyAppName',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
    },
    {
      name: 'bar',
      useFactory: function (deps) {
        const { foo } = deps; // `foo value here`
        return foo + ', bar value here';
      },
      deps: ['foo'],
    },
  ],
});

This is what we just did above:

Define foo provider
Define bar provider
For bar, list foo as a dependency
The function that generates bar value will now receive a deps object with all its dependencies keyed by their names. Since we have listed only foo as a dependency, it will receive foo only for now.
The generated value of bar now returns foo value here, baz value here.

You can try it yourself:

const app = new MyApp();

const foo = app.get('foo');
const bar = app.get('bar');

console.log(bar); // `foo value here, bar value here`

You can apply similar technique for useClass too. The deps object will then be given to the class as its first constructor argument:

class Baz {
  constructor(deps) {
    console.log(deps);
  }
}

You can read further about it in the official docs for frint package here: https://frint.js.org/docs/packages/frint/.

Forem: Fahad Heylaal

Featurevisor: Git-based feature flag & experiments management

Links

Why?

Features

Roadmap

ProppyJS: Functional props composition for components (supports ReactJS & VueJS)

Overview

Links

Packages

Comparisons

Redux

recompose

Streaming Redux state as an Observable with RxJS

Redux store

Reducer:

Store:

Listening to state changes:

State as an Observable

Store’s state as an Observable:

Emit on new state changes:

Emit an initial value:

Taking care of memory leak

Final working function:

Short cut with `Observable.from()`

Applying RxJS operators on your Redux state

Mapping:

Filtering:

Closing thoughts

Dependency Injection with FrintJS

Providers

Known values

Generated values

Generated from ES6 classes

Injecting providers in other providers

Forem: Fahad Heylaal

Featurevisor: Git-based feature flag & experiments management

Links

Why?

Features

Roadmap

ProppyJS: Functional props composition for components (supports ReactJS & VueJS)

Overview

Links

Packages

Comparisons

Redux

recompose

Streaming Redux state as an Observable with RxJS

Redux store

Reducer:

Store:

Listening to state changes:

State as an Observable

Store’s state as an Observable:

Emit on new state changes:

Emit an initial value:

Taking care of memory leak

Final working function:

Short cut with Observable.from()

Applying RxJS operators on your Redux state

Mapping:

Filtering:

Closing thoughts

Dependency Injection with FrintJS

Providers

Known values

Generated values

Generated from ES6 classes

Injecting providers in other providers

Short cut with `Observable.from()`