What is the best frontend technology for your bespoke app development?

If you are thinking of having a bespoke application, surely you are wondering what is the best technology to develop it.

Each day there are more websites and apps trying to get their spot at the top of the search results and engage more users. Getting there is not easy, as it is required to have a good product, efficient, but also to keep it up to date fast. These needs have caused many frameworks and libraries to appear too, offering a set of possibilities than can be used based on the type of product to develop.

In Yapiko we have more than 7 years of experience now, and with it we have learned that the aforementioned requirements are key for success.

In this article we will try to explain why we chose it over other possibilities, why it has also become our first option, and also other alternatives that could work with your project

React, the best technology

React is a free library of JavaScript, one of the most used languages in web development. React eases the development load by combining the front and back ends. This means that the styling and logic of the app can be done simultaneously in the same place and using React only, so the tech stack required stays small compared to other options and developers can get more experience faster.

Its main advantages are:

Easy to develop

React makes it painless to create interactive UIs. Design simple views for each state in the application, and React will efficiently update and render just the right components when the data changes, so it gives a richer and more fluid user experience.
Declarative views make the code more predictable and easier to debug, thus saving development time.

Component-Based

It allows to create simple components that can be reused anywhere in the app, like the menu or different types of buttons that will appear many times throughout the app, but that will need to be created only once. This means that during development any change that affects for example 12 buttons, can be done easily changing the single component where the button is, so changes can be applied and compared faster, while keeping a consistent look of the app.

Learn Once, Write Anywhere

Develop new features in React for multiple platforms without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native, which can use the same code for both Android and iOS, so with the code of one, we get two apps ready for the vast majority of the smartphones market.

Community

React has a a strong and growing community (it’s the top JS framework according to GitHub) and has a huge variety of free libraries, which allow to implement features without the need to develop them from scratch, like theming, customizable components, widgets and share buttons from social media, user authentication with captcha security and other types of forms, and many more that will facilitate their implementation.

SEO

Since it is a JavaScript framework, the content is client-side rendered which affects negatively since Google would get mostly an empty page, waiting for the JavaScript code to work, However Google has been improving this side in the last years and is not as much of an issue as it once was.
But React can also be server-side rendered thanks to others tools like Gatsby.js and Next.js, which can make the website load faster in older computers or smartphones, and spare Google from having to execute the JavaScript code to read the content of the page.

Although it was released a few years ago, it has been growing every year and has become the 2nd most used framework by professional developers surpassing Angular.

It has also kept the first and second positions for the most beloved for 4 years straight with a percentage of 67-75% “of developers who are developing with the language or technology and have expressed interest in continuing to develop with it”

Usage of React and other Frameworks by professional developers in Stackoverflow
Year	Graph	Percentage	Growth per year	Position
2017		12.6%	311% (according to the Trending value the previous year)	4th
2018		28.3%	15.7%	3rd
2019		32.3%	4%	3rd
2020		36.8%	4.5%	2nd

Source

Only second to jQuery, which is suited for simpler web building, the future of React looks promising with a constant growth and a huge community that loves it and assures that it will stay relevant for many years more.

Used by:

• Facebook: StackShare
• Instagram: Developer velocity is a defining value of Instagram’s mobile engineering. In early 2016, we started exploring using React Native to allow product teams to ship features faster through code sharing and higher iteration speeds (React Native at Instagram)
• Reddit: StackShare
• Uber / UberEats: “…[ReactNative] did seem to fit the UberEATS use case very well. Since the original incarnation of Restaurant Dashboard was built for the web, our team had a great deal of experience using React but limited iOS/Android exposure. There was also a wealth of knowledge about how the restaurant component of the service functioned, which we had accumulated by working on UberEATS since its inception. These considerations made React Native, which provides a platform for mobile development in the language of the web, a compelling option. It provided us with the utensils we needed to “cook” the application we wanted to near-perfection.” (StackShare)
• Airbnb: StackShare 
  ”The primary benefit of React Native is the fact that code you write runs natively on Android and iOS. Most features that used React Native were able to achieve 95–100% shared code and 0.2% of files were platform-specific”. “One of the largest concerns around React Native was its performance. However, in practice, this was rarely a problem. Most of our React Native screens feel as fluid as our native ones.” (Medium post)
• Netflix: High performance user interface / Performance without compromise
• Amazon: StackShare
• Tesla: Seen in React’s page: reactnative.dev
• Spotify: They had a Desktop and Web player clients. And event though Desktop was their main client developed with other technologies, they decided to unify both using Web’s React approach of “a much lighter, simpler experience”. And now, “at the beginning of 2021, we have created one maintainable codebase for both of our clients with the high standard of accessibility and speed of development we hoped for”, having React as the core of both. (“Building the future of our desktop apps” )
• Forbes: StackShare

And many more: reactnative.dev/showcase , including the mobile version, React Native: github.com/ReactNativeNews/React-Native-Apps

Alternatives to React for your bespoke app development

Angular

Angular is also one of the most common JavaScript framework that helps developing dynamic, single page web apps. Made by Google, but it is losing its ground and is fighting to stay relevant now, as it has been surpassed by React.

Strong core

It has a stronger core so that it does not rely on external libraries to perform certain tasks, unlike React. This can be a good thing since it unifies development, but it also restricts freedom. React is most likely to have at least one library for the many tasks you will need in your app, allowing the developer to choose the one that will work better for your needs.

Reusability

Components of similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc. This behaviour is similar to React’s.

Learning curve

Angular has a steep learning curve. It is a complex and verbose framework with many ways to solve a single problem. It has intricate component management that requires many repetitive actions.

Suited for large sites

Its complexity is designed for complex systems in mind. It can also be used for smaller sites, but it will not be as effective.

Two-way Data Binding

This means that when the model changes, the DOM (UI) is updated too, and vice versa. This doesn’t require the intervention of a developer, so more time and effort can be saved in coding, translating, and updating DOM elements. However, as the complexity and breadth of your project increases, the difficulty of managing UI elements and model states also increases, making it harder to control performance and controlling renderings.

Used by:

• Paypal
• Google services:
  • Google Play Store
  • Google Voice app
  • G Suite homepage
  • Google Open Source
  • Google Play Books
  • Gmail
• Forbes: StackShare
• Deutsche Bank

Vue

Vue.js is a progressive framework for JavaScript used to build web interfaces. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Tiny size

It is the smallest compared to the others mentioned, so it has an advantage when it comes to download time in the client side improving the user experience and also the SEO ranking.

Component-based

It works like React, diving its code into smaller pieces that can be reused in many parts of the application, which makes it easier to code, read, and write tests.

Community

Vue has a lot of support and is becoming one of the most used frameworks, so more libraries are being added and are easier to find. However, big part of that community is from China because its creator, Evan You, is Chinese, and is also used by some important Chinese companies, like Xiaomi and Alibaba, which although it helps to increase the numbers, it also means that some of those libraries, documentation and help will be harder to access to for us who use English as our main language when programming.

Used by:

• Nintendo
• 9gag
• Font awesome
• Xiaomi
• Alibaba
• Paypal (Vue Storefront)

Flutter

Is another free framework and Google’s platform-independent technology for creating native web and mobile applications.

New language

Flutter is a fairly recent framework, released in 2017. And unlike the previous ones, it is not a JavaScript framework. It is based on Dart instead. While in 2021 JS has a 68% of professional developers using it, Dart only has a 6%. Which will make finding support and developers for it more complicated.

Performance

Flutter apps tend to have a smooth performance which makes a better user experience. Although it also tends to have a big size which can impact the download time and space taken, that can be a drawback for older phones or some people that have little space in their phones and have to prioritize between apps.

Community

It has a growing community which is essential, and although it doesn’t have nearly as much support and third party libraries as React, if it keeps this path it will become an important tool and it is worth keeping an eye on it to see how it evolves.

Used by:

• Google
  • Google Ads
  • Stadia
• Tencent
• The New York Times

Svelte

Svelte was released at the end of 2016 and is based on JavaScript too. It is an open source, front end compiler to build user interfaces.

Performance

As it is compiled, it means that the end user doesn’t actually “see” it. It is instead transformed into standard JavaScript when it is launched into production. This way there is no need for the user to download anything related to Svelte, instead, they get the JS code that the browser will need in a much smaller size, taking advantage of all the Svelte features but in a more efficient way, making it a more fluid and engaging experience for the user.

Learning curve

Svelte is also based in JavaScript, and its code is also simpler than most of the other options listed above, so developers will acquire experience faster than with the rest.

Faster development

It is also component-based, which makes it easy to create one component and use it in many different places of the app, by having the same component or changing small parts like the text of a button, while keeping the style the same.

Community

Similar to Flutter, it is growing but it is still nowhere close to React or Angular. Support and other libraries will be harder to find, and in some cases creating the required component from scratch will be the only option, which is much more time consuming than downloading a third party library that has already been used and tested by thousands of other developers in which you only need to change and adapt some parameters to the liking of your app.

Used by:

• Avast
• 1Password
• IBM
• GoDaddy
• Philips

Stats comparison

GitHub stats on September 2021

JS frameworks benchmark: stefankrause.net/js-frameworks-benchmark8/table.html

Conclusions

So why is React the best technology for your bespoke app development?

Given the pros and cons of React and some alternatives that could also work, we decided to keep using React because its pros outweight those of the alternatives and with the experience we have acquired in different projects we are convinced that we are in the right path. A path that is bound to last many years more seeing how React keeps improving, becoming more important and relevant every year since its release.

No language is a “one-size-fits-all”, and depending on the type of project one will be better than the others. However, thanks to its scalability, flexibility, support, huge community behind, and our experience with it, React is a serious candidate for your next project.

That is why, after considering the best option for us, we ended up choosing React, and after testing it and working with it, it convinced us and we have stuck with it since then, learning more and more about its possibilities, weaknesses and strengths, and adapting to its constant evolution.