Web Applications Overview

Web Applications Overview

From WEB+DB EXPRESS vol122. In the previous article, we discussed web browsers, HTML, CSS, and JavaScript. In this article, I will discuss Web applications that integrate the previous topics.

The Web was built for the purpose of connecting documents around the world through HTML hyperlinks. As their use increased, the Web, which originally provided only static content, evolved to provide dynamic applications, which evolved into software called Web applications.

However, since these software were dynamic systems built on top of static systems, they require various innovations that are different from general applications.

HTTP used in the Web is a stateless protocol that does not have any state, so in order to manage the state of the user, it is necessary to keep the state in the application in some way. Normal PC and smartphone applications do not require any special devices to maintain the state since the state is stored in memory, but web applications require various devices to manage the state since they are supposed to communicate with the web server using a stateless protocol.

Web applications can reflect the results of various processes performed by the web server in HTML and return it to the browser, or perform dynamic operations using JavaScript in the browser, so when implementing an application, it is important to determine whether the operations are performed on the server side or the front end. Therefore, when implementing an application, it is necessary to always be aware of whether the action is taking place on the server side or on the front end.

In addition, while the front-end is written in JavaScript, the server-side is often written in a different language, creating the need to handle multiple languages within a single application.

Web applications need to satisfy complex requirements, but approaches are being taken to develop them efficiently by making them common or templating them. Those frameworks are prepared in two major areas, server-side and front-end side.

Server-side frameworks abstract the dynamic processing on the server side. On the server side, various functions are abstracted and prepared in scripting languages such as PHP, Ruby, Python, Perl, and Clojure, such as template functions for HTML generation, database access functions, and input checking functions for safety, which are necessary for web application processing. These functions are abstracted and prepared. By using this framework, users can develop web applications just by using these abstracted functions, without knowing how web applications work.

One of the most important concepts of frameworks is MVC (Module-View-Controller). This is used in most frameworks, and was originally proposed for developing applications that run on PCs, but its usefulness has led to its use in web applications as well.

MVC divides the internal structure into three parts: model, view, and controller, as shown below.

The model provides the processing and interface for the data handled by the application. The view handles the display of the model data to the user. The controller receives input from the user, invokes the model and view, and controls the overall processing flow.

Another important framework is WSGI, which is a standard proposed by Python for interface abstraction, and with the advent of WGSI, Python frameworks can be used in any web application as long as they support WGSI. WSGI is a standard for abstracting interfaces proposed by python, and with the advent of WGSI, Python frameworks can run on any web server or system configuration as long as they support WGSI. As a result, similar frameworks were introduced in other languages such as Ruby’s Rack, Perl’s Plack, and Clojure’s Rail, which I mentioned earlier.

With the advent of this middleware, it became easier to develop web servers in each language, and by using Ruby’s unicorn, Puma, etc., it became possible to use HTTP to connect to web servers, as opposed to FastCGI, which was commonly used in the past. The method of connecting to a web server using a reverse proxy is now being used.

In contrast to the above server-side frameworks, front-side frameworks have also developed based on JavaScript, and Ajax (Asynchronous JavaScript and XML) is one of the most important of them. Ajax (Asynchronous JavaScript and XML) is one of the most important of these, and is a technology for communicating with servers using XMLHttpRequest, a function that allows JavaScript to communicate with servers to obtain data. Ajax has contributed to the development of dynamic web applications by being used in applications that require fast graphic expansion/movement, such as map services.

Communication with the server can be achieved with XMLHttpRequest, but advanced DOM manipulation is required to achieve high expressiveness and operability in the browser. This is where libraries that abstract XMLHttpRequest communication and DOM manipulation come into play.

One of these libraries is Prototype.js, which has been further extended to JQuery. JQuery is a further extension of Prototype.js, which uses an object called JQuery to provide an interface to all functions and manipulate the DOM without conflicting with existing JavaScript. JavaScrip manipulates HTML.

JavaScrip is a mechanism that directly manipulates the DOM when manipulating HTML, and there is usually no problem with this, but as processing in JavaScript increases in scaled-up complex applications, processing speed becomes an issue because DOM processing is heavy.

That’s when a mechanism called Virtual DOM was invented, where DOM processing is not performed every time, but is stored somewhere and reflected all at once. The Virtual DOM has a tree structure similar to that of the DOM in memory, and the creation and modification of the Virtual DOM is processed at high speed through simple operations in memory, and in the background, the tree structure of the Virtual DOM and the actual DOM are compared and differences are extracted, and only the content of the differences is reflected in the DOM. Only the differences are reflected in the DOM. Frameworks that use this virtual DOM include React and Vue.js. One of the disadvantages of Virtual DOM is that it cannot coexist with existing frameworks that directly manipulate the DOM, such as JQuery.

Sass (Syntactically Awesome Style Sheets) is one of the implementations of AltCSS, which adds useful features such as variables and inheritance used in programming languages to the declarative CSS. There are two ways to write Sass: SASS notation and SCSS notation. Examples of SASS and SCSS are shown below.

body
background-color:#FFFFFF
text-align:center

body {
  background-color:#FFFFFF
  text-align:center;
}

Also, instead of writing CSS from scratch, Bootstrap is a CSS framework that predefines commonly used styles and uses them.

In order to maintain the state of a web application, the web server needs to hold data associated with the user. For this purpose, a database is used. There are various types of databases. One of them is the RDBMS (Relational Database Management System), which is a relational database. SQL (Structured Query Language) is the language for issuing queries to the RDBMS, and O/R mapper (Object-relational mapping) is a query library that enables access to the DB without a full understanding of SQL. For more details on DB, please refer to the article described separately.

Another important framework for web applications is the Web API, which is a mechanism to access a web server from a program rather than from a browser. Unlike HTML in the browser, the data received by the Web API is in a data format such as JSON or XML, which is easier for programs to handle. various implementations of Web APIs are possible, but REST and GraphQL, etc.

REST (Representational State Transfer) is a design philosophy used to define APIs, and APIs that follow REST are called RESTful APIs. REST is a stateful protocol (HTTP) that operates on uniquely specified resources (URLs).

With REST, when you want to retrieve data from multiple resources, you need to access the API multiple times. In contrast, GraphQL was proposed to reduce the number of API accesses and increase the amount of data to be retrieved at once, in order to increase the efficiency of data retrieval.