Web Technology(1)Javascript

Web Technology(1)Javascript

When I’m researching web technologies, I sometimes feel like there are so many frameworks out there that I don’t know what to choose. In a WPJ article that helped me organize Javascript information, the expression “framework fatigue” was used, and the best prescriptions were “don’t try to keep up”, “the only thing you can be sure of is Javascript itself”, and “just learn the language (javascript). The best prescription is “don’t try to keep up,” “the only thing you can be sure of is Javascript itself,” and “after you learn the language (javascript) and increase your knowledge, you can understand how the frameworks work and make a satisfactory choice. I’ve tried to review the complex world of web technologies from the point of view of organizing them, including after all these years.

Node.js is a runtime for writing server-side programs in JavaScript, and it has a package manager and repository called npm. You can search for third-party modules in the Npm repository, and once you find a module, you can easily download and use it with the npm install command. The package is downloaded to the local node_modules directory, and all modules and dependencies are stored in this directory. The downloaded package will be listed in the package.json file as a dependency object of the project, including the project and module information.

Next, I’d like to talk about React, a JavaScript library developed by Facebook for building UI parts on websites. although it is often compared to AngularJS and jQuery, React itself is not a framework, but a library that only builds UI. One of the advantages of using React is that it runs faster by using a rendering mechanism called Virtual DOM (Virtual Document Object Model). This feature also makes it easy to create the Single Page Application (SPA) described below. To create a new react application, you can create a template (my-app in the example) using the following operations.

npx create-react-app my-app
cd my-app
npm start

To install the aforementioned elasticsearch library, you can use npm and “npm install Package name”.

Next, we will discuss the structure of web applications. Conventional web applications generally use Ajax to replace HTML and load content in response to user operations when a lot of dynamic processing is required, such as sending multiple pages from a web server.

With this method, a fragment of HTML or the entire page is sent each time the user operates, and operation time became an issue. A new method to overcome this situation was to use a method where the client communicates with the server by displaying the application to the user, rather than the server displaying it to the user.

The architecture that takes the above approach a step further is the Single Page Application (SPA), which is a large block of JavaScript that contains everything necessary for the application to run, and since the user interface is drawn entirely on the client side, there is no need to reload it. The user interface is drawn entirely on the client side, so there is no need to reload it, and the only thing that changes is the data in the application. The only thing that changes is the data in the application. Normally, this is handled by a remote API using asynchronous communication such as Ajax. The disadvantage of this method is that the initial loading time is long, but once loaded, the client and server can move between views (pages) at high speed since only data is sent and received between them.

SPA may not be the best solution when a faster response is required on the first load or when search engine index optimization is needed. The Isomorphic (or Universal) JavaScript application is a technique to solve these problems. This approach allows the majority of the code to be executed on both the server side and the client side, so that the server side can draw what is needed for speed on the first page load, and then switch to client side drawing when the user interacts with the application. Since web pages are drawn on the server side first, search engines can index these web pages properly.

Tools for creating desktop applications using web apps include Meteor and Electron. As a framework, there is PWA (Progressive Web Apps), which has recently been attracting attention as a tool for mobile devices. I would like to discuss the details of these frameworks separately when I have a chance.

This is an overview of the Node.js, React, and web app configurations we’ve been using so far. In the next article, I’ll give an overview of development tools.