35
Is React a framework or library? - Everything you need to know
Is React a framework or library? - This is the question that started many disputes among developer communities, and in this article, we will answer it, providing the best pro and con arguments.
As a software development company specialized in web development and mobile app development, we did not manage to avoid this question internally. Our web developers discussed this topic so intensively that they were on the edge of letting their keyboards out of their hands. That's why we thought of creating a complete guide for you, in which we point out the key differences between these two and what React really is.
So let's roll on.
- What is the difference between a framework and a library?
- What Is React?
- What is React Native?
- Is React a framework or library?
- Is React the best library?
- Advantages of using React library
- Disadvantages of using React library
- Conclusion
Before we answer the question "Is React a framework or library?" it's important to know the differences between the two. Let's start by looking at what a javascript framework is and what a javascript library is and then compare them.
Ayush Gupta, an Applied Research Engineer at Apple defined javascript frameworks as:
... JavaScript code libraries that have pre-written code to use for routine programming features and tasks. It is literally a framework to build websites or web applications around.
Woah! That's quite a definition. But what exactly are those routine programming features and tasks? Well, those are functionalities you would otherwise need a third party library to achieve. Think of dependency injection, authentication, or routing inside a web application.
Then what is a javascript library? By definition, a javascript library is a collection of functions that accomplish something. For example, think of writing some functions that capitalize the first letter of a sentence and count the number of words in a paragraph. Congratulations, you just created a small library for text editing.
To better understand the difference between a javascript framework and a javascript library, let's create an analogy. Think of the following example (we really liked when we came up with this one): a javascript framework is like a MacBook. It's tightly coupled. All components in the MacBook work together and are highly dependent on each other. If something were to break in the MacBook or for some reason the MacBook would not be able to fit your needs and requirements. There's a good chance that you would have to throw it entirely into the garbage - not many chances to fix or upgrade it. But on the other hand, you know when using it that it's going to accomplish the tasks it says it does. No surprises, no components that don't work with each other, no power source that can't handle stuff.
On the other hand, using javascript libraries to build a web app is like building your own computer. You have to pick each component by hand - the processor, the motherboard, the video card, the hard disk, the power source. Then you need to make sure they work together (this is called tightly coupled). The good part, though, is that if the system breaks, you only need to change the broken component. Some components might not work if you're not careful about their compatibility, but still, you can build your computer exactly as you wish and extend some of the functionalities - if that's what you need!
There's no right answer when choosing between a javascript framework such as Angular, Ruby on Rails, Laravel, and a javascript library such as React. In the end, it's all about what you need and how your web application is going to evolve in the future.
React is a javascript library for building user interfaces or UI components. It was created by Jordan Walke while he was working at Facebook, and it can be used in the development of single-page applications or mobile applications.
As a js library, its main focus is to work with state management and render the state to a virtual DOM, which gets copied to the actual DOM.
While using React alone, you can build a simple web application. In order to use the full power of React, you'd need to use additional libraries such as React Navigation or React Router that work in an opinionated way.
Looking on the official react website, we get the following definition:
React is a JavaScript library for building user interfaces.
That should answer the question and not cause any other debates, right? Well, not exactly; the debate over "Is React a framework or library?" is as strong as ever.
Over the years, developers, software engineers and developer communities came with pros and cons related to the status of React as a library or React as a framework. Let's analyze them together.
React as a library:
Follows the UNIX philosophy “Make each program do one thing well”. And that’s exactly what to expect from a library like React: it does one thing and it does it well.
React can be easily plugged into an existing technology stack — and that’s the definition of a library.
React can be easily swapped by some other javascript library offering similar functionalities.
React as a framework:
React and the few libraries that are around its ecosystem such as React Navigation offer all the tools required to build a client-side application most of the time.
Because of its state and lifecycle on the components, you inverted the control to React.
Related libraries must work in an opinionated way.
So, is React a framework or library? After countless research and debates between my colleagues and me, we decided that React is a js library that works similarly to a js framework.
React Native is a framework for building native apps using React. It can be used to develop applications that target anything from Android, iOS devices to Windows systems.
React Native is working in a similar way to React, however, it does not work by copying the virtual DOM to the actual DOM. It works by using a javascript thread that interprets the javascript code and communicates with the native components. It even allows you to write native code in Java for Android and Objective-C or Swift for iOS in case you need to extend some of the functionalities.
In React Native you can build your own mobile applications fast - like, lightning-fast.
We want to show you what you could create, so we made a small guide for a game we developed - rock, paper, scissors!
Rock, Paper, Scissors Game in just 100 lines of code!
We start by splitting our screen into three parts - at 20%, 40% 40% heights:
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flex: 1, flexDirection: 'column', backgroundColor: '#6591C7'}}>
</View>
<View style={{flex: 2, flexDirection: 'row', backgroundColor: '#CBE1FB'}}>
</View>
<View style={{flex: 2, flexDirection: 'row', backgroundcolor: '#7FB7FA'}}>
</View>
</View>Then we declare some states to hold a countdown, a winner and the number of games played:
const [countdown, setCountdown] = useState(3);
const [winnder, setWinner] = useState("");
const [games, setGames] = useState(0);And modify our first part to display them:
<View style={{flex: 1, flexDirection: 'column', backgroundColor: '#6591C7' justufyContent: 'center', alignItems: 'center'}}>
<View style={{flex: 1, justifycontent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 24, color: 'white'}}>
Countdown: {countdown}
</Text>
{winner != "" && countdown == 0 &&
<Text style={{fontSize: 20, color: 'white'}}>
Winner {winner}🎉
</Text>}
</View>
</View>But, hmm, it’s not really a game if the player does not interact with anything, is it? In the second part of the screen, we want to let the player choose one of the three options: rock, paper, or scissors. So let’s do that.
We simply create three buttons. When one is pressed, we update a state with the value from the corresponding button. Simple right?
So first, let’s create a state that holds our players choice:
const [playerChose, setPlayerChose] = useState("");Now, let’s go ahead and create our buttons. We’ll use some emojis to make them more flashy.
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity disabled={countdown !=0 && countdpwn != 3} onPress ={() => {setPlayerChose("rock"); setGames(games + 1)}}>
<View style={playerChose == "rock" && {borderWidth: 3, borderColor: '#6591C7', borderRadius: 10}}>
<Text style={{fontSize: 24, color: '#6591C7'}}>
✊Rock
</Text>
</View>
</TouchableOpacity>
</View>That looks like something.
So we can only press the button when the game has not started (timer = 3) or the timer reached 0, and we want to restart the game. We increment the number of games played by 1 with setGames(games +1), and we add our player option with setPlayerChose(“rock”); We could create a component for this but for the sake of this example, let’s just copy it for our paper and scissors buttons.
We’re getting somewhere. But when the player selects an option, the countdown should count to 0; then the device should choose an option and see who wins.
So first, let’s make the countdown be 3 when the player starts a new game (remember, games go up by 1 each time the player picks an option):
useEffect( () => {
setCountdown(3);
}, [games])useEffect( () => {
setCountdown(3);
}, [games])Easy-peasy! Now let’s make the counter go down to 0 when the player picks an option:
useEffect( () => {
if (countdown > 0 && playerChose != "") {
setTimeout( () => setCountdown( countdown - 1), 1000);
}
}, [playerChose, countdown]);Now, what’s left for the device to pick up an option and see who wins! And it has to do it when the counter reaches 0.
So first, let’s have it pick its option:
useEffect( () => {
if ( countdown == 0) {
//pick a random option
var options = [ "rock", "paper", "scissors"],
optionsToUse = options[Math.floor(Math.random() * options.lenght)];
setDeviceChose(optionstoUse);
}
}, [countdown]);And display that option to the user:
<View style={{flex: 2, flexDirection: 'row', backgroundColor: '#7FB7FA', justifyContent: 'center', alignItems: 'center'}}>
{deviceChose == "rock" &&
<Text style={{fontSize: 24, color: 'white'}}>
✊Rock
</Text>}
{deviceChose == "paper" &&
<Text style={{fontSize: 24, color: 'white'}}>
✋Paper
</Text>}
{deviceChose == "scissors" &&
<Text style={{fontSize: 24, color: 'white'}}>
🤞Scissors
</Text>}
</View>Only one thing remains, and that’s to announce the winner!
useEffect( () => {
if (playerChose == deviceChose) {
setWinner("It's a tie!");
return;
}
if (playerChose === "rock") {
if (deviceChose === "scissors") setWinner ("Player!"); else setWinner ("Device!");
}
if (playerChose === "paper") {
if (deviceChose === "rock") setWinner("Player!"); else setWinner("Device!");
}
if (playerChose === "scissors") {
if (deviceChose === "paper") setWinner("Player!"); else setWinner("Device!");
}
}, [deviceChose]);And now if we play…
Oh! We’ve been defeated! That’s not good. Give them a few years, and who knows what will happen. But maybe you can win.
You can test the game online or on your own phone by scanning the QR code under “My device” on the right side of the screen.
You can test the app on snack.expo.io or see the full source code here.
Library. And yes, it is. This might be a bit biased since me and my colleagues like React — a lot — but let’s try to see it from a more objective perspective.
There are many libraries and frameworks on the market. When talking about React being the best javascript library or javascript framework on the market, it mostly means that there are some competitors to it — and the other most known javascript frameworks are Angular and Vue.
When choosing the right libraries and frameworks to build your mobile app or web app, it’s important to look over a couple of aspects, and one of them is their popularity. It’s important that a framework is popular so that it has a well-established dev community around it. If you were to search on google or StackOverflow a question regarding some specific functionality or bug inside the framework, you’d most likely want to see other people who might have encountered the issue and found a solution. If we think of Angular vs React, the second one is definitely more popular.
A good measure for comparing javascript frameworks and libraries like Vue, React Native, Angular, and React is the number of Stars they got on Github over time. Putting them side by side, we get the following graph:
We see React sharing almost 250.000 stars between itself and React Native. That’s a good sign the framework is healthy, and the dev community is very much alive! Web developers have a hard time adopting new javascript frameworks and libraries if they are not popular.
Another measure is the number of jobs each framework offers, and here, React is king. Looking over a comparison on Google Trends between React jobs, Angular jobs, Vue jobs, and React Native jobs in the last twelve months, we see that React is holding the first place:
One last comparison is important when picking a javascript framework to work with, and that is the learning curve: all three javascript frameworks (Vue, Angular, and React) have a steep learning curve. Angular adds a bit more to this as it requires you to learn TypeScript, while React and Vue add more flexibility at the possible cost of writing poor code.
One of the most significant advantages we see when using React is its functional components. With the introduction of React Hooks in 2018, it’s possible to write entire web applications, or mobile applications, with just functions posing as React components.
Simply put, React functional components are just javascript functions that have the same functionality as React components and return JSX.
And that leads us two the second great advantage of React: JSX. JSX lets us write a mix of HTML and javascript — and it makes the code much easier to read and write.
Those are the main two reasons we put in front when someone is asking: “Why React?”. There are many others: the virtual DOM, a great dev community, amazing developer tools, and a huge ecosystem.
JSX — wait, wasn’t that an advantage? Well, it’s a bit tricky. JSX has been seen as one of the greatest advantages of using React but also a disadvantage as it may violate the separation of concerns.
Another disadvantage is the fast pace at which the js library is evolving. The front-end development teams might be reticent in adopting all those new changes while keeping their skills updated with the new ways of doing things. Fast updates might also lead to poorly written documentation — another reason why application developers might find it hard to keep their React skills up-to-date.
We can split React apps into two main categories: web apps and mobile apps.
From the web apps out there, the most notable one — and the creator of React — is Facebook. Instagram is another great example of a web application written entirely in React. And when talking about react app giants, Netflix does not fall back. They even posted a blog post named “Netflix Likes React” in which they share their reasons for adopting React: Startup Speed, Runtime Performance, and Modularity. Other notable web apps include DropBox, WhatsApp Web, and Yahoo! Mail.
For mobile applications, there are even more big names that use React. And they don’t even have to build entire applications using React Native, just the functionalities they need. If we take a look at the official React Native website, we see names such as Oculus, Shopify, Discord, Skype, and even Tesla.
As a software development company that developed multiple web apps and mobile apps over the past years, we’ve used React a lot. Here are a couple of applications we’ve built with it: FeetUP — a fitness app for inverted yoga, SEDUCO — a course management system or Nylah — an Affiliate marketing platform.
Is React one of the best javascript libraries on the market right now? Yes.
Is React worth learning? Hell yes.
If you’re looking to start a career in software development by developing some basic web apps or mobile apps, React is simply just an amazing tool to get you started.
It has a fantastic dev community around it, tons of libraries for extending its functionality, support for all modern web browsers, and did we mention it’s the most popular among all javascript frameworks and libraries? Yeah, that too! As a react developer, I’m very happy about it.
A simple search on Linkedin or other job-posting platforms will show you a huge number of job opportunities for React. And it doesn’t look like it’s going to die anytime soon.
If you’re curious to see how much a react app will cost, make sure, you’re using our App Cost Calculator to get an estimate.
Originally published at: https://digitalya.co/blog/is-react-a-framework-or-library/
35