現在大家對軟體的顏值要求不斷上升。因此，最近幾年一直使用Electron開發一些對UI/UX高要求的程式，比如SLiMTAB和ChessGameDesigner。
說老實話，Web-based UI真的讓排版變很簡單，尤其你家UI/UX人員還有機會學會這些東西，幫你弄出Layout。甚至還有很多動態UI套件可以直接使用。
我們來看第一個例子SLiMTAB：
中間樂譜就用SVG畫出來的！有夠方便，放大縮小功能天生支援，還能把樂譜匯出成PDF，這也是我用javascript寫出的第一支程式。
可是到了這個，可能我太習慣寫Graphics程式，Three.js用起來就很彆扭，做一些特別的事情還是得懂點Graphics API，有時候感覺自己寫比較快..
寫一寫，我就開始想：
- 程式散亂一地，但程式太小根本不想用Framework
- 互動性太高的程式(Realtime)，也不一定適合用Framework
- Typescript是我最喜歡的程式語言，但是遇到一些沒提供prototype的lib很頭痛，有時候會用很髒的方法支援
- 還是要把前後端放在心上，跟其他語言整合不太方便。
- node_modules比本肥宅還胖
恐怕我有強迫症，無法接受自己寫的程式體積遠小於使用的library，還有我也不怎麼會寫javascript。最近網路上看到一個很不錯的Project叫做Ultralight，他整個把UI邏輯分開了，只要實作自己的Renderer等元件就能嵌入到你的程式，是控制狂(Control Freak)最喜歡的那種函數庫。
下載SDK之後會發現這個東西異常的好用！弄一弄很快就能在自己的OpenGL+Imgui程式嵌入網頁了(爽拉。把網頁畫進貼圖顯示。
與其說他是UI Engine，他像是完整的網頁引擎還支援Javascript。現階段有一些簡單的C++/Javascript交互可以用。
只不過要達成上面的嵌入有個點要注意 - Default Graphics Driver會用GLFW創OpenGL Context，直接照抄範例他會跟你的GLFW打架，再來就是Resource ID也不能互通(想Shared Context要改內部程式)，也就是畫好之後你得用他的Bitmap object讀出來再上傳到Context，很沒效率。也就是我們得實作自己的driver即便他原本就是用OpenGL...不過這東西抄一抄就好了
具體作法的虛擬碼如下：
- 下載這份code還有其對應header
- 準備流程如下
using namespace ultralight;
auto &platform = Platform::instance();
GPUDriverGL driver(1.0f);platform.set_config(ul::Config());
// 這裡放你的driver
platform.set_gpu_driver(&driver);
platform.set_font_loader(ul::DefaultFontLoader());renderer = Renderer::Create();
view = renderer->CreateView(800, 600, false);
view->LoadURL("https://stackoverflow.com");
3. 繪圖流程
就這麼簡單，至於互動功能再把輸入補進去即可!
至於如何跟JS互動，可以去看SDK裡面提供的Tutorial。有個Browser範例，連著UI一起做出來(TAB功能也是HTML+JS+CSS做的)
我相信這麼好用的東西以後一定會有其他binding，pybind11應該能讓他很快支援python平台，如果有天python可以結合網頁UI就真的圓滿了!
