A bit more than two years ago, the Mapillary web underwent some big changes that introduced the visual appearance that you can see today as well as improved functionality. As our database has been growing fast (to almost 390 million images as of today!), the need to handle lots of data fast and efficiently has also quickly increased. While the visual appearance remains familiar, we’ve just released the biggest update to our web since 2016, which significantly boosts performance and user experience.

The most important result from the visitor’s perspective is the page loading time. The dynamic part of our website, i.e. the database application (mapillary.com/app), now loads and reloads about 50–70% faster than before. The static part, such as product and company pages, has speed improvements of up to 60–80%. Our web application as a whole is now significantly and visibly faster and should be a more pleasant experience for our users—as illustrated by the example in the GIF below.

Loading time when opening the map application in the previous (left) and new (right) versions of our web

Another important update is to the latest version of MapillaryJS, which introduces the undistortion concept to Mapillary Viewer. It means that all distorted images with bent lines from the camera will be displayed with straightened lines, just like in the real world.

How we did it

For other developers out there, we would also like to shed some light on what we did to achieve these results. In short, it involves improved application structure, issues fixes, and upgraded dependencies, all enabling us to simply offer a better experience for our users.

For quite some time, our team has been focused on the idea of Micro Frontends, which basically extends the concepts of micro services to the frontend applications architecture, breaking a monolith app into smaller pieces. In this version we decided to do it better, having completely independent applications working as one, and thus making the development, build, and deployment processes significantly faster.

There are some steps in our development process, like re-rendering some applications, that have been improved by 80% for Version 2, and the whole deployment stage takes about 30% less time now. All this means that it takes less time to fix application problems, implement new features, and make them available to our users—overall, our team will be more efficient in improving the user experience.

Our dependencies were reduced significantly in order to make a more lightweight project out of mapillary.com. Almost all of the remaining dependencies got upgraded and we commit to using the newest and the best technologies out there continuously. We are now using Angular 6 and already building steps to upgrade to the recently released Angular 7, as well as to update the code to RxJS 6. Also, we gave up our Webpack configuration to benefit from the continuous development that the Angular CLI team is working on so thoughtfully.

What’s next

This was the first phase of improving our web application and content pages. It implied focusing more on creating a clean separation between our micro-apps and optimising all stages of development process of the project. The next phase will be code refactoring, applying updated coding standards, and speed optimization more at the code level rather than the architecture level.

So go ahead, check our new website, tell us what you think (feedback is very important to us), and stay tuned!

/Lucia, Front-End Developer