Front-end development in Javascript and React

2022.04.10
Web Technology Digital Transformation Artificial Intelligence Semantic Web Chatbot and Q&A User Interface  Programming ICT Technology Navigation of this blog

Overview of Javascript and its libraries, frameworks and AltJS

JavaScript (commonly known as JS) is a programming language used to achieve dynamic behavior of web pages. It was first developed at Netscape in 1995 and is now used for a wide range of applications, including web applications, mobile applications, desktop applications, and server-side It is currently used in a wide range of applications, including web applications, mobile applications, desktop applications, and server-side development.

The basic operation of JavaScript is to modify the DOM (Document Object Model) of a web page to enable user interaction, data processing on a website, animation, image slideshows, form validation, and more. JavaScript can also read files external to the web page, communicate with servers, and access databases.

JavaScript is based on the standardized ECMAScript specification, the latest version of which is currently ECMAScript 2022, released in 2021. JavaScript also has a number of libraries and frameworks, as well as a programming language developed as an alternative to JavaScript called AltJS. These are described below.

A number of JavaScript libraries exist and are used to make web development more efficient, some of which are listed below.

  • jQuery: One of the most popular JavaScript libraries, jQuery allows for easy DOM manipulation and event handling. It is also used to implement Ajax and create animations.
  • Underscore.js: a general-purpose utility library that complements the standard JavaScript functionality and is used for manipulating arrays, objects, functions, templates, etc.
  • Lodash: A library similar to Underscore.js, but faster and offering more functionality than Underscore.js.
  • Moment.js: a JavaScript library specialized for date and time processing, allowing easy parsing, formatting, and manipulation.
  • D3.js: JavaScript library for data visualization, allowing users to create graphs, charts, maps, etc.
  • Three.js: A JavaScript library for 3D graphics, enabling the creation of high-quality 3D models and animation using WebGL.

Next, we will discuss Javascript frameworks, of which there are numerous frameworks used to make web development faster and easier, as shown below.

  • React.js: A JavaScript library developed by Facebook and widely used for web application development, React.js uses a virtual DOM for fast rendering.
  • Angular.js: JavaScript framework developed by Google, used for developing mobile and web applications. Angular.js uses the MVC (Model-View-Controller) pattern.
  • Vue.js: JavaScript framework developed by Evan You, which makes it a popular choice between React and Angular. Vue.js is characterized by its simplicity and ease of learning.
  • Ember.js: A JavaScript framework used for web application development, it has a rich feature set and is suited for building advanced web applications.
  • Backbone.js: A type of MVC framework, Backbone.js is a simple, lightweight JavaScript library suitable for developing single-page applications.

Finally, we discuss AltJS, a generic term for programming languages developed as an alternative to JavaScript, including languages that extend JavaScript syntax or are generated by compiling JavaScript. Some representative AltJS are described below.

  • TypeScript: A superset of JavaScript developed by Microsoft that supports static typing; TypeScript is compatible with JavaScript and allows JavaScript code to be used without modification.
  • CoffeeScript: An extension of JavaScript with Ruby and Python-like syntax that allows you to write code concisely; CoffeeScript compiles to JavaScript and can be executed by web browsers.
  • Dart: An alternative programming language to JavaScript developed by Google, used for developing client-side web applications.
  • Elm: A functional programming language that extends the JavaScript syntax; Elm is specialized for web application development and compiled into JavaScript.
  • ClojureScript: A Lisp dialect that is converted to JavaScript using Clojure’s compiler; ClojureScript is compatible with JavaScript and can be executed in web browsers.

In this blog, we will discuss various examples of the use of libraries and frameworks related to this Javascript, AltJS, etc., as follows.

About Front-end development in Javascript and React

Javascript is designed to feel familiar. The language’s syntax is similar to Java, and its structure of functions, arrays, dictionaries (or associative arrays), and regular expressions is common to many scripting languages. Thus, Javascript appears to be a quick learning curve for anyone with a little experience writing programs. In addition, the small number of concepts that form the core of the language allows even novice programmers to begin actually writing programs with little training.

Despite this approachability, to become truly proficient in Javascript, it takes a long time and a deep understanding of the language’s semantics, idiosyncrasies, and most effective idioms.

Like most successful technologies, Javascript has evolved over time. Initially touted as a “Java augmentation” for programming interactive Web pages, Javascript eventually usurped Java as the most dominant programming language on the Web. In 1997, a standard (officially called ECMAScript) was established for Javascript, which has become so popular that it is now the most widely used programming language on the Web. Nowadays, there are many Javascript implementations that conform to various versions of ECMAScript.

The third version of the ECMAScript standard (ES3) was finalized in 1999 and is the basis for the current version of Javascript. The next evolution of this standard was the 5th edition (ES5) released in 2009, which standardized some features that were already widely supported but not included in the specification, and introduced a significant number of new features.

Not only are there multiple versions of the standard, but there are also quite a few non-standard features that may or may not be supported by different Javascript implementations. For example, many Javascript engines support the const keyword for defining variables, but the ECMAScript standard does not define the syntax or behavior of const at all. Moreover, the behavior of const varies from implementation to implementation, and in some cases, const variables are not updated.

const PI = 3.141592653;
PI = "modeified!";
PI;   // 3.141592653

However, other implementations treat const as a synonym for var

const PI = 3.141592653;
PI = "modified!";
PI;  // "modified"

With Javascript’s long history and diverse implementations, it is difficult to keep track of what features are available on what platforms, and the web browser, which is Javascript’s primary ecosystem, does not have a Javascript The problem is further complicated by the fact that there is no way for the programmer to control the version. Since end users use various versions of different web browsers, web programs need to be carefully coded to work consistently across all browsers.

Javascript is not only used for client-side web programming. Other uses include server-side programming, browser extensions, and scripting for mobile and desktop applications, among many others. In some of these cases, the available Javascript versions are more specific, and it makes sense to take advantage of additional features specific to a particular implementation of Javascript.

This blog discusses the following topics related to Javascript.

Implementation

JavaScript is a programming language widely used in web development and application development. React is a JavaScript library developed by Facebook and is a framework specialized for building user interfaces (UIs). React has a component-based architecture that allows for the creation of reusable UI elements.

This section provides an overview of this Javascript and React and their various implementations.

Controlling UI using generative AI is a useful technique for improving user interface design and interaction.

  • Metaverse control by natural language processing and generative AI

Metaverse manipulation by natural language will be a technology that allows users to intuitively control the objects, environment and avatar movements in the metaverse using natural language.

Typically, IOT devices are small devices with sensors and actuators, and use wireless communication to collect sensor data and control actuators. Various communication protocols and technologies are used for wireless IoT control. This section describes examples of IoT implementations using this wireless technology in various languages.

D3.js and React, which are based on Javascript, can be used as tools for visualizing relational data such as graph data. In this article, we will discuss specific implementations using D3 and React for 2D and 3D graph displays, and heat maps as a form of displaying relational data.

Displaying and animating graph snapshots on a timeline is an important technique for analyzing graph data, as it helps visualize changes over time and understand the dynamic characteristics of graph data. This section describes libraries and implementation examples used for these purposes.

Cytoscape.js is a graph theory library written in JavaScript that is widely used to visualize network and graph data. Cytoscape.js makes it possible to add graph and network data visualization to web and desktop applications.

Sigma.js is a web-based graph visualization library and a useful tool for creating interactive network diagrams. Here we describe the basic steps and functions for visualizing graph data using Sigma.js.

Javascript Overviews

When researching web technologies, many different frameworks have emerged, so what is the best choice? Sometimes I feel like, “What should I choose? In this article, I will give an overview of the complex world of web technologies, including React, HTML, and SPA.

Following the previous web app structure, we will give an overview of the development tools and AltaJavascript. The development tools include module handlers such as Webpack, Browserify, and Rollup.js, trans-compilers such as Babel, development tools such as Grunt.js and Gulp.js, and the development tools TypeScript, Reason, Elm, PureScript, and AltJavascript, such as Clojurescript, will be discussed.

    Javascript Implimentation

    In order to program, it is necessary to create a development environment for each language. This section describes how to set up specific development environments for Python, Clojure, C, Java, R, LISP, Prolog, Javascript, and PHP, as described in this blog. Each language has its own platform to facilitate development, which makes it possible to easily set up the environment, but this section focuses on the simplest case.

    File input/output functions are the most basic and indispensable functions when programming. Since file input/output functions are procedural instructions, each language has its own way of implementing them. Concrete implementations of file input/output in various languages are described below.

    Among programming languages, the basic functionality is one element of the three functions of structured languages (1) sequential progression, (2) conditional branching, and (3) repetition, as described in the “History of Programming Languages” section. Here, we show implementations of repetition and branching in various languages.

    Database technology refers to technology for efficiently managing, storing, retrieving, and processing data, and is intended to support data persistence and manipulation in information systems and applications, and to ensure data accuracy, consistency, availability, and security.

    The following sections describe implementations in various languages for actually handling these databases.

    This section describes examples of how servers described in “Server Technology” can be used in various programming languages. Server technology here refers to technology related to the design, construction, and operation of server systems that receive requests from clients over a network, execute requested processes, and return responses.

    Server technologies are used in a variety of systems and services, such as web applications, API servers, database servers, and mail servers. Server technology implementation methods and best practices differ depending on the programming language and framework.

    Originally, Javascript was only used to implement complex movements on a web browser, but now it can implement not only the front end but also the back end (Node.js and Deno). Not only that, but smartphone applications can be created, AR (Augmented Reality), VR (Virtual Reality), voice recognition, desktop applications, etc. can also be implemented in Javascript. This makes Javascript the No. 1 language among all languages in terms of the range of areas that can be expanded with a single language. In addition, if you are developing a web system, Javascript is 100% sure to be used for the front-end implementation, so learning Javascript is not a waste of time.

    Here, the front end is characterized by very fast technology change. Therefore, when looking at the industry as a whole, modern front-end (using libraries/frameworks that use virtual DOM such as React, Vue, Angular, etc., using package managers such as npm/yarm, mainly using notation after ES2015, webpack, etc.) is the most important. (created with SPA (Single Page Application) using modular handlers and transpilers such as Babel), and the reality is that there is a shortage of people who can do this and all companies are having a hard time hiring them.

    As modern Javascript, (1) variable declarations with const and let, (2)template strings, (3)arrow functions, (4)split assignments, and (5)setting default values are described.

    Modern Javascript utilized in React and other applications, including (1) spread syntax, (2) object abbreviation notation, (3) map and filter, (4) ternary operators, and (5) logical operators will be discussed.

    When rewriting screen elements in pure Javascript or Jquery, the DOM is manipulated procedurally. Here we introduce the cases of getting, adding, and deleting the DOM, and finally we describe the construction of a simple memo application using them.

    • Clojure and Javascript and web frameworks (node.js)In recent years, web frameworks have become an important part of system development. Javascript (or its derivative, AltJavascript) and frameworks using Javascript (React, View, etc.) are the de facto languages used to develop the front end of web frameworks.Clojure has developed a framework (Clojurescript) that integrates Javascript/frameworks and Clojure, and I would like to discuss them in this article. In recent years, Java and Javascript have become interoperable via GraalVM, a high-speed JVM, and there is an article that says that Clojure and Javascript can also be linked via GraalVM, but I will skip this article this time.

    Building a chatbot framework in Clojure and Javascript and integrating various AI functions (natural language processing, SVM, BERT, Transformer, knowledge graph, database, expert systems)

    React.js

    The benefits of learning Javascript. Originally, Javascript was only for implementing complex movements on a web browser, but now it can be used to implement not only the front end but also the back end (Node.js and Deno). Not only that, but smartphone applications can be created, AR (Augmented Reality), VR (Virtual Reality), voice recognition, desktop applications, etc. can also be implemented in Javascript.

    Front-end technologies are characterized by rapid technological change. Therefore, when looking at the industry as a whole, modern front-end (using libraries/frameworks that use virtual DOM such as React, Vue, Angular, etc., using package managers such as npm/yarm, mainly using notation from ES2015 or later, and using webpack, etc.) is the most common type of front-end. (created with SPA (Single Page Application) using modular handlers and transpilers such as Babel), and the reality is that there is a shortage of people who can do this and all companies are having a hard time hiring them.

    The most common way to start a React project is to use the “create React App” method, which was previously described in the chatbot implementation using Node.js and React. The specifics of installing node.js and creating a react project file using create react app are described on the aforementioned blog page. React uses a writing style called JSX notation. React uses a writing style called JSX notation, which allows HTML-like tags to be applied in Javascript files.

    React development is based on dividing screen elements into components of various granularities to improve reusability and maintainability. Components are defined in terms of functions, and the definition of components in terms of Classes, as in Laravel, is no longer the mainstream today.

    This section describes how to execute events and operate styles in React. For example, the event when a button is pressed is usually written as onclick, but in React, it is as follows. Next, we describe how to apply styles (CSS). As with normal HTML/CSS, styles can be applied in React by writing the style attribute in the tag. However, it is important to note that each element of CSS is described as a Javascript object. For example, if you want to change the color of text to red, write the following.

    Props are like arguments that are passed to a component, and the component changes its display style and content according to the received props.

    For example, if there is a component that displays a certain character, and the component is designed to display the character in black when normal and in red when an error occurs, creating a black component and a red component using a hosa technique will result in a huge number of components and will make it difficult to reuse the components that have been created. In such a case, the number of components would be huge, and it would be difficult to reuse the components that have been created. In such a case, the condition is passed by props so that components can be used in the same way to some extent.

    After Props, the next important concept in React is State, which represents the state of a component by managing the data to be displayed on the screen and the variable state of the component. In addition, to get started with React functions, it is necessary to know about re-rendering and side-effects; when the State is updated, the component starts over again, detecting the DOM that has changed, reflecting the change, and displaying the screen. This kind of “detecting changes and reprocessing components” is called “re-rendering.

    There are many variations of how to apply CSS in React, each with its own characteristics, and some of them can be written in the usual way in a Javascript file. This section describes the main ways of applying CSS. (Inline Style, CSS Module, Styled JSX, styled components, Emotion, Tailwind CSS)

    In order to accurately control re-rendering in React, it is important to know when re-rendering occurs. We will discuss the functions for optimizing re-rendering in the next section, but it is important to be aware of “which pattern you are trying to optimize for” for efficient coding.

    There are three patterns of re-rendering (1) Component whose State is updated, (2) Component whose Props is updated, and (3) All components under the re-rendered component. To control the re-rendering, use memoization to selectively re-render at (3).

    • About React
    • Introduction to React Development for Web Developers

    コメント

    1. Programming Technology Overview | Deus Ex Machina says:
      2022年5月29日 at 9:20 AM

      […] technology  R language and machine learning   C/C++ and various machine learning algorithms  front-end development with Javascript, web design with […]

      Reply
    Exit mobile version
    タイトルとURLをコピーしました