If you are trying to figure out what is the best technology stack for your business or your team to use, you came to the right place!
Photo by Ferenc Almasi on Unsplash
What is React?
History of the Web
History of React
How does react relate to the possible alternatives?
Dependencies and libraries
What is React?
As we can see below:
There are a large number of books on react, including several O’Reilly books, and over 250 books listed on Amazon.
Finally, there are over 64,000 questions tagged with “reactjs” on Stackoverflow, so there is no shortage of answers. Overall, it has a very active and large community.
Here you can find the Official documentation about React
What problems does React solve?
Keeping the UI in sync with the state
Efficient UI update
From (reactjs.org) “React will efficiently update and render just the right components when your data changes.”
Learn once, write everywhere
From (reactjs.org) “We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code”
Conclusion: React was created to address some of the challenges associated with large-scale, data-driven websites.
There is also an interesting blog post by the react team called Why did we build React?
History of the Web
1996–1999 : Standardization efforts begin. Browser compliance is terrible. The browser wars start.
2000–2004 : CSS frameworks begin to emerge. jQuery is born. Frontend package management.
2005–2009 : W3C specification compliance is met. Chrome browser takes the lead. Responsive designs and frameworks are introduced.
History of React
2009 — The dark days of the web application
2010 — The first signs
In 2010, Facebook faced problems due to having many team members working on the same solution, which brought many issues related to code maintenance. As a consequence, the development speed was slowing down immensely, and the delivery quality was suffering. To fix these problems, the engineers introduced in its PHP stack, something that it would reuse in the library in the future. XHP is a PHP extension, allowing the creation of composite components, and this same syntax would be introduced in the library later.
2010 — The calm before the change
2011 — The wave of transformation
In mid-2011, Jordan Walker, to deal with the growth and sophistication of the applications, in one phase where the codebases were pretty complicated, started experimenting with a side project called FaxJS, which brings three main characteristics would be used in the library in the future. First, to give more reactivity to the component, Second, Walker brings the concept of state. When the state change, It will update the interface and higher performance was achieved. And last but not least, it was based on the notion of components strategy, where everything is a component, it allows to build a complex UI.
2012 — The Turning Point
Facebook started to have many issues managing the ads displayed on the website because the ads usually are served by a third party server, and since there is no complete control of this third party server, it can easily break the application.
With this, Jordan, started to work on a prototype and, before long, React was born.
2012 — View of the acquisition
But creating React to use internally wouldn’t change the world even if it helped the company. In April of this year, the company acquired Instagram, this was important because they wanted to use React, but the library was tightly coupled to facebook’s site.
2013 — The pressure
After the pressure from the new acquisitions to decoupled the library, Pete Hunt, along with Jordan, drove the conversion to an open-source library, which was possible in May of 2013. (React v0 — React v0.8)
2013 — Skepticism from the crowd
2014 — The growing community
In 2014, companies released new Tools to work with the library, the community grew, and the number of conferences and meetups was immense. (React v0.8 — React v0.12.2)
2015 & 2016 — The mainstream
The mainstream really started in 2015 and 2016. After the announcement from companies like Flipboard, Netflix, and Airbnb was using React’s library and helped a lot. (React v0.13 -React v0.16)
2017–2020 — Popularity
Since the end of 2017, React has continued to grow and is now the most popular library for building client-side applications. (React v15.5.0 — React v17.0)
2021 — React 18 was announced!
Here is the blog post for the oficial announcement titled “The Plan for React 18”.
React is licensed under the MIT License and is an open-source technology.
You can find the full document for this license here: https://opensource.org/licenses/MIT
The main capabilities of react are:
Unidirectional data flow
React is component-based, components are building blocks that can manage their own state. By encapsulating these components you can build complex UI while keeping the state out of the DOM .
When designing a React app you have one unidirectional data flow which means that you nest child components within higher-order parent components. The parent component(s) will have a container for the state of your app (typically an immutable variable called state, unless you are using Redux or Flux, in which case you would encapsulate your app’s state in a store). The parent component typically passes down a snapshot of its state to its child components via read-only props and then the child components can communicate with the parent to update the state via callbacks which are bound to a button or form in the child component.
State management can be done with React Hooks or with application state management libraries like Redux.
How does react relate to the possible alternatives?
React is pretty unique when compared to the possible alternatives. There is even a page dedicated to “thinking in react” in its oficial documentation, because of how different it is.
We will go through some of the characteristics of react who end up being pretty different from the majority of its alternatives.
Library vs Framework
A lot of the decisions about which tools from the ecosystem to use are left up to the developer. Also, new tools emerge all the time, and old ones are cast aside.
When it comes to the MVC Pattern
React is mainly the View in the Model-View-Controller Pattern.
In the official website for react, it is stated “React isn’t an MVC framework.
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.”
Separation of concerns, not of technologies
What is separation of concerns?
Separation of concerns or SoC is a design principle for separating the software into sections, and each section only addresses one concern.
The benefits from separation of concerns is that the code is kept modular, loosely coupled and extremely easy to maintain.
When Angular 2 came out and forced a stronger separation of concerns through explicitly requiring different types of files for different functionality.
HTML in one file which is the section with one concern.
Your component logic is in another file, a typescript file.
Relevant CSS is automatically localized to a single file.
There can also be a service file, it is up to the developer and possibly a test file.
How does React do it?
React doesn’t have a templating file, actually, it allows for you to have one single file, and in that one single file, it can address, the template, the styling, and the logic.
React challenges the traditional method of file silos by flipping it on its side and group their code based on their relationship to each other. Language is not a hard-line barrier but is seen as one cohesive and logically related block. With React, there is no templating — just components that can be created and destroyed as required.
When code is grouped together based on a relationship rather than an arbitrary requirement, processing the block becomes easier.
Virtual DOM vs Shadow DOM
First of all, let’s clarify what is the DOM, and where it comes from and that is from the HTML.
The HTML is a set of instructions that a browser follows when constructing the document object model, or DOM. The elements that make up an HTML document become DOM elements when the browser loads HTML and renders the user interface.
In HTML, elements relate to each other in a hierarchy that resembles a family tree.
Traditionally, websites have consisted of independent HTML pages. When the user navigated these pages, the browser would request and load different HTML documents.
But then SPAs came about…
So what is the Shadow DOM?
Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
What is the problem that React solves?
React is a library that is designed to update the browser DOM for us.
We no longer have to be concerned with the complexities associated with building performant SPAs because React can do that for us. With React, we do not interact with the DOM API directly. Instead, we interact with a virtual DOM, or set of instructions that React will use to construct the UI and interact with the browser.5
Unique ways of styling
React offers a number of different ways of styling components. These ways of styling can fit several scenarios, since using a specific styling for a specific use case, or by personal preference or because of architectural goals of your team or project.
The ways you can do styling in react are the following:
CSS in JS libraries
Sass & SCSS
What is Functional Programming? Variables, in functional programming, are invariant. They’re immutable. Immutability is one of the most important principles of functional programming. Once you’ve defined a variable, you can’t change it. So variables end up being defined as const or final. In the long run, functional programming is more about a specific kind of discipline than about language features. Programming languages can enforce certain rules, but in just about any modern language it’s possible to follow those rules without language support. Another important principle of functional programming is that functions are “first class entities.” That is, there are minimal restrictions about where you can use a function. There is also have functions without names, often called “lambdas”.
React opts by Functional Programming while some other frontend frameworks opt by OOP.
In React, pure functions ( a pure function is a function that has the following properties: The function return values are identical for identical arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams) are used often and they provide a clear mapping between the input props and the rendered output. Functional code is usually less coupled and easier to reuse and test. Before the introduction of hooks, functional components could not be stateful and did not have an alternative to the lifecycle methods. React you can define components using functions and classes. Class components allow you to write your code using ES classes and structure the component logic into methods. They also allow you to use React’s traditional lifecycle methods to run custom logic when a component is mounted, updated, unmounted, and so on. Even though this notation is easier to understand for people familiar with OOP programming, you need to be aware of all the subtle nuances that JS has — for example, how this works, and not forgetting to bind event handlers. There’s a trend among React developers to ditch class components in favor of simpler functional components, but with hooks being a newer feature, you’ll usually see a mix of both approaches in larger React projects.
Why should you use functional components?
There are some benefits you get by using functional components in React.
It’s easy to separate container and presentational components.
Can easily use best practices.
Can help to increase application performance.
Scaling and Reusability
The scaling can be obtained through some of the React traits that can be very helpful, when it comes to scaling our apps.
Because React is component-based and allows for component to be small and focused components, they become easy to test and reuse.
Components can have flexible render methods and be able to render in different shapes. This increases re-usability of components.
You can generalise your components for all the entities in the system. In most apps we perform similar actions for different entities in the system. Therefore, it makes sense to create one reusable component to tackle this.
Generic Redux, using Redux combined with react-redux connect function we can write a higher order component (HOC) to generalise how we connect to redux for actions to read any entity in the system State business logic separate from UI in a component.
Drawbacks of React
React is important in web development history because it introduced declarative and reactive templates, a different way of thinking.
There was a problem with rendering engines and reactivity and React solved it pretty well.
But no technology has zero drawbacks, so you can find them in the list below:
Fast but existing Learning Curve ( JSX syntax )
Thinking in React can be a big shift in mindset (example: react enforces a top-down hierarchy of data-flow)
High pace of development (Thought always with backwards compatibility)
React is still a relatively new technology. It has reached a place where it’s core functionality is fairly stable, but web frameworks and libraries are somewhat unpredictable so even that can change.
React 18, is the next major version. React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.
It will add an opt-in mechanism called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind the scenes, but it unlocks new possibilities to improve both the real and perceived performance of your app.
Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a minimal level of effort compared to a typical major React release.
“We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we’ve found that most React components “just work” without additional changes. We’re committed to making sure this is a smooth upgrade for the entire community, so today we’re announcing the React 18 Working Group.” (Source: Official React Blog — The Plan for React 18)
React was first released in 2013 and is maintained by Facebook and the community.According to an estimate, approximately 8 thousand companies worldwide are using React.js for implementing web resources and mobile apps. Some examples are companies like Uber, Airbnb, Facebook, Pinterest, Netflix, Instagram, Amazon and Twitter.
In what concerns to versions stability along time and breaking changes, React has a reassuring policy from a developer perspective, regarding those topics: React Versioning Policy.
Dependencies and libraries
This is a folder that can easily reach hundreds of megabytes in size, hence the joke on the image below.
This folder is where all the packages are stored which makes them available to use through your application wherever you need it, by for example using a require(“packagename”) to load its main module, or require(“packagename/lib/path/to/sub/module”) to load other modules.
In the create-react-app project, which you can check here, you can clearly see as well what are the dependencies, at the package.json file.
If you create a brand new create-react-app project, you will see it comes with 163MB of node_modules at the time of this writing (June 2021).
The first picture below, on the left, shows the size of the folder node_modules, 162MB. The second picture shows the total size of the app, 163MB.
As you can see the bulk size of this project is pretty much the size of it’s node_modules folder.
The create-react-app is just an example! This is quick and easy way to get started with react. But you can build your dependencies and libraries as you go, as you need it.
You will have to setup babel(or another transpiling too) and webpack( or another module bundler tool) yourself. But once you do, the app will be much smaller in size.
Let’s put it to the test and a a minimal react app. We can get a size as small as 67MB. As seen in the picture below.
There are many react libraries developed by the open source community, if one desires to.
There are many tools that work with web frameworks including with react and there are also dedicated tools to work with react only concerning, testing, UI, performance, boilerplate templates and performance tools.
Some of these tools were even developed at facebook and/or established developers.
In conclusion, there is no short of tools when working with ReactJS.
VS Code (There are extensions to work with React)
Reactide (Dedicated IDE for React)
Visual Studio (Microsoft most complete IDE)
Atom (Only for MacOS)
Nuclide (Developed by Facebook to work on top of Atom)
Create React App (Modern build setup with no configuration)
Next.js (A React Framework)
Vite (Build tool)
React.js Boilerplate (Quick setup for new performance oriented, offline–first React.js apps)
React Starter Kit (Isomorphic web app boilerplate)
React State Management:
Redux ( Predictable State Container for JS Apps)
Context (Share data for a tree of React components)
MobX (Simple, scalable and battle tested state management solution)
Webpack (Webpack v4+ will minify your code by default in production mode)
React DevTools Profiler(This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications)
React-window and react-virtualized are popular windowing libraries.
Material-UI (React components for faster and easier web development)
React-Bootstrap (React components for faster and easier web development)
Ant Design (React UI library)
Semantic UI (Semantic UI React is the official React integration for Semantic UI .)
React Icons (Popular icons for React projects)
React Testing Library (Light-weight solution for testing React components)
Chai ( BDD / TDD assertion library for node and the browser)
Karma (Productive testing environment to developer)
Jasmine (Behavior-driven development framework for testing)
Cypress IO (Front end testing tool built for the modern web, e2e, integration, unit tests)
Puppeteer (Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol)
React Developer Tools (Offered by: Facebook)
Redux DevTools (Offered by: Redux DevTools)
React-Sight ( Offered by: William He, Grant Kang, David Sally)
React -detector (Offered by: Cymen Vig)
Show-me-the-react (Offered by: Kent C. Dodds)
Source: Performance Tools, Context
These are just some of the tools available but there are much more in the market.
“React has a community of millions of developers.”
React development is led by a small dedicated team working full time at Facebook but it also receives contributions from people all over the world.
Facebook’s React team has established a Code of Conduct and adopted a Contributor’s Convenant.
These must be abided by all the community members.
Stack Overflow (popular forum to ask code-level questions or if you’re stuck with a specific error)
DEV’s React community
Hashnode’s React community
Reactiflux online chat
Reddit’s React community
Spectrum’s React community
All of these forums are a great place for discussion about best practices and application architecture as well as the future of React.
Each community consists of many thousands of React users.
Facebook’s React team publishes the official new updates on their blog and twitter account:
React’s Official Twitter
React’s Official Blog
This blog has started in June 2013 and has been updated until today (8years in 2021).
We can observe that the update frequency is high, with a few updates every month, until 2018. And a few updates an year, now in the most recent years, after 2018.
The React team members work on:
Core component API
Engine that powers React DOM and React Native
React documentation website.
React Current Team (2021) :
React was originally created by Jordan Walke.
There is also a number of significant contributors listed in here.
A complete release history for React is available on GitHub.
React follows semantic versioning (semver) principles.
You can also check the releases on the React Blog.
Keeping Up with the Changes
To keep up with the releases the official source of react is the React Blog.
There are also a variety of popular React conferences that you can attend for the latest React information. If you can’t attend these in person, React conferences often release the talks on YouTube following the events. These include:
Facebook-sponsored conference in the Bay Area
Community conference in Salt Lake City
Community conference in Bratislava, Slovakia
Community conference in Amsterdam
React versioning follows the format: x.y.z. An example is 15.6.2.
When releasing breaking changes, we make a major release by changing the x number (ex: 15.6.2 to 16.0.0).
“React 15 was released in April 2016 and React 16 was released in September 2017, and React 17 was released in October 2020.”
In 2021, react announced, React 18 as the next major release.
React Team has a commitment to stability
“As we change React over time, we try to minimize the effort required to take advantage of new features. When possible, we’ll keep an older API working, even if that means putting it in a separate package. For example, mixins have been discouraged for years but they’re supported to this day via create-react-class and many codebases continue to use them in stable, legacy code.”
Development warnings are issued in preparation for future breaking changes. That way, if your app has no warnings on the latest release, it will be compatible with the next major release. Development warnings won’t affect the runtime behaviour of the app
APIs starting with unstable_. These are provided as experimental features whose APIs we are not yet confident in.
Alpha and canary versions of React. React provides alpha versions as a way to test new features early
Undocumented APIs and internal data structures. These are the ones known to avoid.
Sources used: React Community Support, React Team, React Versioning
The market for react is pretty abundant as it is one of the most popular web frameworks as of late, surpassing many other frameworks and moving to the top of the charts when it comes to web frameworks, which will be visible in the following graphs:
Identities that conduct surveys:
StackOverflow has been doing yearly surveys since 2011. The survey for the year 2020 has nearly 65,000 responses fielded from over 180 countries and dependent territories. This survey examines all aspects of the developer experience from career satisfaction and job search to education and opinions on open source software.
The Software House
The Software House (tsh.io) conducted a study that has the participation of 4500 frontend developers. Taking a look into the React popularity amongst developers, this software-house-survey clearly shows that React acceptance is very high.
State Of JS
This year’s survey reached 23,765 people in 137 countries.
By looking at the result of all these different surveys, we can clearly see that react is taking the lead, and it has been on the rise for the last decade. The engineers community is pretty much onboard with the react framework, there is no denying it.
The npm trends for the donwloads of react, vue and angular, clearly show the most popular framework and the most used by the community is react.
StackOverflow is one of the most known and website used by developers
Alex Banks & Eve Porcello — Learning React — Functional Web Development With React and Redux — O’Reilly
Web Pages (Visited from up until July 2021)
Frontend Security Considerations