Co-founder and CEO of Ideamotive. Entrepreneur, mentor and startup advisor.
So what are frontend developers looking for in their tech stacks? At Ideamotive our developers know that it all comes down to fast development and ease of building user interfaces.
Rather than trying to be decisive, we offer our one head-to-head comparison of the two JS technologies: Backbone.js vs React.
If you need to develop an application that has different types of users, here you can use Backbone collections (arrays) to separate models. Events can be used with Backbone Models, Collections, Routes, and Views.
The BackboneJS ecosystem contains:
Backbone.js is an ideal choice for front-end and back-end development because it supports REST APIs that are used to keep the front-end and back-end in sync.
Several years ago, React took the JS world by storm and became its undisputed leader. React recommends using a Reactive approach and functional programming paradigm.
React also introduced many of its own concepts to define its unique (at the time of inception) approach to web development with a user interface. To use React, you need to master component architecture, JSX, and unidirectional data flow. Unidirectional data flow is implemented by Flux.
For communication between components, you can use Flux or a similar JS library.
React also introduced special objects - state and properties. Using state and props objects, you can simply pass data from component to layout (using state object) or from parent component to child component (using props object).
React has prompted the development of many additional tools to achieve high flexibility. For example, instead of Flux, React developers can choose:
And this list of state management libraries for React is far from exhaustive. It's the same with the HTTP libraries: React can work with jQuery AJAX, fetch API, Superagent, and Axios, just to name a few.
The React ecosystem consists of:
Therefore, we strongly recommend this material for those choosing between the two JS sides: Backbone.js vs React.
Since you are the one who decides which JS framework will do the job, you’ll face a major challenge because you have to choose.
To make it easier to pick a JS framework for client-side development, we need to narrow our comparison areas down to a few of the most important ones. For client-side development, our criteria list has the next points:
There is no magic going on under the surface: the source code of Backbone.js is clear, readable, and well commented. Backbone is also "lightweight" in the sense that it doesn't cost a lot to use. It can be easily integrated into an existing page and you can only use certain library components (for example, views without models or collections).
While there are many frameworks that you can get started with faster, Backbone's lack of surprises, speed and flexibility make it suitable for all types of applications. On the other hand, since many functions are not provided by default, you either need to write more base class code to get those functions, or find a plugin that provides them however you like.
It also doesn't provide a specific structure, the developer must be mindful of things like memory management, and the lack of view lifecycle management makes state changes prone to memory leaks. Hence, more code is required compared to React.
At the same time, React has a pretty fast level of coding. The JS system is widely recommended for its efficiency, small block size, flexibility, and faster approach to work due to its simple component model and server-side rendering functionality.
Since its inception, React has changed the way front-end developers think about building web applications. With a virtual DOM, React makes UI updates as efficient as possible, making your web application faster.
With React, you can get many of the performance improvements it has to offer by measuring and optimizing how and when your components are rendered. And React only provides the tools and features you need to make this task easy.
As with any MVC framework, Backbone.js reduces the load on the server so that the website depends on it only for receiving JSON data, not for display logic. This results in significant performance efficiencies even as the page grows.
However, depending on the level of experience, Backbone.js can be a blessing or a challenge for a developer.
Tools like Backbone can also be problematic when your team misrepresents a junior because Backbone doesn't provide a specific structure. Angular makes this a little trickier - although certainly not impossible! - accumulate a bunch of spaghetti code, says Jason Swett.
When building a Backbone.js application, you will certainly need a lot of libraries and add-ons, and while many people love extensibility, working with the framework can be tedious.
Although Backbone is not actively updated these days, bugs have been fixed and the documentation is updated systematically.
React users claim about the lack of optimized documentation. ReactJS is a super-fast solution sharing leaves no room for simplified documentation, documents are a bit chaotic as many developers individually enter them into the database without any systematic approach.
According to similartech.com, there are 1,138,436 websites that use Backbone, while its trend is relatively low. Talking about React, the portal has counted as many as 1,425,239 domains using this technology. And of course, its trend is only growing.
React JS has a leading position in the top 10k sites, top 100k sites, top 1 million sites, and the entire web. In terms of market share, Backbone.js is clearly lagging behind React JS in all segments.
What's great is that it is supported by a large community of developers from all over the world. React has a very active community, support, and many ready-to-use plugins/libraries.
As of August 2021, it has 173 thousand Github stars.
Backbone.js's 28k-star ecosystem on GitHub used to be huge. You can always find great solutions on the forums as well. But at the moment Backbone.js is considered a legacy framework with many new options available.
The demand for Backbone JS developers is very high in the USA, Canada, UK, Russia, Germany, and other Western European countries. There are thousands of websites in these North American and European countries. At the time of this writing, there are over 600 new Backbone.js -related jobs on the Indeed.com job portal and over 800 Backbone JS developer jobs. All these statistics and numbers show that the demand for Backbone JS developers is very high.
However, just like with the popularity section, React has much bigger numbers. As per the Stack Overflow Developer Survey 2021, the FB supported framework has gained significant points over the last year:
Backbone wasn’t even mentioned in this report.
React is completely beginner-friendly - guides help to cope with any difficulties arising in the learning process. This way, you can learn the basics of React in a few hours and explore its advanced aspects through detailed documentation. However, it is not as easy to learn as the same Vue (see the comparison here - Vue vs. React).
What about Backbone, since version 0.1.0 was released 5 years ago, all this time its development and updating did not stop. However, this can be easily learned for many reasons:
However, if you are going to work with Backbone, you will almost inevitably need to learn Marionette, Chaplin, or Thorax.
Turning back to the Stack Overflow Developer Survey 2021 - Top paying technologies section, we can see that on average React.js devs make $58,128 per year. Again, there is no data about Backbone.
At the same time, hiring Backbone.js developers has become competitive. Backbone.js developers are in high demand and costly due to their skill set. Below are the average annual salaries for Backbone.js developers from different countries:
Lightweight. Project weight really matters when we talk about loading speed and responsive mobile web apps. In this case, less is more. So, Backbone is a promising framework in all areas of web development.
Extensible. Extensibility is at the heart of the entire Backbone framework. Thus, it includes many small libraries suitable for special needs. Moreover, it is always possible to create your own MVC framework.
Abstract application code. Abstraction is one of three things that are really important in programming. The better it is, the better the code will be. It hides everything except the relevant data about the object. This is necessary to simplify navigation in complex projects and increase efficiency. In simple terms, Backbone allows the developer to keep the application logic separate from the user interface. As a result, both of them can be easily changed, updated, and maintained as needed. This separation makes it clearer where changes are needed and which unit test to write.
Versatility. Unlike other frameworks, Backbone.js gives you the ability to choose the tools that work best for your project. It doesn't have its own templating engine (other than the base one included in Underscore.js). This choice allows developers to use the tools they are already familiar with and speed up the development process.
Synchronization with the server side. Models in Backbone.js can be easily tied to the back end. The framework provides excellent support for RESTful APIs, so models can be mapped to RESTful endpoints. Since nowadays we have not only desktop browsers, but also mobile devices, it is very convenient to provide all data via API. You can create true desktop and mobile browser apps that go far beyond the capabilities of simple websites.
Site speed. As with any MVC framework, Backbone.js reduces the load on the server so that the website depends on it only for receiving JSON data, not for display logic. This results in significant performance efficiencies even as the page grows.
Backward compatibility. The fact is that some frameworks require rewriting of the code after updating the framework to the latest version. Well, not the case with React.js. The public API has always remained pretty much the same, making it easier for Facebook and other companies to update the code using the old parts.
Parallel Mode. This Mode is a collection of features designed to make React apps even faster and more user-friendly. This forces them to adapt to the capabilities of the user's device and the speed of the network.
Custom React Renderers. Extending React.js with the release of React Native forced developers to start implementing a different render. And that was the origin of the Custom React Renderers concept. This allows you to create your own implementations.
Development time. React is all about speed and that means not only page load speed, but development speed as well. Many things speed up the development process:
It's easy to take it over. The component-based approach makes React apps readable, understandable, and easier to maintain. If the code is clean, an external developer can easily understand it and take over from there.
Scalable. With the help of modularity, React applications scale easily. You can start small and grow from there. For example, you can start by creating a simple MVP and then make it a single-page application as comprehensive as Facebook.
Reusable components, also known as modularity. The component approach helps a lot here because React applications are made up of discrete components that can be broken down into subcomponents. Each component and subcomponent is responsible for one small part of the entire application and can be reused anytime, anywhere. This allows you to create a complex application from simple blocks.
Ease of testing and debugging. ReactJS uses its own tools to test and debug components before actually using them.
So when should you use Backbone.js?
Backbone uses a single view to manage multiple nested views that use the required models. This helps to save time, improve code readability, and simplify any future re-coding. As a result, it plays into the hands when developers try to create complex projects with a large interactive and rich user interface.
Traditionally, Backbone has not pushed developers to separate the data and view layers into separate objects. In the meantime, most developers strongly recommend doing this in all cases, except for models that are not created with links to their views. So, all models and collections, all data layers should ultimately be clearly divided into the views to which they belong. Strict separation of concepts will help avoid turning all developer work into spaghetti code. Therefore, it will help you navigate your code and save time if you need to write or fix bugs in the future.
Summary. To sum up, the developed application will only load one payload, which includes all the necessary scripts, styles, and labels. Everything the user needs to perform simple actions will be in one place. As a result, there is no requirement for any additional background activity. For example, Gmail can easily switch between reading income emails and replying to them because there are no additional requests to the server.
The decision to include React in your technology stack can become easier if you know what you can potentially build with it and if that's what you're interested in. So, without further ado, let's move on to the list of possible projects:
This is the most common use case for React JS. As a reminder, a Single Page Application is an application that does not require a page reload on the user side. In other words, the visitor will continue to interact with the same page without having to load new pages. Gmail and Facebook are great examples of single-page apps.
If you want to create a cross-platform native app, you can do it with React and with React Native. It is cross-platform because you only need to build one app instead of two native apps, and it is similar to the native one because apps built with React Native work like native apps.
If you rely on data in some way, it is very important to display it in a clear and visually appealing way for the end-user. While you can find many ready-made dashboard templates, maintaining them, in the long run, is difficult and the price you have to pay is quite high. Therefore, it is better to build from scratch. And in fact, React has some features to help you with this task: reusable components and virtual DOM.
Unlike standard business websites, e-commerce and retail sites contain many more complex elements such as APIs, filters, internal search engine, and so on. Thanks to React, developers can implement all of these things by creating separate and easily scalable components.
The component architecture is the reason why businesses like Walmart or AirBnB have chosen to incorporate React into their tech stacks. This approach allows you to divide the development process of an enterprise application into smaller parts, using separate components of the user interface.
Since Facebook created and released React, it's a little surprising that its development team doesn't use it to build Messenger. However, it is possible to build an instant messaging application using React since it acts as a WebSocket client. It is responsible for two-way communication between the server and the client.
This point is closely related to the previous one because it is recommended to create social networks as single-page applications (SPA). Since the SPA user does not need to reload the page, i.e. check for new messages, this greatly improves the user experience.
React was created by a software engineer at Facebook. Since then, Facebook has maintained the framework, although it remains open source. As such, it would be unusual if Facebook weren't doing it while others do. There is a lot of interactivity on the Facebook site.
Usually, if you like the post or add a comment, you will need to reload the entire page to reflect this change. However, developers can work around this by enabling partial reloads. That is, if the message is liked, the Like icon changes color to reflect the change, while the rest of the page remains the same.
Another good example of a React website is Netflix. Many newbies have trained at some point in their development by creating clones of Netflix. This is how much the video streaming website has come to be associated with the library. Netflix uses it to render the back end of their web pages by preloading React, especially for the registration process. This has improved productivity.
Salesforce is another example of React sites that were early adopters. According to the Salesforce blog, this experience is more like a library than a framework, which drew them to the platform. In particular, because it is presentational and declarative, it can be conveniently integrated into existing projects.
Salesforce's use of this library helped them create the Lightning Design System, an open source CSS framework. There is now the Lightning Design System for React, which implements the LDS component variants for React.
Backbone is a relatively simple framework that implements a lot of things for fast SPA development. But to use Backbone to its fullest, you will have to select additional tools: Marionette, Thorax, or Chaplin; Handlebars or Mustache; etc. However, in most cases, the Backbone, Marionette, and Mustache packages will do the job. You also need to understand high-level MVC architecture in order to get the most out of Backbone.
Yet not sure what technology to choose? Consult your product with us. Ideamotive can provide you with technical consultancy and experts skilled in both technologies, matched with your product and your industry.
The selection of the right technology can determine the success of the project. Do you want to make the right decision? Let us know, we will help you!
Robert is a co-founder and CEO of Ideamotive. Entrepreneur, who with passion spreads digital revolution all around the internet. Mentor and advisor at startup accelerators. Loves to learn and discover new business models.View all author posts
Everything You Need To Know About JS Business Implementation In 2021Read now
Robert Krajewski 11 min read
Dawid Karczewski 12 min read
Adam Bałazy 7 min read
Miłosz Kaczorowski 7 min read
Dawid Karczewski 6 min read