[作品筆記] sketch-builder 雲端原型工具開發筆記(01) - 前端應用軟體領域技術的探索

Contents

為什麼要開發 sketch-builder 雲端原型工具?

2000年以前的web，大致上只有分成java工程師與網頁視覺設計師兩種職務(…不負責任評論)，之後，
前端技術經歷幾次時代更迭後，百家爭鳴的前處理技術直到angular的出現打破現況，
加上react vue的出現才造就大家目前所熟知的現況。

多數的服務都提供web版本，javascript正在統治世界。

這並不是戰語言，是因為隨著智慧型手機，平板等等的普及與PC效能與瀏覽器的日新月異，用戶開始不喜歡安裝任何的應用程式。

現在，大部分你想的到要做的任何事情，就是需要一些小工具來協助的，上網搜尋後面加個term " online"，大部分都能找到別人開發免費或付費讓你使用的線上版工具。

例如

那些處理來的檔案也好，或是完成的項目也好，甚至可能比你自己去找到軟體安裝操作後做的還要更好。
例如下載畫質更好，壓縮更棒，圖片更沒有肉眼上的失真。

再多舉幾個例子好了:

以上的例子因為加入協同技術與雲端，讓web上的應用程式服務比安裝後的應用程式更具備優勢。

回到主題

Q : 為什麼要開發 sketch-builder 雲端原型工具?

Because it’s there.

前面講了這麼多前端世界的現況，開發雲端原型工具也需要花費大量時間，不過也正好這一年來疫情的爆發，假日總是關在家中，趁個機會實踐想法。

這簡述這個主題之前，我們先來看看對岸的大佬們怎麼說:

「可视化搭建系统」——从设计到架构，探索前端领域技术和业务价值
https://zhuanlan.zhihu.com/p/164558106
阿里前端委员会主席圆心：未来前端的机会在哪里？
https://zhuanlan.zhihu.com/p/72325890
20+个可视化搭建工具，一次玩个够
https://blog.csdn.net/liuyan19891230/article/details/110412579
页面可视化搭建工具技术要点
https://blog.csdn.net/VhWfR2u02Q/article/details/89838105
页面可视化搭建工具前生今世
https://zhuanlan.zhihu.com/p/37171897

在這些前輩們的文章中的概念，基本上能夠將code好好的抽離，關注點分離並元件化，想要開發一個線上編輯器不是問題。

今日的前端世界，多虧前仆後繼的巨人們，我們這些後輩才有肩膀能夠墊腳。

現今主流的三大前端框架 Vue React Angular 中，
相信任何一套工具能夠辦到這次開發的需求，
這次挑選較為擅長的 vue 作為實踐的工具。

雲端原型工具主要的參考操作模式為sketch與windows版本的sketch: Lunacy，
也因此將服務命名為sketch-builder。
阿里云IoT Studio 則是另一款我參考的應用，其中的數據綁定等等，
對我都是不錯的臨摹參考。

開發中的網址
sketch-builder 雲端原型工具:
https://mike-zheng.github.io/sketch-builder

雲端原型工具開發筆記系列文