Goal

After working for a few years with React, Angular and Vue I wanted a better functional programming focused front-end experience. A lot of the popular libraries have complex abstractions that are hidden away as separate modules. Routing for instance is typically a separate npm module and has a crazy amount of code to handle history management, configuration, view management, and caching. I was curious what it would be like to use functional programming and a data-driven approach to build a framework that works in a more templated manner. For instance the router in R5 is very simple and should cover a wide range of use cases, it is built as function that takes a url string and returns a stream of objects that have view and param information. The resulting list can easily be diffed, read, and processed in the render phase using a regular react\redux approach.

With a more templated approach it means key infrastructure has a smaller footprint and more transparency. This way if you don’t like the router it comes with you can hack it to your liking, remove it, or replace it because it’s all just regular JS project code no more than a few dozen lines to work with.

I chose React because it’s the only view library that lets you implement vanilla functions that return views. When you can express a view as a function of state that forms a very powerful abstraction. You can use existing iteration and higher-order-function based libraries or functions to render your views and keep them in sync with your app state in a very concise and deterministic way.

Sadly I haven’t fleshed this project out to where I’m comfortable releasing it yet but I do want to revisit this project. While I don’t expect this project to catch on I do think it could serve as a good blue-print for a really powerful front-end functional programming framework. Additionally, I feel this project is my love-letter to functional programming in JS as I move towards a Clojure only environment.

Process

1. Research and try the biggest frameworks today
2. Find areas that can be improved: I.E. Reducing Redux Boilerplate or managing async effects in a data-oriented way
3. Debated a templated approach vs. npm library approach
4. Created a basic todo example
5. Wrote some unit tests

Discoveries

1. React, Redux, Ramda, RxJS, and Recompose are a really powerful functional programming toolkit.
2. I started this framework before I regularly used Clojure and it turns out a lot of libraries like Luminus and Re-Frame took the same path I did for choosing lighter weight pieces that manipulate state data over time resulting in very simple machinery.
3. This is a project I have really enjoyed working on and would love to pick it up again.