Frontend Tools For Building Interactive Apps

At Fastdev, we have lots of customers, with different projects and different scopes of tasks. They may be cumbersome or time-consuming, but they are never boring or dull, at least for me. As a developer, I can surely say I work on challenging and demanding projects, and I mean it in a good way!

One of the reasons is that those projects are highly interactive apps, not just a panel with tables and buttons, but almost a whole new real world that elevates the user experience dozens of times. The customer that I work for is a company that provides interactive solutions for the real estate market and ensures their users are getting the full grasp of what the premises are like – through guiding them in 3D, interacting with its floorplans and customizing interiors.

From a developer’s perspective I’ve always been genuinely interested in how those interactive apps are built, what’s under the hood that makes the wheels spin, and I became really lucky when I got to develop these kinds of apps. Here’s what we use at Fastdev in creating interactive sophisticated apps and our compilation of tools that you will find utterly handy (and probably will turn into another hobby):

Three.js — Powerful 3D library

Three.js is an open-source powerful library for working with 3D models in any browser. Are you tired of grey real world? Create your own fuzzy and fluffy one! VR supplied. Not ready to leave your real life? Well, have fun with Augmented Reality, which this library also supports.

It’s built upon WebGL engine and uses client’s GPU in rendering processes. As we develop 3D sphere models of premises with telemetric photos, it is a general 3D app, and doesn’t require something extraordinary and resource-consuming. However, it’s of a high importance for us to be able to adapt to alternatives in our working models or when new features are introduced. That’s where the library’s main advantage comes in – versatility. It supports both WebGL and canvas rendering, allows customization in shaders and engines.

Additionally, as mentioned earlier, Three.js is an open-source project and is actively maintained despite being released in 2010. We personally prefer this library as it has proven its durability and is still being developed along with lots of add-ons, modules and plugins.

Konva — Smooth 2D modeling

Konva is another open-source project, this time for 2D drawing and modelling. If the 3D world is too much for you, drop off a dimension and turn to Konva. You can create games of different kinds, as well as visualise data, animations or just complex visuals. Unlike our 3D apps, two-dimensional ones are rather sophisticated and require a special approach.

For example, for virtually renovating your future home to a user’s personal taste and furnishing or just playing around with the floor plan. Konva does it best, with, again, its versatility, excellent maintenance and top-notch performance. It’s notable that unlike its similar libraries, Konva incorporates layering approach which we actively use in our projects. Last, but not the least, it has great support for popular frontend frameworks that are broadly used – React and Vue.

D3 — Powerful data visualisations

In case you’re quite in terms with the real world and feel nerdy about data stuff, then D3 library is a right choice! It’s a brilliant source for building data visualizations to interact with. As you might’ve noticed, we do like being flexible and prefer libraries that allows versatility, D3 is not an exception. With this you gain full control in the way you display and set the data, as well as the source to use while rendering it (canvas or even SVGs!). As mentioned earlier, it’s a spot-on tool for data-driven visuals, charts, dashboards, all this stuff. We personally use it for massive graphs in our internal system for the photographers department.

D3 proves very good as it handles massive arrays of data and works like a charm in ‘extreme conditions’ (of course, thanks to my fellow colleagues’ excellent development skills). Luckily, this cool library keeps on evolving and being maintained.

Bonus: Maths — The Invisible Hero

Yes, it’s inevitable, however much you’d like to avoid it. Most of interactive apps are based on mathematical models and calculations. For instance, it’s good to know the basics of lineal algebra, like vectors, matrixes, angles, trigonometry, since it’s very much broadly used in 3D modelling.

Of course, it’s possible to perform the basic actions without a proper knowledge, but Math skills untie your hands in developing more complex and sophisticated things, thus, a better flexibility, top-notch performance and a higher demand. In case you’re a freshman in the world of maths, there’s a library that we use for routine and repetitive calculations.

Conclusion

This is a recap of what we use for creating an unforgettable user experience and helping our customers in gaining more profit (honestly, we do it just for having fun).

Hope you’ve learned something new! Would really like to hear what you think about it or if you have something to add from your personal suggestions or experience, you’re always welcome.

Do you have a project in mind? Let’s bring your vision to life! Contact us here

Author/ Egor S. / Developer