What is this series about?

In my development work over many years, I have built many APIs on both the front and backend of web-based systems. Obviously, REST is a popular communications API and many server platforms provide libraries to organise and manage various features or "service" but what about the front end?

This series is (probably) opinionated and is not specifically about React (although the inspiration for this framework comes from React). It is about building a framework that you can use to pass globalised and share all of your well-built functions for use within your React components.

It does use various React technologies (like hooks) where applicable but also adheres to the ideas of inversion of control and dependency injection - hence minimising imported modules and facilitating easier testing.

What will this series use?

The focus is on front-end technology but will also demonstrate using HTTP calls for backend access. It will also use React for the front-end technology and Snowpack as the development environment. For global state management, the series will use react-hooks-global-state rather than Redux or MobX - but you could probably apply similar ideas to those technologies or roll your own with React Context.

Why would I want an API in my front-end app?

If you are building a single-page-app (SPA) then it is likely that you have various components that share some type of global state. I have found that applying separation to read/write of global state really helps organise an application and an API can help do that. You can use React Hooks to read your data and an API to update your data (as well as provide side effects.

Yes, Redux and MobX can provide that type of separation but, out-of-the-box, hook-based global state usually does not. The reason for going with hook-based global state management is purely for consistency and minimal boilerplating. This approach may not be suitable for larger developer organisations but works very well for smaller dev-ops style IT groups.

What next?

This is just the introduction article. In future articles I plan to:

• Go into more detail about the tooling selection - such as Snowpack and react-hooks-global-state
• Work through the core of a pluggable API
• Demonstrate how to add variables and functions in a plugin and how to access the global API from those plugins
• Make suggestions about a component factory that allows each plugin to "extend" the API footprint
• And other relevant things as we flesh out the pluggable API and various plugins

Please join me on this journey and provide your feedback.