Static and dynamic content
Static content
Static content is files that the server transfers just as they are stored on the web server, such as videos or images.
Dynamic content
Dynamic content, on the other hand, is generated when the HTTP request is made.
For example, the content may be generated based on input from a user, or when you visit a news website, it would be based on the current date. What actually happens, is that the web server communicates with another kind of server, called an application server or a back-end.
The application server generates the dynamic content that the web server sends back to the user’s browser.
TIP
Dynamic content is generated while you use a website, it typically takes longer to generate than it takes to send back static content.
TIP
Application servers perform more complex processing than web servers. For instance, they have to run the application logic, communicate with the database, and check permissions.
To improve performance, different application servers have specific purposes.
Application servers typically have a limited capacity on how many requests they can process per second. But fortunately, this is where the web server can help out.
Web servers use a process called caching instead of generating content dynamically for every request.
Caching
Caching means the web server keeps a copy of dynamic content. If the content is requested again, the web server can immediately send this cached version instead of passing the request again to the application server.
On the first request for dynamic content, the web server checks if the content exists in the cache. If it does not exist, the content is requested from the application server and stored in the cache. The web server then sends back the dynamic content to the browser.
On subsequent requests, the web server immediately sends back the content stored in the cache. This reduces the amount of dynamic content that the application server has to generate.
Then, after a period of time or with the next user interaction, the web server updates the cache with the latest content.
Single page applications
Before the advent of modern JavaScript frameworks, most websites were implemented as multi-page applications. But this makes traditional applications resource intensive to web servers because sending entire web pages for every request consumes excessive bandwidth and uses CPU time to generate dynamic pages. If your website is complex, the site browsing experience may appear slow to users. It will be even slower if they have a poor or limited internet connection.
To solve this problem, many web developers build their web applications as SPAs. It’s called single-page, but that doesn’t mean your website has only one page of content. What it means is that there is only one HTML page that gets sent from the server to the browser, but that page will update its content as your users interact with your website.
SPA
A SPA allows the user to interact with the website without the application needing to download entire new web pages. Instead, it rewrites the current web page as the user interacts with it.
The result is a browsing experience that feels faster and more responsive to user input.
When the user navigates to the web application in the browser, the web server returns the necessary resources to run the application. A SPA has two approaches to serving code and resources. The first is called bundling, and the second approach is known as lazy loading or code splitting.
Bundling
With bundling, when the browser requests the application, the server returns and loads all necessary HTML, CSS, and JavaScript immediately.
Lazy Loading
With lazy loading, the browser requests the application and the server returns only the minimum HTML, CSS, and JavaScript needed to load the application. Additional resources are downloaded as required.
In a traditional website, when the button is clicked, the browser will send a post request to the web server. The web server returns a new web page containing the button and movie name. The web browser then renders the new page.
In an SPA, when the button is clicked, the browser will send a post request to the web server. The web server will return a JSON object. The application reads the object and updates by displaying the text of the movie name. That’s more efficient because the rest of the page remains as it was and it’s content does not need to be sent by the server and rendered by the browser.
But what if you need to update the majority of the page to display a different form of content?
Suppose you are building a web application that has two pages. One page shows the latest news and the other page shows the current user’s profile page. Navigation bar at the top of the site contains a link to each page. In the traditional websites, when the user clicks a profile link, the web browser sends the request to the web server. The web server generates the entire HTML page and sends it back to the web browser. The web browser then renders a new web page.
In a single-page application, different pages are broken into templates, also known as views. Each view will have HTML code that can be updated by the application. For instance, the profile page would have a username, a first name, and a last name. The web browser sends the request to the web server and the web server sends back a file called a JavaScript Object Notation or JSON object. This contains only the data to be displayed, such as the user’s first name and last name, and the SPA will update the HTML.
What is React?
React is focused on working with components, which makes it simple to build functional user interfaces on web and mobile.
Available since 2013 React is an open source library with a community of core contributors and companies that maintain it. Developers use React to develop single page applications and you can also develop mobile applications with React native.
When you develop an app, you can choose to use React to develop the user interface. But building an application requires more than that. You must also consider the navigation and how the app will request data from a web server. Therefore React is used in conjunction with other JavaScript libraries during development.
The key concept behind React is that it allows you to define components that you can combine to build a web application.
Component
A component is basically a small piece of user interface, such as a music player or photo gallery. This component model allows you to do several things, such as developing and testing parts of their application in isolation and it also allows you to reuse components across multiple sections of the application as well.
Case Study: Why did Facebook engineers create React?
There are a lot of JavaScript Model-View-Controller (MVC) frameworks out there. Why did we build React and why would you want to use it?
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.
React doesn’t use templates.
Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.
React approaches building user interfaces differently by breaking them into components. This means React uses a real, full-featured programming language to render views, which we see as an advantage over templates for a few reasons:
- JavaScript is a flexible, powerful programming language with the ability to build abstractions. This is incredibly important in large applications.
- By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.
- By baking an understanding of markup and content into JavaScript, there’s no manual string concatenation and therefore less surface area for XSS vulnerabilities.
We’ve also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript.
React updates are dead simple.
React really shines when your data changes over time.
In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via directives and data binding requires a linking function to manually update DOM nodes.
React takes a different approach.
When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one and generate a minimal set of changes to be applied to the DOM.
The data returned from render is neither a string nor a DOM node — it’s a lightweight description of what the DOM should look like.
We call this process reconciliation. Check out this jsFiddle
 to see an example of reconciliation in action.
Because this re-render is so fast (around 1ms for TodoMVC), the developer doesn’t need to explicitly specify data bindings. We’ve found this approach makes it easier to build apps.
HTML is just the beginning.
Because React has its own lightweight representation of the document, we can do some pretty cool things with it:
- Facebook has dynamic charts that render to
<canvas>instead of HTML. - Instagram is a “single page” web app built entirely with React and
Backbone.Router. Designers regularly contribute React code with JSX. - We’ve built internal prototypes that run React apps in a web worker and use React to drive native iOS views via an Objective-C bridge.
- You can run React on the server for SEO, performance, code sharing and overall flexibility.
- Events behave in a consistent, standards-compliant way in all browsers (including IE8) and automatically use event delegation.
Head on over to https://reactjs.org to check out what we have built.
How React works
Remember when your web browser receives an HTML page, it constructs a DOM, to represent it. But updating the DOM is considered expensive, because it is very time intensive for the web browser to do so. Every time the browser DOM is updated, it causes the browser to recompute the page. Yet many big and popular websites still load in no time today.
React solves the problem, by computing its own virtual DOM.
A react component has a one to one relationship to an HTML element that is displayed on the webpage. When React builds out its tree of components, it builds out its own dome in memory called the virtual DOM. The virtual DOM is a representation of the browser DOM that is kept in memory. React uses this virtual DOM to update the browser DOM, only when it needs to.
React checks to see if the HTML components in the virtual DOM matches the browser DOM. If a change is required, the browser dome is updated. If nothing has changed, then no update is performed. This process is called reconciliation.
Let’s break down what happens when you update a component and React. Firstly, the virtual DOM is updated. Then React, compares the virtual DOM to the previous version of the virtual DOM, and determines which elements have changed. The changed elements, and only those elements are updated in the browser DOM. Changes on the browser DOM, cause the displayed web page to change.
The Virtual DOM
React builds a representation of the browser Document Object Model or DOM in memory called the virtual DOM. As components are updated, React checks to see if the component’s HTML code in the virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing has changed, then no update is performed.
As you know, this is called the reconciliation process and can be broken down into the following steps:
Step 1:Â The virtual DOM is updated.
Step 2:Â The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed.
Step 3:Â The changed elements are updated in the browser DOM.
Step 4:Â The displayed webpage updates to match the browser DOM.
As updating the browser DOM can be a slow operation, this process helps to reduce the number of updates to the browser DOM by only updating when it is necessary.
But even with this process, if a lot of elements are updated by an event, pushing the update to the browser DOM can still be expensive and cause slow performance in the web application.
The React team invested many years of research into solving this problem. The outcome of that research is what’s known as the React Fiber Architecture.
The Fiber Architecture allows React to incrementally render the web page. What this means is that instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the update over time. But what does “over time” mean?
Imagine a really long web page in the web browser. If the user scrolls to the bottom, the top of the web page is no longer visible. The user then clicks a button on the bottom of the web page that updates some text on the top of the web page.
But the top of the page isn’t visible. Therefore, why update it immediately?
Perhaps there is text currently displayed on the bottom of the page that also updates when the button is clicked. Wouldn’t that be a higher priority to update than the non-visible text?
This is the principle of the React Fiber Architecture. React can optimize when and where updates occur to the browser DOM to significantly improve application performance and responsiveness to user input. Think of it as a priority system. The highest priority changes, the elements visible to the user, are updated first. While lower priority changes, the elements not currently displayed, are updated later.
While you’re unlikely to interact with the virtual DOM and Fiber Architecture yourself, it’s good to know what’s going on if issues occur during the development of your web application.
There are many tools available to help you investigate how React is processing your webpage. The official React Developer Tools web browser plugin developed by Meta will be one of the key tools in your developer toolbox. So, if you do have to look deeper into the code, you’ll have the right toolbox available to help you. These tools will be explored later on.
Component hierarchy
Every React application contains at least one component, the root component or app component. Components are added to the app component to build out a tree structure of components that make up the application.
React and complimentary libraries
React is a library and not a framework. This means you’ll often use other JavaScript libraries with it to build your application. In this reading, you will be briefly introduced to some JavaScript libraries commonly used with React.
Lodash
As a developer, there’s a lot of logic you’ll commonly write across applications. For example, you might need to sort a list of items or round a number such as 3.14 to 3. Lodash provides common logic such as these as a utility library to save you time as a developer.
Luxon
You’ll be working with dates and times often as a developer. Think of viewing a list of orders and when they were placed, or displaying a calendar schedule for an event. Dates and times are everywhere.
Luxon helps you work with dates and times by providing functions to manipulate and display them. For example, think of how dates are formatted in different countries. In the United States the format is Month Day Year but in Europe it is Day Month Year. This is one area where Luxon can help you display the date in the user’s local format.
Redux
When building a web application, you’ll need to keep track of its state. Think of when you shop online. The web application tracks items currently in your shopping cart. When you remove an item from the cart, the application needs to update what displays on the screen. This is where Redux comes in. It helps you manage your application state and even has advanced features such as undo and redo.
Axios
As a developer you’ll be communicating with APIs over HTTP frequently. The Axios library helps to simplify sending HTTP requests and processing the response. It also provides advanced features allowing you to cancel requests and to change data received from the web server before your application uses the data.
Jest
It is good practice to write automated tests for your code as a professional developer. The jest library helps you to do this and works with many libraries and frameworks. It also provides reporting utilities such as providing information on how much of your code is tested by your automated tests.
Additional Resources
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
React Official Website
Choosing between Traditional Web Apps and Single Page Apps (Microsoft)
React Source Code (Github)
https://github.com/facebook/react
Introduction to React.js
The original video recorded at Facebook in 2013.
ReactJavaScriptlibraryUIFront-end
Previous one → 5.Intro to UI Frameworks and libraries | Next one → 1.Welcome to Python Programming