Abstract : Modern websites and web applications tend to rely on extensive JavaScript on the client side to provide rich interactivity. Specifically, returning data or getting a response from a server-side script (or data system) via an asynchronous request without refreshing the page. In this article, you will learn how JavaScript frameworks make it faster and easier to create interactive, responsive websites and web applications.
Introduction : JavaScript is an object-oriented scripting language that has long been used as the client-side scripting interface of choice for web browser applications. JavaScript allows web developers to programmatically work with objects on web pages, providing a platform for manipulating these objects out of thin air. When JavaScript was first introduced, it was often used to provide trivial functionality such as clocks and scrolling text in the browser status bar. Another common feature is the "rollover link", which changes the color of the text or background image when the user's mouse rolls over the object. However, in recent years, Ajax has brought new interactions to network programming, and JavaScript has evolved and become more useful. Before Ajax, any server-side processing or database access required the entire page to be "refreshed" or a new page rendered by the browser. Not only is this slow and frustrating for users, but it's also a waste of bandwidth and resources.
Ajax is asynchronous JavaScript and XML. Although referencing XML is no longer valid, Ajax can respond to data in several other formats besides XML, such as JSON (JavaScript Object Notation). The working principle of Ajax is to submit an HTTP request to the web server in an asynchronous manner, without refreshing or rendering the entire page, only the content of the response. Instead, developers typically use DOM (Document Object Model) operations to modify parts of a web page, and the data returned by the HTTP response will reflect these changes.
What is a JavaScript framework?
JavaScript itself is a very powerful language, and you don't need any additional frameworks to create rich Internet applications (RIA) powered by it. However, working with JavaScript is not an easy task, mainly due to various complications that arise when trying to provide multiple browser support. Like HTML and CSS, different browsers execute JavaScript differently, so making sure your JavaScript code is cross-browser compatible can be a nightmare.
A JavaScript framework or library is actually a set of tools and functions that make it easier to produce cross-browser compatible JavaScript code. Each library has been rigorously tested on the latest versions of many popular web browsers. Therefore, you can be confident that using any of these frameworks, your JavaScript-based RIA will be generally consistent across browsers and platforms.
Browser compatibility issues aside, JavaScript frameworks make it easier to write code to get, traverse, and manipulate DOM elements. Not only do they provide a quick function to get a reference to a DOM element, but they also allow daisy chaining of DOM traversal functions to find parent, child, or sibling elements at any depth. Finally, the framework provides a series of functions that make it easier to manipulate these objects, allowing their content to be changed, added, deleted, or to manipulate the style of the class to affect the appearance of the element.
Another important feature of the JavaScript framework is its better support for event handling. Due to the different implementations between browsers, cross-browser event handling can be a nightmare. Therefore, JavaScript frameworks often wrap browser events and provide a series of useful cross-browser functions to handle them. Some frameworks also provide standardized events that represent keyboard key code series (such as Esc key, Enter key, cursor, etc.).
All these features are very useful and JavaScript frameworks have played an important role in their recent popular Ajax applications. As with other aspects of JavaScript, each web browser tends to support Ajax in a different way, and making Ajax support for all browsers would be a lot of work. Almost all JavaScript frameworks include some form of Ajax library, usually providing Ajax request and response objects, updating DOM elements after evaluating responses, and polling for a specific request.
Typical characteristics of a JavaScript framework
Now let's look at some of the features that most JavaScript frameworks have. These features include:
To better explain these features, I will give an example from one or more of the following JavaScript frameworks: Prototype, jQuery, YUI, ExtJS and MooTools. While the implementation and syntax of each framework are different, the concepts are broadly the same. Each framework has a detailed API reference that you can refer to when deciding how to use the features of those specific libraries.