天天看點

飛一樣的編碼,Web開發IDE HBuilder開放下載下傳注冊

HBuilder

是DCloud推出的一款支援HTML5的Web開發IDE。快,是HBuilder的最大優勢,通過完整的文法提示和代碼輸入法、代碼塊等,大幅提升HTML、js、css的開發效率。同時,它還包括最全面的文法庫和浏覽器相容性資料。

從Frontpage、Dreamweaver、UE,到Sublime Text和JetBrains的WebStorm,Web程式設計的IDE已經更換了幾批。HBuilder是DCloud(數字天堂)推出一款支援HTML5的Web開發IDE。“快,是HBuilder的最大優勢,通過完整的文法提示和代碼輸入法、代碼塊及很多配套,HBuilder能大幅提升HTML、js、css的開發效率。”問到HBuilder的優勢時,DCloud CEO王安表示。

飛一樣的編碼,Web開發IDE HBuilder開放下載下傳注冊

在HBuilder裡預置了一個hello HBuilder的工程,使用者敲這幾十行代碼後會發現,HBuilder比其他開發工具至少快5倍。“最全的浏覽器相容性資料、開發手機App等很多特點也都是HBuilder強于競品的地方”,王安表示。

以“快”為核心的HBuilder,引入了“快捷鍵文法”的概念,巧妙地解決了困擾許多開發者的快捷鍵過多而記不住的問題。開發者隻需要記住幾條文法,就可以快速實作跳轉、轉義和其他操作。比如alt+[是跳轉到括号,alt+’是跳轉到引号,alt+字母是跳轉菜單項,而alt+左則是跳轉到上一次光标位置。而Ctrl則是各種操作,比如ctrl+d就是删除一行。shift則是轉義,比如shift+回車是

,shift+空格是

另外,HBuilder的生态系統可能是最豐富的Web IDE生态系統,因為它同時相容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術都有Eclipse插件。

HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫,它基于Eclipse,是以順其自然地相容了Eclipse的插件。但因為Java效率太低,是以用C寫了啟動器。HBuilder柔和的綠色界面設計需要動态調節螢幕亮度,它還支援手機資料線真機聯調,而這些都是用C寫的。

HBuilder很多界面,比如使用者資訊界面都是使用Web技術來做的,既漂亮,開發起來又快。最後,代碼塊、快捷配置指令腳本,都是用Ruby開發的。

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

最大的難題:js解析

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

DCloud在開發HBuilder的過程中遇到了不少難題,比如 web文法庫和浏覽器相容庫的建立,從W3C的HTML、JavaScript、CSS的正式标準和推薦标準,到ECMAScript中浏覽器支援的部分,還有各大浏覽器的擴充文法,Webkit、moz、ms的HTML、JS、CSS, 想集齊這些文法,不僅僅是工作量的問題。而每個文法在每個浏覽器的每個版本上是否能運作,得到這個資料也是前人未能突破的挑戰。還好這個難題目前已經被解決。

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

目前其他開發工具都不能有效的識别代碼裡的js對象,要不沒有提示,要不全提示,甚至有的随意提示使用者輸入過的詞。而DCloud在識别使用者寫的js方面下了很大的功夫,比如

var e = document.getElementById("e")

,e或許是一個div也可能是input,那麼e設定屬性時,就需要準确識别e到底是什麼,才能給出有效精準的提示。

“我們已經克服了很多挑戰,即使很複雜的寫法

document.querySelector("div:not(#a1) .class1")

,HBuilder也知道這個對象到底是什麼”。

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

目前Web開發領域格局

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

飛一樣的編碼,Web開發IDE HBuilder開放下載下傳注冊