hliejun's Portfolio

TECHNOLOGY

BUILD

React

SASS

Babel

Webpack

Rollup

TOOLS

Yarn

ESLint

SASSLint

Storybook

Travis CI

PLATFORMS

NPM

GitHub Pages

ABOUT

DESCRIPTION

The React Chat library consists of a ChatList and a ChatRoom component, each extensible through receiving a collection of props inputs. The components are entirely presentational and only contain view logic. They can be used in combination to create a holistic chat application.

MOTIVATION

While I was working for NodeFlair, I was tasked to create a responsive messaging view for their webpage. I noticed that there weren't many extensible chat component libraries available in the ReactJS community, especially since chat applications are typically better supported in a native environment with access to native push notification engines and data stores.

However, web chat components are still relevant for users to browse conversations without the hassle of downloading an application. They are also useful for CRM chat services, progressive web applications and even cross-platform desktop applications using frameworks such as Electron. I took the opportunity to learn writing and publishing a reusable, presentational React component library on NPM, extensible for a wide variety of use cases.

CHALLENGES

A substantial part of the project was about setting up the environment for a React component micro library. One main concern was to keep the library and bundle(s) size small to reduce the footprint on the client application.

Another challenge was to ensure abstraction of business logic, writing function hooks as props or contexts to be received. To ensure the library could be utilised for a great variety of use cases, a lot of optional and generic props were provided, along with proptypes checking.

DESIGN

COMPONENTS

I adopted the presentational component design pattern for ChatList, ChatRoom and their functional child components. Data is received and provided through contexts or props. For stateless children that could only be affected through contexts and props data, they were written as pure components to optimise the rendering lifecycle. ChatList and ChatRoom could then be used in container components on the client-side where business logic could be defined and hooked up with the presenters.

LIBRARY BUNDLING

Using Rollup configurations, I exported the ChatList and ChatRoom component together as a single module in both UMD and ES module formats. The UMD format is compatible with both browser script import and NodeJS module import. The additional ES module format allows for optimisation by tree shaking to resolve redundant imports and bundle code. This is useful for optimising native loading in ES-module aware bundlers. Marking of external and peer dependencies also prevented Rollup from bundling dependencies into the library unnecessarily.

FEATURES

EXTENSIBLE PROPS

The functionalities of the components are extensible by optional props. This allows you to provide handler functions as props to customise view interaction and event behaviours. You can opt-in to features such as menu actions, avatar link, chat item loaders, and many more. There are also opt-out options, where you can explicitly indicate for the search bar or avatar to be hidden, for example. This makes the chat components highly customisable.

CUSTOM MENU & ACTIONS

The chat list items and message items can optionally trigger an action menu, of which the menu options can be customised through supplying event callbacks as props.

SEARCH & FILTER

Search and filter bars are available in both ChatList and ChatRoom components, and they support both live and manual search behaviours. Search behaviours can be customised in container components and hooked to the presenter through a callback function, along with other business logic.

RESPONSIVE DESIGN

Chat components are responsive to different screen sizes, and works well for mobile, tablet and desktop environment. Layouts are dynamic, with some elements such as avatar and action menu exclusive to specific view classes depending on the availability of the screen real estate.

SWITCHABLE LAYOUTS

2 distinct layout designs are supported, one with staggered messages similar to chat applications such as WhatsApp™ and Telegram™, and another with aligned messages seen on Slack and web forums.

ASYNCHRONOUS CONTENT

Images and chats are loaded asynchronously, with options to display loaders or placeholders preloaded in the library.

FALLBACK ASSETS

Fallback assets are available as preloaded polymer icons. Lettered initials avatars are available as placeholders when avatar images are unavailable.

REFERENCES

React Library Guide Article about setting up the environment for publishing ReactJS libraries on Hackernoon.

Rollup Bundling Guide Article on plugins, loaders and bundling configurations for Rollup by Jason Lengstorf.

React Pure Components Guide Writing and optimising stateless components by Lucy Bain.

Portfolio

UrbanZoom