本人是一枚喜歡探索黑科技的 web 前端，沒事喜歡研究研究框架，了解網絡技術 / 工具等等。最近在研究 saas 和 paas 的時候在知乎專欄有大佬提到了一款在線頁面編輯系統(tǒng)—— ivx ?？吹竭@里在做的大佬估計表示不屑，不就是在線編排 h5 的工具網站嘛，這種東西國內不多得是：135 編輯器、秀米、易點，大同小異都是集成的富文本編輯器，允許你使用封裝好的事件觸發(fā)器、動畫效果、自定義 css 樣式，感覺沒什么技術含量，都是公司的運營人員在使用。當然，簡單的系統(tǒng)根本引不起技術工作者的研究興趣，那么 ivx 的難度可以滿足你對“黑科技”的興趣。
調查了一下 ivx 的技術團隊，還真是來頭不小，是 ih5 團隊（國內非常知名的硬核 h5 編輯器）。ih5 在業(yè)內名氣著實不小，尤其是在設計界，讓無數(shù)設計師不用再到處找前端程序員轉而自己開發(fā)。ivx 正是在 ih5 基礎上進行的大迭代，支持微信小程序、微信 h5、企業(yè)級網站的開發(fā)。進入官網，點擊使用，不用注冊直接跳轉到編輯器頁面…看來對自己的產品很有信息啊，編輯器頁面出現(xiàn)的時候，我的內心是奔潰的。
emmm…androidStudio 是你嗎??？沒事沒事，大概只是看著多而已，隨便點一點，添加點元素進去就好了。添加了，然后呢，怎么綁定事件，怎么讓元素動起來，布局好不習慣啊，想用 flex。還好有視頻教程和文檔，點開發(fā)現(xiàn)這視頻教程也太多了吧，86 個視頻，看日期貌似還在持續(xù)更新…這時候我發(fā)現(xiàn)有數(shù)據(jù)庫和微信登錄？！我有一個大膽的想法：用這個建站豈不是什么都可以自己做，不用再叫個后端和我分錢，嘻嘻。秉承著格物致知（撈更多錢）的精神，我開始了長達 3h 的視頻學習，不學不知道，有很多的技術亮點，感覺看視頻學了個七七八八，開始實踐。接下來用實例給大家介紹一下這個工具的一些基本操作。
首先是對于界面中各個部分的說明，要寄出我的千年老 ps 技術了，各位看官請看下圖：
可視化部分，對象樹最終會渲染到這個部分，如果使用了循環(huán)組件（for）或條件組件（if）則預覽部分會與成品出現(xiàn)一定差異，這個案例由于是數(shù)據(jù)驅動生成的，最終的瀏覽器效果見下圖，組件的具體使用方法下文再說；
前后端對象樹。對于前臺而言，對象樹是頁面、dom、自定義方法 / 函數(shù)、系統(tǒng)（包含一部分 window 對象方法、封裝的路由方法等）、微信對象（用于配置微信分享鏈接縮略圖、獲取用戶位置等）；對于后臺而言，對象樹包括服務（類似一套自定義的數(shù)據(jù)庫操作流程，可定義參數(shù)和返回值，供前臺調用）、數(shù)據(jù)庫（關系型數(shù)據(jù)庫表，每當有數(shù)據(jù)寫入可以在表內查看、手動修改、刪除）、用戶數(shù)據(jù)庫（平臺封裝好的一套用戶表，包括圖形驗證碼校驗，短信注冊，密碼哈希存儲）、商城數(shù)據(jù)庫（封裝好的商城功能套件，有購物車，具有完備信息的商品表，交互函數(shù)等）、微信紅包數(shù)據(jù)庫等；
變量，有文本、數(shù)值、布爾、數(shù)組、對象、二維數(shù)組、對象數(shù)組、時間。這里單獨提變量是因為這也是 web 開發(fā)的基礎，貫穿于前后端；
可用組件，點一下就會在對象樹里添加組件；
舞臺控制，選擇舞臺設備型號及大??；
預覽及發(fā)布控件；
出問題了就對著客服小姐姐（貌似）喊救命，她會很耐心地教你如何使用。
選中前臺 -> 點擊頁面，可以看到右側對象樹中有了頁面，在頁面中添加元素就構成了我們常見的單頁效果。
頁面中的元素包括頁面本身可以綁定事件，如圖：
點擊這個嘆號，讓我們對它進行編輯，這里要強調一下，這個便是低代碼編程的具體實現(xiàn)，用可視化組件代替代碼邏輯：
白色的點表示本行及內部是否啟用，相當于代碼中的 //；
鉤子 / 事件監(jiān)聽條件；
條件判斷組件，中間有封裝好的條件，可以添加并列的 && 以及||邏輯
有這個箭頭的地方可以選中右側對象樹中的組件或變量，并可做進一步的操作，可以做到很復雜的邏輯：
從圖中可以看出可以嵌套 js 語法，結合起來開發(fā)項目，速度簡直要飛起來。不過當項目越來越大，迭代的功能越來越復雜，這些組件看起來可能就沒這么清晰了，還好 ivx 的團隊考慮到了這點，可以將動作事件進行封裝調用：
現(xiàn)在不管是三大前端框架還是微信小程序還是沒流行起來的渲染模板都有利用 for 和 if 渲染 dom 的功能，ivx 的 for 組件同樣可以對數(shù)組數(shù)據(jù)進行渲染。組件所在位置如下圖，for 組件需要填寫數(shù)據(jù)來源，通常為數(shù)組結構，渲染出的結果的次數(shù)也就是數(shù)組的長度。if 組件需要選則條件，如果符合條件就會渲染 if 內的 dom 元素。for 組件中的每一個 item 可以通過當前數(shù)據(jù)與 dom 的屬性相綁定：
各位同學重點來了，與傳統(tǒng)開發(fā)的不同之處便在這里出現(xiàn)，如果你需要搭建數(shù)據(jù)庫存儲用戶的數(shù)據(jù)，那么你需要：買云服務器 /dns-> 搭建后臺 ->webpack 配置打包信息 / 插件 /api-> 打包發(fā)布。你就是再熟練，各種環(huán)境搭建，配置證書，下載工具或插件，參數(shù)配置，再來點針對類似 canvas 圖片源請求的難受的需求配置，這一套下來你不用個 1 小時能搞定？那想必你找不到對象！
ivx 的數(shù)據(jù)庫基本封裝了前端同學能用到的全部功能，先來看一下表的基本結構：
自定義參數(shù)；
將參數(shù)與篩選條件選則對應的規(guī)則相綁定；
將結果返回給參數(shù)以方便獲取。
前臺的事件組里就可以直接使用這些服務來操作數(shù)據(jù)庫啦。
基于云服務的開發(fā)系統(tǒng)，再也不用背著電腦到處跑了，再也不用在家里的電腦里裝各種環(huán)境了，有瀏覽器就能滿足所有的開發(fā)需求；全棧開發(fā)省時省力，2 個人的工作一個人做且速度更快，并且除了使用提供的組件，還可以自己寫組件，寫 js 函數(shù)，調用三方 api 接口，非常靈活；能構建全平臺系統(tǒng)，目前支持小程序和 web，下個版本貌似還支持 app；這套工具的技術采用 react+golang+k8s+docker 架構將組件生成代碼，其最終生成的代碼的健壯性不比一個老師傅弱，不服的可以自己再擼一套代碼版的跑一下比比性能；安全性，不論是接口還是數(shù)據(jù)庫，其安全策略都很完備。在預覽效果時看到回包的明文結構可能還在吐槽安全性，打包發(fā)布后再看看回包都是加密過的信息，收到回包后只有瀏覽器能解密并使用數(shù)據(jù)，不禁感嘆 https 下還做到這樣真的是“安全第一”；有類似 git 的版本管理系統(tǒng)，支持多人開發(fā)和分支管理，對可視化事件備注注釋方便閱讀，當然這個肯定沒有 vscode 里直接能看到差異那種強壯的功能，但在同類產品里確實做的不錯；完善的學習資源，有詳細的開發(fā)文檔，不輸 imooc 的視頻課程，在線客服和技術論壇。
勸退新手的學習難度，正所謂成也蕭何敗也蕭何，其功能的強大注定了使用的難度，在開發(fā)者眼里的優(yōu)點就成了新手眼里的缺點。如果對于程序員來說事半功倍，但對于沒什么基礎的新人沒個幾星期的學習和使用是無法構建大體量、多功能項目的；事件組多了會導致編輯頁面變卡，滾動的時候尤其明顯，點擊選中組件也有一定的延遲，在流暢性方面用戶體驗并不是很好，希望以后可以改進；不同種類項目的代碼不能夠通用，比如小程序的組件無法復制粘貼到 web 項目，這可能和代碼的生成邏輯有關，小程序生成的是對應 wxml、wxss 文件。對比其他前端框架，復用性就被比了下去，比如各種前端框架的 native 版本（react-native/vue-native）和小程序版本（mpvue/melago），代碼基本可以通用。
我從 html->js->jq->node-> 框架 -> 框架衍生組件 -> 表驅動編程 -> 黑科技 -> 頸椎病康復指南，前端的變化日新月異，這些知識是我們安生立命的資本，花費了我們大量的時間，結合我們的學歷和專業(yè)才讓我們在行業(yè)內無法被替代。apaas 產品會否是互聯(lián)網應用的下一個風口，會否改變編程學習的方式是互聯(lián)網人需要考慮的。01 代碼被高級語言替代，可視化編程有可能替代高級語言，這并不使我害怕丟了飯碗，而是會鞭策我不斷學習，一方面了解這種新穎的技術理念另一方面讓我達到 apaas 所不能企及的高度，變得更加不可替代。
