Dojo framework: misunderstanding and Reality [Reproduced]

With the popularity of Ajax technology, more and more web applications use Ajax technology to improve user experience. An important advantage of using Ajax technology is that it does not require additional browser plug-ins. You only need to use the native API of the browser and use JavaScript to perform operations. Two major problems encountered when using native APIs are browser compatibility and programming complexity brought about by the underlying a-Pi interface. The implementation of the same function varies with browsers. If an application supports different browsers, developers need to add a lot of browser detection or sniffing code. For example, the same event binding function uses attachevent on IE, and addeventlistener on other browsers. In addition to compatibility issues, the native API interfaces provided by the browser are generally suitable for fine-grained operations. When you need to complete some relatively complex operations, using the native API will make the code cumbersome. Take a DOM query as an example: in the current document tree, find the direct subnodes of all given labels of nodes with a given ID. For such a query, if you use the native dom api, you need to use getelementbyid to find the node, and use childnodes to obtain the subnode list and compare the node label names. The number of required codes is relatively large.

The emergence of the Javascript framework aims to solve these two major problems, and different JavaScript frameworks also provide additional values. Currently, many JavaScript frameworks are available, and more than a dozen are popular. These popular JavaScript frameworks include jquery, dojo, Yui, mootools, prototype, ext JS, and Google closure. These different frameworks have different advantages and disadvantages, and have different application scenarios and scopes. Due to my work, I have the most use of the dojo framework and have some knowledge about other frameworks. This article aims to clarify some misunderstandings about the dojo framework and help developers select the appropriate framework.

Before getting started, we will briefly introduce the basic structure of the dojo framework. The dojo framework consists of four parts: the Basic dojo library, core library, dijit, and extension library. The basic library contains the most basic functions. The core library is the extension of the basic library, dijit is the user interface library, and the extension library is a variety of extension components.

Meet Basic Ajax application development needs

Like other frameworks, Dojo tries to meet the most basic requirements in Ajax application development. These basic requirements include the browser compatibility and the interface granularity of native APIs mentioned above, as well as some typical application scenarios. Specifically, it should include the following functional sets: javascript language enhancement, XMLHttpRequest encapsulation, Dom query and operation, and event processing. Browser compatibility shows that these feature sets have the same effect on different browsers.

The dojo framework provides a wide range of support for these feature sets. In JavaScript language enhancements, there are many enhancements to numbers, strings, date types, arrays, and Javascript methods. In terms of I/O transmission, besides common XMLHttpRequest, IFRAME and <SCRIPT> are also supported. Dojo. query provides Dom query and operation capabilities similar to jquery. Dojo. Connect can be used not only to bind events on DOM elements, but also to execute Javascript methods.

The basic functions mentioned above appear in the basic library and core library of dojo. The compressed package size is about 80 KB, which does not significantly affect the code volume of the entire page.

Object-oriented JavaScript and functional Javascript

Object-Oriented programming is a popular programming method. This programming idea is also supported by mainstream programming languages, including Java, C ++, and C. Many developers are used to analyzing and designing classes and objects in the object-oriented programming ideology, and then implementing them using corresponding programming languages. The concepts of encapsulation, inheritance, and Polymorphism in object-oriented programming are also suitable for analyzing and abstracting real problem domains. In some Ajax applications, the logic of the front-end is complicated and some business logic needs to be implemented. The amount of code required is no longer at the level of several simple methods, but complete modeling, analysis, and design are required. Many developers naturally use object-oriented programming to analyze and design the front-end of Ajax applications. However, JavaScript is not an object-oriented programming language. It is different from the traditional object-oriented programming language in many aspects. Therefore, impedance mismatch may occur during the process from analysis and design to implementation. There are two solutions to this mismatch: one is to change the analysis and design ideas, the other is to enhance the object-oriented capabilities of the Javascript language.

The javascript language is designed with some shadows of object-oriented programming languages, such as the new operator and the Inheritance mechanism that can be implemented through prototype. Using these language features of JavaScript, you can achieve complete object-oriented capabilities. The dojo framework provides a complete set of object-oriented capabilities. The most typical method is to declare a class through the dojo. Declare () method, and support multi-inheritance. With dojo, you can quickly write out typical object-oriented examples that support multi-inheritance, such:

dojo.declare("Human", null, {  think : function() {}});dojo.declare("Machine", null, {  work : function() {}});dojo.declare("Robot", [Machine, Human], {  turingTest : function() {}});

with the support of object-oriented JavaScript, Dojo solves the impedance mismatch problem to some extent. However, when fully using the object-oriented JavaScript capabilities provided by dojo, pay attention to the risks that may arise. The first thing to understand is that a function is a first-class citizen in JavaScript and can be used as an object attribute, as well as function parameters and return values. The closure in Javascript is also a very powerful concept. If you use it properly, you can write simple and powerful programs. If Javascript is used completely in the object-oriented method abstracted by dojo, some of the good features of the Javascript language are lost. Therefore, developers are not recommended to go deep into the world of object-oriented Javascript in Dojo from the very beginning. Instead, they should first learn more about the characteristics of some JavaScript languages. For example, understanding the meaning of prototype chain, this, new operator, execution context, and scope chain in JavaScript. Otherwise, once a mindset is formed, you may not be able to understand other frameworks or library implementation methods. After all, not all libraries are implemented in the form of dojo. Secondly, we need to realize the potential impact on performance. Developers familiar with Java may be familiar with using many subdivided Java classes during design. These classes complete specific tasks through fine collaboration. This is reasonable for Java. For the Javascript language running in the browser, too many objects and messages will have a certain impact on the performance, and the performance is an important factor to be concerned in Ajax applications.

The idea of object-oriented programming is a good thing to enter the front-end development field of Web applications. It allows the majority of front-end developers to design and develop Web Front-ends in a way they are familiar. However, the Javascript language and the browser operating platform must be properly used, but the future prospects are optimistic. Javascript is one of the dialects of ecmascript. The current implementations basically follow the ecmascript third-edition specifications. The ecmascript Fifth Edition specification has been released. It is worth mentioning that the fourth version of ecmascript tries to introduce the concepts of classes, packages, and namespaces in Javascript, but it is abandoned for various reasons. These ideas of the fourth edition form a new developing ecmascript Harmony project. According to the speed of the standardization process, in the short term, the Javascript language does not have the structure of the traditional object-oriented programming language class, while the structure of the package and namespace takes a longer time. But this day will come. With the emergence of new Javascript Engines such as V8, chakra, squirrelfish, and carakan, the execution performance of the Javascript language itself will be greatly improved. These two improvements make it more natural to write javascript programs with object-oriented thinking.

Dojo is too complex.

Dojo is a huge and complex library that contains hundreds of modules. Each module has its own source code, test cases, demonstration pages, and documentation. From this perspective, dojo is more complex than other frameworks such as jquery. For Ajax applications, there are two common styles: Ajax lite and Ajax deluxe. For Ajax Lite-style Ajax applications, jquery and Other lightweight frameworks are good choices for convenient page modification. Using only the basic dojo library is also a good choice. For Ajax deluxe-style applications, Dojo can reflect its value. When developing complex Ajax applications, a complete set of user interface component libraries is very necessary, which can greatly save developers' time. At this level, dojo and jquery adopt different practices. Jquery is very small and flexible, and has very few concepts exposed to developers. $. CSS selector and method cascade are almost all. The Community has also contributed a lot to jquery plug-ins and enriched jquery's functions. This is a bottom-up approach. First, we have a solid foundation and then rely on the power of the Community to grow and grow. The opposite is true for dojo. Many modules have been integrated in Dojo to meet various requirements. These modules reflect the same design philosophy. Taking the relationship between user interfaces and data as an example, Dojo defines the dojo. data API to abstract the access interfaces of heterogeneous data sources. All user interface components that need to access data use this API to access data. The problem with this approach is that there are too many concepts exposed to developers, and it is very difficult for developers to complete a simple task. However, this approach also facilitates the maintenance and expansion of the framework itself. This complexity is sometimes necessary when building a complex Ajax application, especially when the team works. For a complicated problem, a slightly complicated design is always required to ensure the maintainability of the solution. Instead of processing it by yourself, it is better to hand it over to a well-designed framework.

For the development of Ajax Lite-style Ajax applications, you can also start with the basic dojo library. Consider the dijit library when necessary.

Dojo is not easy to use, and the learning curve is steep.

As mentioned above, the complexity of dojo makes it difficult for developers to get started in a short period of time. Developers need to understand and accept too many concepts. The dojo framework itself provides two types of programming styles, namely the object-oriented and functional methods mentioned above. The basic and core libraries of dojo use a lot of functional styles, such as Dojo. Connect (), dojo. xhrget, dojo. Declare (), and dojo. Query. Developers can use these methods as tools. For the basic dojo library and core library, you only need to view the relevant API instructions to know the parameters, return values, and notes of each method. The dijit library uses an object-oriented style. The dijit library contains some user interface components that encapsulate the relevant logic. Developers need to use the new operator to create component instances on the page. This method is easy to understand for developers familiar with Java graphical interface component libraries, such as SWT/jface and swing. The combination of the two programming styles will cause some problems for developers. In this regard, jquery UI is more desirable. To create a dialog box in dijit and open it, follow these steps:

var dialogNode = dojo.query("#dialogNode")[0];var dialog = new dijit.Dialog({});dialog.open();

In jquery UI, the following methods are used:

$("#dialogNode").dialog({autoOpen : false});$("#dialogNode").dialog("open");

The programming style of jquery UI is similar to that of jquery, and all functions are used. This consistency is more suitable for developers.

User Interface Components

In the front-end interface of Ajax applications, the support of user interface components is indispensable. The HTML language provides some basic elements, including common Div, span, and form elements. These basic elements can be used to construct a complex user interface. However, compared with components that can be used during desktop application development, these elements of the HTML language are too basic and cannot be developed quickly and efficiently. For example, some common interface components, such as menus, dialog boxes, tree controls, table controls, date and time selectors, and rich text editors, must be implemented by developers themselves, it is not only time-consuming, but also hard to guarantee the quality. In this case, the dojo framework provides its own user interface component programming model dijit and some high-quality and customizable standard user interface components. By using and customizing these standard components, you can quickly build an application interface. Developers can also develop the specific components required for their own applications based on the programming model.

From this perspective, the dojo framework is intended to provide a User Interface Component Library similar to desktop development, which is suitable for use in integrated development environments. Developers can drag and drop components to add them and set their attributes. This method helps developers build complex Ajax applications faster. The advantage of dijit library is that it provides a well-designed web application front-end component programming model and many Reference implementations based on this model. This laid the foundation for creating a good component sharing platform. In fact, there are already many components contributed by the Community in the dojo extension library. Some advantages of this programming model are:

• Complete lifecycle management. From creation to destruction, developers are allowed to customize and expand at different stages of the lifecycle.
• Quickly create a user interface based on HTML templates. You can bind DOM elements and events in a declarative manner in the template.
• Unified component interfaces, including property settings, retrieval, and event binding.
• Comprehensive theme support and customizable component appearance.

From the perspective of front-end developers, if componentization of user interfaces is a necessary design consideration, dijit is a better starting point.

Dojo has poor performance.

For Web applications, performance is a very important factor. Since the Javascript library is an essential part of AJAX application development, performance differences will become an important factor in choice. The knowledge of the dojo framework is generally slow. In fact, there are many factors that affect the performance of Web applications, including the number of HTTP requests, the size of the Request Response content, the execution time of JavaScript code, the la s of page elements, and the number of times of arrangement. It is biased to blame the Javascript library for the slow page speed.

A common view of the dojo library is that the dojo library is too large to load a large number of resource files, resulting in slow page loading. Indeed, compared with JavaScript libraries such as jquery and prototype, the dojo library distribution package is too large. The distribution package of dojo 1.5 is 2 m, while the size of jquery 1.4.4 after compression is only 26 K. However, their functions are different. The dojo Library provides more functions and contains more code. The problem is that the development environment and deployment environment are different. For jquery, the development environment and deployment environment are the same. You only need to copy a single Javascript file. Dojo is not that simple, and the missing steps are the build process.

Dojo adopts a modular design, which contains many modules distributed in the basic dojo library, core library, dijit library, and extension library. You can use dojo. require to declare the modules to be loaded on the page. This loading process will need to download the required JavaScript files from the server, resulting in excessive HTTP requests at runtime. The dojo build system will package JavaScript files from different modules in one file. You only need to reference a single packaged Javascript file on the page. To use the dojo build process, you need to download the dojo SDK and add a build file under the utils/buildscripts/profiles directory, such as mydojo. profile. js. Declare the required modules in this file, for example:

dependencies = {     layers: [        {            name: "dojo.js",           dependencies: [                 "dijit.layout.BorderContainer",                  "dijit.layout.ContentPane",                 "dojox.layout.ExpandoPane",                 "dojox.image.Lightbox"            ]        }     ],     prefixes: [         [ "dijit", "../dijit" ],         [ "dojox", "../dojox" ]     ] } 

Run

build profile=myDojo 

Action = release: you can start the build process. Finally, under the release directory, you can directly copy it to the dojo library of the deployment environment. The construction process of dojo uses JavaScript code running on Rhino, which can be well integrated with Apache ant. You can also use other graphical building tools, such as Dojo toolbox.

References

• Dojo campus documentation
• Official website of dojo
• Advanced tutorial on AJAX application development using dojo
• Dojo Chinese Blog

Dojo framework: misunderstanding and Reality [Reproduced]