Is React a Framework? Software Engineer Answering

By definition – React is one of the most popular JavaScript UI libraries nowadays. It comes in second place after jQuery among all web frameworks! React’s popularity has grown rapidly thanks to a simple and declarative API that allows you to build high-performance applications, and that momentum keeps growing. Still, there is often discussion and questioning that React is a framework or library.

Firstly, let’s look what the differents between framework and library? 

The framework belongs to the main() function. It executes some functions, e.g. controlling a collection of windows on the screen. The framework can, in principle, work even if you have not set it up in any way. It does something, e.g. it places an empty window with default widgets. The framework defines the general nature of the program, and your code provides a specific setting. These settings can be very significant, as both a word processor and a spreadsheet can be created using the same framework.

The library is the set of tools used by your code. Your code belongs to the main() and provides the overall structure of the program. A library performs some specific task, such as sending traffic over a network, drawing charts, or something else. The library can do big things, like draw a view of a three-dimensional space full of objects, but only after you tell it about those objects.

The framework can call your code, which in turn calls the library. But your code never calls the framework, except perhaps for system() or exec() functions.

But, is React a Framework? 

We asked our Software Engineers Team for their opinion and they were split into two parts: some maintain the view that React is a library, and others assign it as a Framework. Here are the most outstanding opinions:

From my point of view, React is not a framework, it’s just a library with no specific requirements for project structure. It’s about describing the abstractions of your application, logic, routing, data exchange, and so on. And React simplifies the work with this data, and optimizes the work with it

Anton M. – Software Engineer at Flatlogic.com

From my point of view, React is not a framework, it’s just a library with no specific requirements for project structure. It’s about describing the abstractions of your application, logic, routing, data exchange, and so on. And React simplifies the work with this data, and optimizes the work with it

I know that react calls itself a “library”, and a lot of developers prefer to react to the home page with the title “library”. However, I think that React is more like a framework now, with different targets like web, react native, etc. And the foundation of React is JSX, which is crucial for proper developer experience, and requires a build step, so you can’t just slap a bunch of JSX files into a browser and call it a day. Nowadays when you say “I built this app with React” you don’t mean that you used it on one page or as a modern jquery alternative. You mean that you built everything around react, with its ecosystem, its best practices, etc. And with all those points in mind, I’d rather call react the framework, than a library

Viktor S. – Staff Engineer at Flatlogic.com

We also conducted the research among others software engineers and would like to share with you the most impressive arguments on this point. 

So, is React a Framework or a Library?

React is a Library

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Now Why Library, not a Framework?

different definitions for library and framework:

a framework is a software where you plug your code into
a library is a software that you plug into your code

In terms of this definition, React is a framework. But some people, especially in the frontend world, say a framework has to bring stuff like routers and/or widgets, etc. 

So Angular, and ExtJS are frameworks, but React isn’t, because it only gives you the means to build components and render them into the DOM.

Let’s make it simple, in React we have to include packages for everything it’s not necessary but yes we can add them, thus React is a Library but if we are not given an option to do so with our code then that’s a framework like Angular and Vue.

React is a library because it’s only supposed to deal with the view part of the eco-system, and you can integrate it easily in any project you’re working on currently, it’s something like jQuery, it only helps you with organizing your views into reusable components, of course, the performance is one of the best things about React, especially with the new Fiber algorithm, things will be faster seeing the scheduler mechanism, unlike Angular, it’s a framework that gives you everything you need, most of the things are already built-in, for React you need to create your own/or grab some modules from npm to add extra functionality as need per your project.

It depends on how you use it. If you’re writing a small program and you structure your program around working with React, you are probably thinking of React as a framework.

If you have a big program and you use React as a small part of it just for handling output, then you’re probably thinking of React as a library.

If your program is 90% user interface, and not only your program structure but your data structures are shaped to fit the React system, then you may even think of React as a language. Hey, if TypeScript can be a language, why not React?

React is a library, cause it has mostly evolved into a vast ecosystem that is barely distinguishable from a framework. A framework protects the edges, whereas a library provides a tool for doing certain tasks. React handles exactly one task: abstracted Web Components. It offers an internal state, lifecycles, and external properties, as well as a renderer for a browser or comparable environment through ReactDOM – and nothing more.

This has a few advantages: it is smaller than a full-featured framework, has fewer opinions on how to address problems, and so provides more options.

I’d say React is a library posing as a framework. It feels like working in a framework (esp. with JSX, though using that is optional), but under the hood, it is just a library. This definition is quite good:

a framework is software that you plug your code into (e.g. you work “inside” it).
a library is software that you plug into your code (e.g. you “hand-off” certain tasks to it, or build “on top” of it).

React feels like the first, but is the second. The attached video compares React and Angular and hints at the distinction. Since React treats your code as a black box, you can push the data-binding concerns out to the edges of your system, to be “handed off” to React (i.e. how you would use a library). Angular, on the other hand, forces you to work “inside” their “scopes” using their “directives” to handle data-binding. In Angular, you are passing your data through scopes that observe your data model. You are always at the mercy of whichever directives they are building into their framework scaffolding. You are also working “inside” HTML (JS-in-HTML), with all the constraints that impose (giving more of a framework feeling). But with React, you have less of that feeling, since you have freedom (full power of JS), and can build “on top” of React (HTML/JSX-in-JS). This is good since JS is inherently more powerful than HTML.

React is a Framework

React is a framework. Honestly caring about the difference between a library and a framework is a bit pedantic, so I’d say you can call it either. Having said that, my definitions of the two words are that a library is a collection of functions, and a framework is a way of doing things.

By this definition, React is a framework because it forces you to build UI in the React way instead of the Angular, etc. On the other hand, the dash is a perfect example of a library because it’s just a collection of functions, use them however you want.

JavaScript is known for its abundance of new plugins, frameworks, and other things created by its massive community of developers and designers.

You must be wondering what this fact has to do with the React JS framework and other frameworks. The truth is that many of the leading IT firms have already embraced JavaScript and leveraged its benefits.

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 up 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

React can be easily swapped by some other javascript library offering similar functionalities.
React can be easily plugged into an existing technology stack – and that’s the definition of a library.

React as a framework

Related libraries must work in an opinionated way.
Because of its state and lifecycle on the components, you inverted the control to React.

Are you asking why React was designed as a library and not a framework [1] or why it is classified as a library and not a framework [2]?

[1] Why it was built that way. A library is something you can add to an existing project to enhance it. It does not impose any restrictions or conventions on your application design and you can supplement it with other libraries of your choice to flesh out your application. There is also a shorter learning curve (usually) on a library as you can add it incrementally to your project. A framework on the other hand implies structure and convention, you need to follow the conventions of the framework. In many cases a framework limits you to working within these conventions – you cannot (or it is difficult) to mix a framework with other code.

There are use cases for each.

[2] Why it is not classified as a framework. Based on the definition of a framework it does not fit the bill – it is a library that is added to your code – it does not impose structure – beyond the use of the library itself and it can be mixed in with other code.

React does not solve any structural or architectural problems on the app level. It provides us with a set of methods for better (in my opinion) handling of the front-end. I remember when jQuery did that back in the day, and how that started the revolution… React is now doing the same, just better.

Because React is a library eventually we got Flux and Redux. Both of them are handling real-world problems that come alongside Scaling. Mare library does not think about that.

React is a framework because Redux is referencing it as one (Source). Ah, as I started to hope that something in life is going to be easy. With React and Redux there is a clear layer of separation between the view and data. That is why React is not a complete framework to solve the entire problem.

Conclusion

Soft engineers spend a lot of time talking about what React is. The answer is important for any React soft engineer, no matter their skill level. That is because it indicates what they should know and how they should work when developing any React application. Depending on who you are, a beginner or an advanced React soft engineer, I hope this thoughtful research will improve your development process as you build your next React project.

The post Is React a Framework? Software Engineer Answering appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

What is Angular

Introduction

Angular is a client-side open-source JavaScript-based front-end framework, which is used to build custom applications in HTML, CSS and Typescript. AngularJS was launched in 2009 by Misko Hevery and Adam Abrons as a project at Google.  It is a front-end JavaScript framework, which was developed to build web-based dynamic applications easier, due to its MVC (Model-View-Controller) feature. AngularJS is currently supported as a framework, although no longer being developed or updated.

Don’t confuse it with Angular (without JS) which is the term for Angular 2 and above (i.e. versions 2, 4, 5, 6, 7, 8, and now the latest version is 13) which was released in 2016. Angular 2, as it used to be known, demonstrated considerable differences from AngularJS, the main difference of which was its change in the template language.

One of the key features of Angular is that it uses TypeScript as a programming language. Alternatively, it is possible to create Angular applications using languages such as Dart or JavaScript. However, TypeScript is still the primary language. 

Angular has four main types of web app development:

PWAs (Progressive Web Apps)
UI animations
Web and mobile applications
Business web applications

Why use Angular

Angular is a quite popular framework for building web and mobile apps and can be the perfect framework for building large-scale, powerful and easy-to-serve web apps. So here is the list of reasons why you should use Angular:

Safety. Angular is a fairly trustworthy platform because it is supported by Google

Reduced development time. Angular relies on the current JavaScript virtual machine by transforming templates into code. Angular’s load time is also fast. 

Unit test friendly. Angular features two-way data binding of modules and components, which makes the code consistent and easy to understand for unit testing. Every unit of code is independently tested across the entire app building process, providing in-depth quality control.

Cross-platform. Angular-based PWAs can run on a variety of platforms, and the framework is widely used in native mobile apps. Previously, frontend developers used a cross-platform combo of Ionic with Angular. Nowadays, its most popular combo is with NativeScript.

Complex learning curve. Angular uses a much harder learning curve than other frameworks. To get started, you need to explore all aspects of the framework, such as RxJS (a reactive library for asynchronous development) and Typescript (used to increase maintainability and code support capabilities), not just basic JavaScript. 

Community. Angular has a great community and ecosystem which is actively supported. There is plenty of content on the framework like guides and videos, and lots of useful third-party tools as well.

With all the advantages of Angular, it is not a universal solution for absolutely every task, and that’s okay. Every technology is well suited to solve specific issues, and for some other tasks, other approaches will be more reasonable. It’s easy to use Angular to create a project, but it’s harder to understand if this solution is really good or if it’s worth using.

Who uses Angular

Let’s take a look at the list of cutting-edge companies that use Angular in their modern web application development pipeline:

Google
Gmail
PayPal
Forbes
Samsung
Microsoft Xbox
Deutsche Bank
The Guardian
Weather.com
Lego

How to create your Angular application using the Flatlogic Platform

There are two ways to build your application on the Flatlogic Platform: one-page application only with the frontend or the CRUD application with frontend, backend, database.  

Creating the CRUD application with Flatlogic

1 Step. Choosing the Tech Stack

Firstly, you should set the name of your application and choose the stack: Frontend, Backend, and Database.

2 Step. Choosing the Starter Template

Next, you’re choosing the design of your web application.

3 Step. Schema Editor

In this step you will need to know which application you want to build, that is, CRM or E-commerce, also in this part you build a database schema i.e. tables and relationships between them.

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

Finally, you can make deployment of your application and in a few minutes, you will get a fully functional CMS for your Angular Application.

Creating a one-page application with Flatlogic 

You can create a frontend-only app with the Flatlogic Platform. This assumes you host the backend somewhere else or do not need it at all. To generate a one-page application you don’t need to enter anything in the terminal of your IDE, you just need to go to the page of creating an application on the Flatlogic website and make only 2 steps:

1 Step. Choosing the Tech Stack

In this step, you set the name of your application and choose the stack: Frontend as Angular, Backend as No-Backend.

2 Step. Choosing the Starter Template

In this step, you choose the design of the web app. Since this is a standard one-page application created using the CLI framework, it will have the design of a standard one-page Angular CLI application.

The final step is to deploy your app and in a few minutes, you will get a one-page Angular application, which you can further modify as you like.

Suggested articles:

What is React
What is PHP
What is Laravel

The post What is Angular appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

What is React?

Introduction

Why use React?
Virtual Document Object Model (VDOM)
JSX
React Native

Main Components
Function Components
Class Components

Benefits
Who uses React

How to build your first application on ReactHow to create your app on Reactjs from the terminal of your IDE

How to create your app with Flatlogic Platform
Creating a CRUD application with Flatlogic
Creating a one-page application with Flatlogic

Introduction: What is React

React.js was released by a software engineer working for Facebook – Jordane Walke in 2011. React is a JavaScript library focused on creating declarative user interfaces (UIs) using a component-based concept. It’s used for handling the view layer and can be used for web and mobile apps. React’s main goal is to be extensive, fast,  declarative, flexible, and simple. 

React is not a framework, it is specifically a library.  The explanation for this is that React only deals with rendering the UIs and reserves many things at the discretion of individual projects. The standard set of tools for creating an application using ReactJS is frequently called the stack.

Why use React?

Let’s take a more detailed look at what sets React library aside against other frameworks and libraries and makes it so powerful and popular for application development.

Virtual Document Object Model (VDOM)

The Document Object Model (DOM) is an API for valid HTML and well-formed XML documents.

A virtual DOM is a representation of a real DOM that is built/manipulated by browsers. Advanced libraries, such as React, generate a tree of elements in memory equivalent to the real DOM, which forms the virtual DOM in a declarative way. The virtual DOM is one of the features that make the framework so fast and reliable.

Image source: https://miro.medium.com/max/1400/1*HyoU7X-SMyT8xQD1PjrRGw.png

JSX 

React uses a syntax extension to JavaScript called JSX. We use it to create ‘elements’.

JSX uses Babel preprocessors to convert HTML-like text in JavaScript files into JavaScript objects to be parsed.

React doesn’t require the use of JSX, but most developers find that it makes for a more user-friendly experience within the JavaScript code.

We use JSX to create React components, so this is why it is an important part of ReactJS.

React Native

React Native is an open-source JavaScript framework for building apps on different platforms, such as iOS, Android, and UPD. It is React-based and gives all its greatness to mobile app development.

React Native uses JavaScript to build the UI of an application but also uses OS-native representations. It allows code to be implemented in OS-native languages (Swift and Objective-C for iOS and Java and Kotlin for Android) for more sophisticated functions.

Main components 

ReactJS is a component-based library where components make our code reusable and split our UI into different pieces. Components are divided into two types, Class components and Function components. All React components follow the separation of concerns design principle, meaning that we should separate our application into different sections to address separate concerns.

Function components.

React components work similarly to JavaScript functions. A component takes random inputs, which we call props, and must always return a React element that defines what is intended to be displayed to the user.

The simple method to specify a React component is to define a JavaScript function and return a React element. The React component must always return a React element, or it will throw an error.

We’ve defined a ReactJS component called HelloWorld that takes one prop, which stands for properties and returns a ReactJS element, in this case, a simple h1 element. 

Class components.

The Class component must have the extends `React.Component` statement. This statement sets up a `React.Component` subclass that allows your component to access `React.Component` functions.

The component must also have a `render()` method, which returns HTML.

Benefits 

So the main question is why you should choose ReactJS as a frontend development stack while there are a lot of others. Here are some reasons:

Speedless. React allows developers to use individual parts of their application on both the client and server sides, and any changes they make will not affect the application’s logic. This makes the development process extremely fast.

Components support. The use of HTML tags and JS codes makes it easy to work with a huge dataset containing the DOM. React acts as an intermediary that represents the DOM and helps you decide which component requires changes to get accurate results.

Easy to use and learn. ReactJS is incredibly user-friendly and makes any UI interactive. It also allows you to quickly and efficiently build applications, which is time-saving for clients and developers alike.

SEO Friendly. A common problem complained by most web developers is that traditional JavaScript frameworks often have problems with SEO.  ReactJS solves this problem by helping developers navigate different search engines easily through the fact that the ReactJS application can run on the server, and the virtual DOM renders and returns it to the browser as a  web page.

One-way Data Binding. One-way data-binding implies that absolutely anyone can trace all the changes that have been made to a segment of the data.  This is also one of the reasons that make React so easy.

Who uses React?

Here is the list of popular ReactJS websites:

Facebook
Atlassian
Uber Eats
Netflix
Airbnb
Trello
Grammarly
Outlook.com
Codecademy
Dropbox

How to build your first application on React

Creating your app on React.js from the terminal of your IDE

First, you should install the framework package using `npx create-react-app`

`npx create-react-app my-app`, where is the `my-app` name of your application.

The next step is navigating into your new application.

`cd my-app`

And the last step is to start your application.

`npm start` 

In the end, you will have only a frontend application without any database and backend, which takes a lot of work to get a full-fledged application.

How to create your app with Flatlogic Platform

There are two ways to build your application on the Flatlogic Platform: you can create a simple and clear frontend application, generated by the framework CLI, or the CRUD application with frontend+backend+database.

Creating a CRUD application with Flatlogic

1 Step. Choosing the Tech Stack

In this step, you’re setting the name of your application and choosing the stack: Frontend, Backend, and Database.

2 Step. Choosing the Starter Template

In this step, you’re choosing the design of the web app.

3 Step. Schema Editor

In this part you will need to know which application you want to build, that is, CRM or E-commerce, also in this part you build a database schema i.e. tables and relationships between them.

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

At the final, you can male a deploy of your application and in a few minutes, you will get a fully functional CMS for your Application.

Creating a one-page application with Flatlogic 

You can create a frontend-only app with the Flatlogic Platform. This assumes you host the back-end somewhere else or do not need it at all. To generate a one-page application you don’t need to enter anything in the terminal of your IDE, you just need to go to the page of creating an application on the Flatlogic website and make only 2 steps:

1 Step. Choosing the Tech Stack

In this step, you set the name of your application and choose the stack: React as Frontend, No-Backend as Backend.

2 Step. Choosing the Starter Template

In this step, you choose the design of the web app. Since this is a standard one-page application created using the CLI framework, it will have the design of a standard one-page ReactJS CLI application.

At the final, you can deploy your app and in a few minutes, you will get a one-page React application, which you can further modify as you like.

The post What is React? appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner