State of Front-End at Fundbox

This is Part 1 of the series: “State of Front-End at Fundbox”. Part 1 covers the existing infrastructure at Fundbox and our motivations for redesigning it. Part 2 presents the research behind choosing a new framework: React, Vue or Angular to migrate into. Part 3 describes how we are migrating from Angular to Vue while still committing to a demanding product roadmap.

Overview

At Fundbox, we have delightfully used AngularJS for building our flagship invoice financing product, like the majority of the industry back in the day (AngularJS took over some strong veterans like Backbone, KnockoutJS and, umm, jQuery). AngularJS took off so much of the effort in building a complex front-end app, covering many of the common potholes on the way.

AngularJS was created in 2009 by two developers, Misko Hevery and Adam Abrons. They envisioned it to be a modern tool for building end-to-end single-page web applications. A couple of years later, Misko was already working for Google, integrating AngularJS within the different product teams, practically making history, in the front-end world.

In the last decade, the front-end world had changed dramatically for many reasons — browser standards alignment, mobile usage evolution, offline demand, platform diversity, reusability, and marked the beginning of the Single Page Applications (SPAs) era. For a few years, following Google’s success with AngularJS, many JavaScript frameworks appeared from nowhere, trying to replicate AngularJS’s success.

Most — almost all — of them failed (many are still in the game, and each of them have their own uniqueness and cool factor), except two. The first is React, an initiative rooted in one of the teams within Facebook, that built a faster and smarter DOM manipulation library and noticed they have something very strong in their hands, so they made it open-source.
The second is Vue, a futuristic front-end framework developed by Evan You, after working on multiple Angular projects within Google. Vue finds a place in-between: tries to answer React’s caveats of being super lean, while avoiding becoming complex as Angular.

In this article series, I’ll take you through the discussions and decisions we tackled in the process of choosing our next front-end framework at Fundbox.

A Look Back

Back in 2013, we used AngularJS v1.0 to build our central product dashboard. The first iteration of AngularJS helped us move fast, and not hassle with many of the obstacles that are inherent in the process of building front-end apps: routing, validations, data management, DOM manipulations and more.

Two years later, in 2015, we pushed a completely redesigned version of our dashboard into production built on-top of the latest (back then) AngularJS v1.3. Our product grew significantly, and our development teams also. As a startup company, we move fast, and our products are continually evolving. It was super important for us to be able to reuse the components we use in one product, as well as in the others.

We like our UI design. UX is one of our key differentiators, so we keep it constant among our different apps. Thus, our apps are similarly elegant, clean and straightforward both in layout and design. Some user flows change between products, of course, some features exist only for certain types of customers, but they are too, built of the same little parts that make our UX — WOW.

And so in early 2017 we, again, updated our apps to use the latest AngularJS v1.5. On the same note, we pushed hard on ES6 usage in our apps, and for that, we began transpiling our apps through Babel. But more important was the change of concepts in creating our front-end components: we developed a universal UI library to serve all of our products. To achieve that, we refactored our apps to implement AngularJS’s Components API. It allows building self-containing components, that can be reused easily in various AngularJS apps, which was what we needed.

Our UI library of universal components grew significantly, and it contains the majority of the controls and flows in our products. We developed a stronger bond between groups in the company, based on the fact that teams are writing features knowing that other teams will reuse these features. So, the code they write has to be extensible, flexible, testable, readable, generic and very well-documented.

So What’s Next?

It’s 2019 soon, and you know what happens every two years in the front-end world? Yep, we’re moving forward again. We are moving away from Angular.

Frankly, our apps are working smoothly, and we have a minimal amount of front-end bugs on production, our delivery times are excellent thanks to the robust infrastructure that we’ve built over the years, and our universal UI library is flourishing, allowing the teams to develop features very fast.

Why move then?

1. Our existing AngularJS version (v1.5) is getting old and is not developed anymore, only maintained (officially, starting July 2018). Since we published our AngularJS v1.5 app, AngularJS released v2, v4, v5, and v6. AngularJS had been refactored from the ground up and for that even ditched the JS as a suffix, so now it’s officially just called “Angular.” As a consequence of the core changes it went through, latest Angular versions are not backward compatible, and so there’s no “easy path” for upgrading.
2. We learned a lot building our first product, learned more with the second and much more with the third. Most importantly, we learned how they all work together, and we can use that knowledge to build an even more modular platform for Fundbox’s current and future products.
3. We’re missing out on many of the latest features that new frameworks support natively, like data management, routing, complete separation of components (component-based architecture) and so on.
4. Community support and availability of extension packages is vanishing for our older version of AngularJS. The front-end industry is, naturally, moving away from AngularJS as it becomes obsolete.
5. We care about innovation and developer happiness. Our current infrastructure is robust and is delivering excellent results (even that it’s not perfect), because we’ve built it thoughtfully. Our developers know the ins and outs of it very well, and can find their way through it blindfoldly. Still, looking ahead, developers must stay on top of the latest standards, and so staying with an old version of a framework, can stagnate their career.
6. Recruiting new front-end developers is getting harder: they either already know AngularJS too well and know that it’s getting obsolete, or aren’t willing to learn such an early version of AngularJS, because it won’t push their career forward.

The Mission Today

The goal is to build a new, modern, fast and reliable platform to serve all of our current and future front-end apps. We now have at least 5 AngularJS apps using what we call the Unified Infrastructure. All of our apps are sharing a very similar app shell, bundling and deploy processes, and each app loads a set of shared components from the universal library, as it needs to serve its collection of customers.

While some of our developers are more eager to replace our existing foundations with something fresher, others have shown greater satisfaction with the fact that our current infrastructure is stable and reliable and deserves to stay longer. But all of them agreed that the day in which we’ll have to make a move and rearrange is not far.

Lately, we’ve been discussing this topic multiple times, wondering about what is the exact direction we should choose, out of all the possible ones. So, first of all, we knew we had a few things to consider:

1. Choose the best front-end framework to fit our current and future plans.
2. Decide on an upgrade path.
3. Outline the work needed, and split the efforts (by that, also, spread the knowledge between the teams).

We’ve set to start working on this in the third quarter of 2018, so the date is here and the details of the master plan, of how to transform our front-end into the future, are getting clearer.

Read On

Part 2 is Comparing the finalists in the Fundbox Front-End Framework Battle: Angular, React and Vue.

Thanks for reading!