11.1 Modern Web Applications Architectures

The Web is defined by phases, each denoted by its principal usage—Web 1.0 for reading content, Web 2.0 regarding social interaction, and Web 3.0 as an open, decentralized, and trusted web.
Traditional web architectures rendered web pages on the server, with each client request resulting in a new HTML page being sent from the server to the browser. The Model-View-Controller (MVC) pattern was often used for server-side development.
Responsive web applications render effectively in a browser regardless of the user’s device screen or orientation.
Single-page applications (SPAs) load one web page in the browser, manipulating the UI and fetching data through APIs. This is often done with JavaScript making AJAX calls to REST APIs.
Native mobile applications are designed to run on a specific device. They have the advantage of performance and access to data and functionality on the device but suffer from a lack of cross-platform support.
Web 3.0 is the next phase of the Web. Technologies that will be needed to support it will likely include distributed ledger technologies and AI.
Future web architectures will likely see a combination of Web 2.0 and 3.0 architectural models to support decentralization, openness, trust, cost, and performance effectively. This hybrid approach solves some problems while not fully addressing the goals of Web 3.0.

11.2 Sample Responsive WAD with Bootstrap and Django

Bootstrap is an open-source, responsive web application framework, and Django is a Python-based web application development framework. Both frameworks are highly popular due to their ease of use.
To build the Todo application, you must install Python, PIP, Django, Django REST Framework, Bootstrap, and jQuery.
The steps to build the Todo application are install and set up a local programming environment for Python 3, download and install Python 3.9.4, and add Python and its Scripts subfolder to your path environment data.
The first step to build a Django web application is to create a Django project.
Once the Django project is successfully completed and set up, the next step is to create the Todo application and register it in the Django project.
After registering and installing the Todo web application, the next step is to create the models for Category and TodoList.
After the Category and TodoList models are created, the next step is to create the serializers, the View, routers, user interface, and templates.

React is a JavaScript library popular to build user interfaces.
Node is a JavaScript runtime environment that provides developers with the tools to develop web applications, as well as servers, scripts, and command-line tools.
When creating a Todo web application using React and Node, React serves as the front end, handling the user interface, as well as getting and setting data via HTTP requests using Axios. Node serves as the back end, using a REST API built with ExpressJS and the MongooseJS ODM to interact with a MongoDB database.
To build the Todo application using Bootstrap, React, and Node, you need React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9, and Axios v0.21.0.
The steps to create a Todo web application using Bootstrap, React, and Node include:
- create the Node back end
- create the Node app
- set up the Express web server
- configure the MongoDB database and Mongoose
- build the controller
- set up the REST API
- create the React front end
- create the React app
- install Bootstrap and other dependencies
- create the React components
- connect the React front end to the Node back end

The Todo web application can be updated using Bootstrap with React and Django.
For this version of the Todo web application, React serves as the front end handling the user interface to get and set data via HTTP requests. Django serves as the back end.
To build the Todo application using Bootstrap with React and Django, you need Python v3.9.4, PIP v21.3.1, Django v4.0.1, Django REST Framework v3.13.1, Bootstrap v4.5.0, Django-cors-headers v3.11.0, React v17.0.2, and Axios v0.21.0.
The React application uses Axios to fetch data by making requests to a given endpoint.
A proxy to the Django application helps tunnel API requests from the React application to http://localhost:8000, where the Django application will receive and handle the requests.

A Todo application for mobile devices can be developed using React Native and Node.
React Native is an open-source JavaScript framework used to build user interfaces and native applications for mobile devices.
To build a Todo application for mobile devices, React Native serves as the front end handling the user interface and getting and setting data via HTTP requests. Node serves as the back end that makes use of the API built using the Django REST Framework in 11.2 Sample Responsive WAD with Bootstrap and Django.
Building the Todo mobile application using React Native and Node requires React Native v0.67, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9, and Axios v0.21.0.

A simple Todo application can be created using React with Web 3.0 powered by Ethereum smart contracts on the blockchain.
The Ethereum blockchain creates a secure peer-to-peer network through the use of smart contracts, which are secure digital agreements that enable users to transact directly with each other via the Web.
Building the Todo Ethereum blockchain Web 3.0 application requires React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, Web 3.js v1.2.2, Truffle v5.0.2, Solidity v0.8.11, and Ganache.
The Truffle Framework, which is a suite of tools popular to develop smart contracts, can be used to develop the Ethereum smart contract.
The Truffle Framework can be implemented using Solidity, which is a high-level, object-oriented language that is focused on the implementation of smart contracts.