HBuilder：最快的Web開發IDE

發表時間：2014-4-22

發布人：葵宇科技

浏覽次數：23

這裡給大家介紹一個(gè)個(gè)人認為最好用的web開發工具：Hbuilder。

HBuilder是DCloud推出的一款支持HTML5的Web開發IDE。快，是HBuilder的最大優勢，通(tōng)過完整的語法提示和(hé)代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。同時，它還包括最全面的語法庫和(hé)浏覽器(qì)兼容性數據。

從Frontpage、Dreamweaver、UE，到Sublime Text和(hé)JetBrains的WebStorm，Web編程的IDE已經更換了幾批。HBuilder是DCloud（數字天堂）推出一款支持HTML5的Web開發IDE。“快，是HBuilder的最大優勢，通(tōng)過完整的語法提示和(hé)代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML、js、css的開發效率。”問(wèn)到HBuilder的優勢時，DCloud CEO王安表示。

在HBuilder裡預置了一個(gè)hello HBuilder的工程，用戶敲這幾十行代碼後會發現，HBuilder比其他開發工具至少(shǎo)快5倍。“最全的浏覽器(qì)兼容性數據、開發手機App等很多特點也都是HBuilder強于競品的地方”，王安表示。

以“快”為核心的HBuilder，引入了“快捷鍵語法”的概念，巧妙地解決了困擾許多開發者的快捷鍵過多而記不住的問(wèn)題。開發者隻需要記住幾條語法，就可(kě)以快速實現跳轉、轉義和(hé)其他操作。比如(rú)alt+[是跳轉到括号，alt+’是跳轉到引号，alt+字母是跳轉菜單項，而alt+左則是跳轉到上一次光标位置。而Ctrl則是各種操作，比如(rú)ctrl+d就是删除一行。shift則是轉義，比如(rú)shift+回車(chē)是<br/>，shift+空格是 。

另外，HBuilder的生态系統可(kě)能是最豐富的Web IDE生态系統，因為它同時兼容Eclipse插件和(hé)Ruby Bundle。SVN、git、ftp、PHP、less等各種技術(shù)都有Eclipse插件。

HBuilder的編寫用到了Java、C、Web和(hé)Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。但因為Java效率太低，所以用C寫了啟動(dòng)器(qì)。HBuilder柔和(hé)的綠色界面設計需要動(dòng)态調節屏幕亮(liàng)度，它還支持手機數據線真機聯調，而這些都是用C寫的。

HBuilder很多界面，比如(rú)用戶信息界面都是使用Web技術(shù)來做的，既漂亮(liàng)，開發起來又快。最後，代碼塊、快捷配置命令腳本，都是用Ruby開發的。

“這4種技術(shù)各有各的用途，我們團隊内部也靈活運用，HBuilder的架構支持不同的技術(shù)互相融合通(tōng)信。至于我們的技術(shù)選型原則，首先滿足用戶需求，然後我們内部用什麼技術(shù)能更快完成就會選什麼技術(shù)”，王安解釋道。

最大的難題：js解析

HBuilder第一個(gè)版本發布到現在，DCloud以每周一版的速度已經發布了20多個(gè)版本。主要更新包括支持邊看邊改、插件安裝、App打包平台開放、代碼塊自定義開放。“但是最主要的工作還是在努力把亮(liàng)點做到極緻，從第一個(gè)版本發布，我們能提升一倍的web開發效率，到現在可(kě)以提升5倍”王安說道。

DCloud在開發HBuilder的過程中(zhōng)遇到了不少(shǎo)難題，比如(rú) web語法庫和(hé)浏覽器(qì)兼容庫的建立，從W3C的HTML、JavaScript、CSS的正式标準和(hé)推薦标準，到ECMAScript中(zhōng)浏覽器(qì)支持的部分，還有各大浏覽器(qì)的擴展語法，Webkit、moz、ms的HTML、JS、CSS，想集齊這些語法，不僅僅是工作量的問(wèn)題。而每個(gè)語法在每個(gè)浏覽器(qì)的每個(gè)版本上是否能運行，得到這個(gè)數據也是前人未能突破的挑戰。還好這個(gè)難題目前已經被解決。

“當前困擾我們最大的難題還是js解析”王安坦言道。

目前其他開發工具都不能有效的識别代碼裡的js對象，要不沒有提示，要不全提示，甚至有的随意提示用戶輸入過的詞。而DCloud在識别用戶寫的js方面下(xià)了很大的功夫，比如(rú)var e = document.getElementById("e")，e或許是一個(gè)div也可(kě)能是input，那麼e設置屬性時，就需要準确識别e到底是什麼，才能給出有效精準的提示。

“我們已經克服了很多挑戰，即使很複雜的寫法document.querySelector("div:not(#a1) .class1")，HBuilder也知道這個(gè)對象到底是什麼”。

當然把精準識别做到極緻，必然帶來一個(gè)煩惱，就是性能下(xià)降。當用戶快速敲代碼時，無法接受延遲提示，也就是說，複雜的識别運算要在毫秒級完成，這種挑戰非常大。為此需要不停的優化算法甚至重構。“目前我們還在路(lù)上艱難前行，但我們相信終究會克服這個(gè)挑戰，屆時開發者們将得到又快又準的提示，而我們也給競品鑄造了難以超越的壁壘”，王安表示。

目前Web開發領域格局

目前主流的前端開發工具有Sublime為代表的文(wén)本編輯器(qì)，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設計或做了特殊優化的，隻有HBuilder、Webstorm和(hé)Brackets。從用戶群和(hé)優缺點角度，主流的開發工具總結如(rú)下(xià)表（僅收集小部分開發者的意見，如(rú)對工具有更多看法，歡迎評論）：