ASP.NET Core applications are web applications and typically use client-side web technologies such as HTML, CSS, and JavaScript. By separating page content (HTML), page layout and style (CSS), and page behavior (JavaScript), complex web applications implement the principle of task separation. If these tasks are unrelated to each other, it makes subsequent changes to the structure, design, or behavior of the application much easier.
Unlike the relatively established segments of HTML and CSS, JavaScript is being actively developed through the efforts of application platform developers and the utility programs that run Web applications. This chapter examines several ways that Web developers are using JavaScript and provides an overview of the Angular and React client libraries.
HTML
HTML is a standard markup language used to create Web pages and Web applications. Its elements define standard page blocks and also represent formatted text, images, data entry forms, and other structures. When a browser makes a URL request to retrieve a page or application, an HTML document is returned first. This HTML document may contain a link or additional information about the design or layout in the form of CSS, and behavior in the form of JavaScript.
CSS
Cascading Style Sheets (CSS) define the design and layout of HTML elements. CSS styles can be applied directly to an HTML element, defined separately on the same page, or defined in a separate file referenced on the page. A cascade of styles is defined based on how they are used to select a particular HTML element. For example, a style can be applied to the entire document and overridden by the style of an individual element as needed. In the same way, the style of an element can be overridden by the style applied to the element’s CSS class, which in turn can be overridden by the style applied to a particular instance of the element by its identifier.
CSS preprocessors
CSS stylesheets do not support conditional logic, variables, and other programming language features. Thus, large stylesheets often contain repetition because the same colors, fonts, and other parameters can be applied to different HTML elements and cascading stylesheet classes. The use of preprocessors for CSS stylesheets enforces the “Don’t Repeat” principle by adding support for variables and logic.
The most popular CSS preprocessors are Sass and LESS. Both of these extend the capabilities of CSS stylesheets and provide backward compatibility with them. This means that a regular CSS file can be opened to work in Sass or LESS. Sass and LESS are developed in Ruby and JavaScript, respectively, and are typically used as part of a local development process. Both of these solutions offer command line facilities and built-in support for execution in Visual Studio using Gulp or Grunt tasks.
JavaScript
JavaScript is a dynamically interpreted programming language that was standardized in the ECMAScript specification. It is a programming language for the web. Like CSS, JavaScript can be defined as attributes in HTML elements, as script blocks on a page, and in individual files. As with CSS, it is recommended that JavaScript code be stored in separate files to maximize its separation from HTML code, which is contained in individual web pages or application views.
When working with JavaScript in a web application, you typically need to perform a number of tasks:
- Selecting an HTML element and retrieving or updating its value;
- Requesting data from the webAPI;
- Sending a command to the webAPI (and responding to a callback function with its results);
- Performing validation.
These tasks can be done with JavaScript alone, but you can also use many off-the-shelf libraries to make this much easier. One of the first and most popular libraries is jQuery, which is still widely used to simplify these tasks when working with web pages. The jQuery library contains few features for single-page applications, so it’s better to use Angular and React in such scenarios.
