The 3 Simple Reasons Why Dashlane Uses React

Today’s JavaScript ecosystem is changing at an incredible pace.

While innovation is good, the churn rate of front-end technologies is problematic. Every new project requires decisions to be made: which languages, frameworks, and build tools will you rely on? Will you stick with the deprecated version of what you know the best or embrace the innovation at the risk of picking a framework that will die in a year? These decisions are tough and have a direct impact on the business.

At Dashlane, we chose to build the next iteration of our web application upon React for its structure, simplicity, and stability.

Here’s why:

Structure

React is all about building reusable components (React official website)

Modern frameworks, including React, strongly promote organizing your code in components. Building a React application is all about creating small reusable components that you can compose in different ways to craft user interfaces.

Each component is a piece of code that encapsulates in a single place everything needed to make it work: the look, and the behavior. It allows the code that instantiates the component to make use of a complete abstraction of the component implementation details. While it may seem like it’s an obvious idea, it’s not yet something standard in web technologies and it’s not easy to do in a web application without a good framework.

There are multiple benefits of encapsulation:

Improved code reuse – a component can be easily instantiated multiple times at different places.

Improved code maintainability – code impacting a given component is easy to locate and change without impacting other parts of the application.

Improved testability – a component can be easily isolated from the rest of the application to be tested.

At Dashlane, we are working in a rapidly-changing environment. Based on constantly measured user feedback, requirements evolve and our applications need to adapt quickly. 

By organizing our code into reusable components, we ensure both code quality in the present and easy changes in the future.

Simplicity

Simplicity is key to a good software design. We don’t want to build a monster application that nobody but its original authors can modify. Conversely, as Dashlane team is growing fast, we want developers new to a project to be efficient as quickly as possible.

Therefore, our code base has to be easy to write, extend, and maintain.

Reactive updates

In a React component, you simply “express how your app should look at any given point in time”. When your data changes, you don’t need to manually update your UI accordingly. React takes care of all UI updates.

 For an application developer, that means it’s less plumbing, and therefore a reduced risk of bugs.

Simple to understand

React introduces very few concepts. Before being able to write some components, a developer only needs to understand what is a component, its props and its state.

Javascript-centric syntax

JavaScript is far more powerful than HTML. Therefore, it makes more sense to put “HTML into Javascript” than “Javascript into HTML”. React has minimal custom syntax. Other frameworks have custom templating solutions for conditional, for loops, for everything. React relies on JavaScript, meaning less lock-in and quicker understanding. JSX, React’s custom syntax, is both optional, and not directly locking in to React. Technically, one can use JSX with another virtual component tree library.

Simple to debug

React fails fast and explicitly, thanks to the fact it doesn’t rely on a templating language. As JSX is only Javascript, syntax errors are detected at compile time and not at runtime, shortening the feedback loop and saving precious development time.

Stability

We expect our web application to live for a long time, so it is important that our foundations can survive that time as well. Rapid experimentation and evolution in the JavaScript world leads to the creation of many projects that become obsolete within a span of a year. We certainly do not want to be stuck with an outdated framework at the base of our application.

Corporate backing

React is backed by Facebook, which uses it in its own products, and thus we can expect at least some support for a while. In addition, React is used in production by many big names in tech, from Airbnb to Yahoo!; each of them contributing more or less to the evolution of the tool.

You can never be sure (see Angular 1), but of all of the alternatives, this one is the best.

Single-purpose tool

React embraces the Unix philosophy of small, composable, single-purpose tools.

React, quoting its creators, is “just the UI”. It’s a library, not an all-in-one framework, and it does not grow tentacles across the entire codebase. Our application is center, and React can be switched to an alternative implementation fairly easily.

Of course, building upon small libraries has a setup cost. For example, a monolithic framework like Angular provides you with many functionalities out of the box: web API calls, dependency management, testing, … React is not self-sufficient and you have to complete it with other libraries. At Dashlane, we use it in conjunction with Redux, Webpack, and a lot of small single-purpose npm packages.

We believe that this cost brings us more stability in the long term, and more flexibility to make our tool set evolve with our needs.

---

Only the future will tell us how far these choices will lead us. Our web application revamp is not online yet, and we still have plenty of things to figure out to build a long-living, maintainable, quality application.

If you want to help us, we are looking for talented web developers to join our team! We’d also love to know what you think about React and our web applications in the comments below!