Following on from the introduction, this post will talk about some of the tooling that I have recently been using and why it help support a pluggable API.

snowpack

As many developers know, build (and dev) tools really help improve your productivity. Also, like many React developers, I had been using Create React App (cra) from the Facebook team. It abstracts away the tedious setup of webpack for helping to give you a "live" development environment as well as being able to bundle up your code for deployment.

However, I have recently cutover solely to Snowpack due to the speed in which it works and the non-lock-in to the supporting scripts which CRA requires you to "eject" from and then lose all the benefits. Snowpack also is not as aggressive in the way it bundles your files during development and the Hot Module Reload also works very well.

Unlike CRA, Snowpack has several templates to work with non-React frameworks.

If you don't already know about Snowpack, take a look here:
Snowpack. It has a few small issues but all can be overcome easily.

yarn workspaces

When developers are building modules for publication (on npm) the common go-to tool is lerna. However, when you just want to have some separation of server and client (or clients) yarn workspaces provides a nice way to have a mono-repo. You can always upgrade to lerna at a future point as they both can work together. So, for this series, we will stay with yarn workspaces and talk about some of the common usage commands with that.

react-hooks-global-state

In the global state management space, many have heard of Redux and MobX. These are very common but also have a fairly steep learning curve to master them. They are also often overkill (and overhead) when you have a smaller development team with good communication lines.

Fortunately, React Hooks have been around for a while now and there are some solid statement management solutions around.

For this series I am going to stick with react-hooks-global-state as the model is very simple to use and you CAN actually leverage your Redux knowledge of types, actions and reducers if you want. I am also looking at a different version of the pluggable API that uses zustand. One of the benefits of zustand over react-hooks-global-state is that zustand does not require an initial state to be created - allowing for more dynamic state at runtime.

These tools come from the similar developers. Both use React Hooks and both support the ability to interrogate and manipulate the state from outside of React. This becomes important when you want to separate your backend API calls from your front-end components.

Check out react-hooks-global-state and zustand just to become familiar with these packages. We may end up referring to both.

Next...

Next I will talk about the core parts of the pluggable API and we will start getting into some code. I am planning have a git repo that will have a branch for each stage but will see how that pans out along the way.