(go) hex--desktop applications based on HTML5 and node. js

This article was reproduced from: http://techblog.youdao.com/?p=685

Summary: HeX, a cross-platform solution that allows you to develop desktop applications using front-end technology (HTML,CSS,JAVASCRIPT). is a new choice for you to develop desktop applications that address the tedious UI and interactive development of traditional desktop application development, making it simple and efficient. Especially suitable for heavy UI, re-interactive desktop application software.

Please pay attention to http://hex.youdao.com or Weibo @youdao_hex.

I. Background of the project

II. Advantages of developing desktop applications with hex

Third, how to start a desktop application with hex

I. Background of the project

In recent years, mobile applications and web2.0, in contrast, traditional desktop application development appears relatively deserted (including the field of technical talent successor), but in some scenarios, it still has its irreplaceable advantages. In the exploration we tried a new approach, and named it hex, to apply the technical advantages of HTML5 and node. js to desktop application development, making work simple and efficient.

Around 2012, a research and development engineer (nicknamed 6 elder brother, proficient in web front-end and desktop application development), has participated in two traditional desktop application UI revision work (Youdao cloud notes and Youdao dictionary), the task is to the software interface in some areas of the browser rendering engine, the IE kernel replaced by WebKit, In this process, there is a strong desire: the entire software interface rendering to the browser engine to complete, so that the UI and interactive parts can be implemented with the front-end technology, then the development process will be much simpler, and the client developer's main focus on business logic, why not!

To this end, we have done a lot of research, after repeated attempts to finalize the integration of chromium and node. js, to solve the desktop application development encountered a lot of tedious UI and interactive development work. During the discovery of a similar open source project Node-webkit, the survey concludes that it is not yet available for formal projects, so, in June 2012, we formally set up a person development team (indeed small enough), after 3 months of efforts, eventually small, has been applied to Youdao dictionary the latest version.

Briefly describe the reasons for choosing Chromium and node. JS, and also thank them here.

Chromium was chosen because of its excellent support for HTML5, its embedded V8 engine, one of the most efficient JavaScript scripting engines in the industry, and its project open source, dedicated community and team maintenance, as a UI rendering engine, it is the perfect choice, experience, You can try the Google Chrome browser, basically the same.

The choice of node. JS is due to the ability to develop a desktop application, where local resource operations are a must, JavaScript is powerless, and node. JS solves the problem, which makes JavaScript operations on-premises resources no hindrance. On the other hand, the node. JS Core also uses the V8 engine, making it more logical to integrate with chromium.

II. Advantages of developing desktop applications with hex

HTML5 These years is very fire, in the mature product application is very few, by the browser and platform of the software/hardware performance problems limit, the overall feeling is always difficult to stretch (with not practical), specific reasons can find a lot of online, here is a mobile web app related, the Chinese and English version, recommended time to see:

English version: http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

Chinese version: http://www.cnblogs.com/codemood/p/3213459.html

Nonetheless, HTML5 's strengths remain clear, and the popularity is increasing year-over--and we are confident of its future. Good things, are worth our initiative to try, Hex does one thing, is to apply it to desktop application development in advance, without worrying about its compatibility and platform performance problems (PC performance surplus).

What are the advantages of using HTML5 to develop desktop applications? Here are a few items to be listed:

1. Precision-Restore UI design. Now the client software UI design with native way to realize the cost is more and more high, for HTML5 is very easy, the subsequent maintenance is very friendly;

2. User experience. If you don't know what HTML5 can do, look at chrome experiments (http://www.chromeexperiments.com/);

3. Development and debugging convenience. Hex retains the developer tools (Chrome Developer tools), making it as easy as web development during the development and debugging process.

4. Learning costs. Compared to traditional desktop application development, the cost of getting started with web technology is noticeably lower, and you don't have to worry about team members leaving and looking for a follow-on development effort.

Desktop application development, local resource operational capabilities are essential, node. JS provides a rich set of self-contained APIs, so that you can not encapsulate the C + + implementation, and in the hex environment of the HTML page directly use, such as: Local file system operations, binary data processing, easy to create sub-processes, etc., See node. js API DOCS.

The benefits of using node. js in Desktop app development (part of the effort from hex):

1. Using JavaScript to manipulate local resources, you do not need to compile, that is, write-to-use;

2. Page interaction logic, form behavior operations, communication with C + +, with JavaScript can be done, to develop a desktop application, you do not have to switch between languages;

3. node. JS has a rich third extension that you can use directly without starting from scratch;

4. inherited from node. JS's excellent scalability, and the COMMONJS specifications it follows, code management is also easy and easy to control.

From a technical point of view, to choose a new thing, we are cautious, need to undergo adequate research, consider a number of factors, such as: performance, user experience, development efficiency, whether the team in maintenance, documentation is complete, whether open source (if it is commercial use, but also consider its open source agreement) and so on.

And how does hex behave in these areas as a new choice for desktop application development? Here are a few things to add:

1. Performance and experience, the base of hex is integrated by chromium and node. JS, the performance of the two is not affected, experience, you can refer to Google Chrome browser, basic consistency;

2. Development efficiency, if you have a web front-end development experience, now only ask you to support the latest version of the Chrome browser, how do you feel? Sleep can laugh awake things, Hex did it;

3. Hex will open source, please pay attention to http://hex.youdao.com and @yoduao_hex

A kind of thing, can only solve the demand, hex is not omnipotent, also has its suitable use scene, the most suitable for heavy UI, re-interactive desktop applications, such as the upcoming New Youdao dictionary (billion-level desktop application software) Beta version, is the use of hex as its interface solution.

Third, how to start a desktop application with hex

There are two ways to develop desktop applications using hex:

1. Directly based on hex development, for Web front-end developers, do not require desktop application development experience;

2. Introduced into the desktop project as a module, for the traditional desktop application developers, for a certain history of the project, or only in the interface to support the local area of the project.

Either way, the development process is simple, here is the first way, starting from scratch, together to make a Hello word, as follows:

1, download hex binary package (http://codown.youdao.com/hex/hex_1453_web_develop_windows.zip), unzip to local, open after directory structure as shown, where "Hexclient.exe" is the main program file, double-click to run hex, "Manifest.json" is hex configuration file, can configure the entry file, window initial size, location and other information

2. Create a Test Catalog "test" to write the Hello Word program, while creating a new HTML, JS file in it, as shown in

3, modify the Manifest.json file, the entry is changed to Test/index.html, as shown in

4, double-click Hexclient.exe, Run, one second after the interface from "..." to "Hello word! "As shown, so far, a simple desktop application is done.

Official product case: currently used in the new Youdao dictionary (billion-level desktop client software) Beta version, the entire interface and interaction is based on the hex implementation, welcome to download experience: http://download.ydstatic.com/cidian/static/6.0/ 20130812/youdaodict.exe

Learn more about hex welcome Weibo @youdao_hex or visit http://hex.youdao.com

(go) hex--desktop applications based on HTML5 and node. js