使用ivx開發web全棧項目 初探（一）

1、前言

本人是一枚喜歡探索黑科技的web前端，沒事喜歡研究研究框架，瞭解網絡技術/工具等等。最近在研究saas和paas的時候在知乎專欄有大佬提到了一款在線頁面編輯系統——ivx。看到這裏在作的大佬估計表示不屑，不就是在線編排h5的工具網站嘛，這種東西國內很少得是：135編輯器、秀米、易點，大同小異都是集成的富文本編輯器，容許你使用封裝好的事件觸發器、動畫效果、自定義css樣式，感受沒什麼技術含量，都是公司的運營人員在使用。固然，簡單的系統根本引不起技術工做者的研究興趣，那麼ivx的難度能夠知足你對「黑科技」的興趣。

2、工具簡介

調查了一下ivx的技術團隊，還真是來頭不小，是ih5團隊（國內很是知名的硬核h5編輯器）。ih5在業內名氣着實不小，尤爲是在設計界，讓無數設計師不用再處處找前端程序員轉而本身開發。ivx正是在ih5基礎上進行的大迭代，支持微信小程序、微信h五、企業級網站的開發。進入官網，點擊使用，不用註冊直接跳轉到編輯器頁面...看來對本身的產品頗有信息啊，編輯器頁面出現的時候，個人心裏是奔潰的。

3、初體驗

emmm...androidStudio是你嗎😌？沒事沒事，大概只是看着多而已，隨便點一點，添加點元素進去就行了。添加了，而後呢，怎麼綁定事件，怎麼讓元素動起來，佈局好不習慣啊，想用flex。還好有視頻教程和文檔，點開發現這視頻教程也太多了吧，86個視頻，看日期貌似還在持續更新...這時候我發現有數據庫和微信登陸？！我有一個大膽的想法：用這個建站豈不是什麼均可以本身作，不用再叫個後端和我分錢，嘻嘻。秉承着格物致知（撈更多錢）的精神，我開始了長達3h的視頻學習，不學不知道，有不少的技術亮點，感受看視頻學了個七七八八，開始實踐。接下來用實例給你們介紹一下這個工具的一些基本操做。

4、開始開發

（一）界面模塊說明

首先是對於界面中各個部分的說明，要寄出個人千年老ps技術了，各位看官請看下圖：

1. 可視化部分，對象樹最終會渲染到這個部分，若是使用了循環組件（for）或條件組件（if）則預覽部分會與成品出現必定差別，這個案例因爲是數據驅動生成的，最終的瀏覽器效果是這樣

   

   組件的具體使用方法下文再說；
2. 先後端對象樹
   • 對於前臺而言，對象樹是頁面、dom、自定義方法/函數、系統（包含一部分window對象方法、封裝的路由方法等）、微信對象（用於配置微信分享連接縮略圖、獲取用戶位置等）；
   • 對於後臺而言，對象樹包括服務（相似一套自定義的數據庫操做流程，可定義參數和返回值，供前臺調用）、數據庫（關係型數據庫表，每當有數據寫入能夠在表內查看、手動修改、刪除）、用戶數據庫（平臺封裝好的一套用戶表，包括圖形驗證碼校驗，短信註冊，密碼哈希存儲）、商城數據庫（封裝好的商城功能套件，有購物車，具備完備信息的商品表，交互函數等）、微信紅包數據庫等；
3. 變量，有文本、數值、布爾、數組、對象、二維數組、對象數組、時間。這裏單獨提變量是由於這也是web開發的基礎，貫穿於先後端；
4. 可用組件，點一下就會在對象樹裏添加組件；
5. 舞臺控制，選擇舞臺設備型號及大小；
6. 預覽及發佈控件；
7. 出問題了就對着客服小姐姐（貌似）喊救命，她會很耐心地教你如何使用。

（二）開始開發——基本操做

選中前臺->點擊頁面，能夠看到右側對象樹中有了頁面，在頁面中添加元素就構成了咱們常見的單頁效果。

頁面中的元素包括頁面自己能夠綁定事件，如圖：

點擊這個歎號，讓咱們對它進行編輯，這裏要強調一下，這個即是低代碼編程的具體實現，用可視化組件代替代碼邏輯

1. 白色的點表示本行及內部是否啓用，至關於代碼中的//；
2. 鉤子/事件監聽條件；
3. 條件判斷組件，中間有封裝好的條件，能夠添加並列的&&以及||邏輯
4. 有這個箭頭的地方能夠選中右側對象樹中的組件或變量，並可作進一步的操做，能夠作到很複雜的邏輯：

   

   從圖中能夠看出能夠嵌套js語法，結合起來開發項目，速度簡直要飛起來。不過當項目愈來愈大，迭代的功能愈來愈複雜，這些組件看起來可能就沒這麼清晰了，還好ivx的團隊考慮到了這點，能夠將動做事件進行封裝調用：

   

   

（三）開始開發——循環組件/條件組件

如今無論是三大前端框架仍是微信小程序仍是沒流行起來的渲染模板都有利用for和if渲染dom的功能，ivx的for組件一樣能夠對數組數據進行渲染。組件所在位置以下圖，for組件須要填寫數據來源，一般爲數組結構，渲染出的結果的次數也就是數組的長度。if組件須要選則條件，若是符合條件就會渲染if內的dom元素。for組件中的每個item能夠經過當前數據與dom的屬性相綁定

（四）開始開發——數據庫操做

各位同窗重點來了，與傳統開發的不一樣之處便在這裏出現，若是你須要搭建數據庫存儲用戶的數據，那麼你須要：買雲服務器/dns->搭建後臺->webpack配置打包信息/插件/api->打包發佈。你就是再熟練，各類環境搭建，配置證書，下載工具或插件，參數配置，再來點針對相似canvas圖片源請求的難受的需求配置，這一套下來你不用個1小時能搞定？那想必你找不到對象！
ivx的數據庫基本封裝了前端同窗能用到的所有功能，先來看一下表的基本結構

點擊添加字段能夠添加黃色的自定義字段，字段的內容/數據類型/名稱都能修改。白色的字段是每一個數據庫的默認字段，不可修改。再來看看對數據庫的操做，除了基本的增刪改查還封裝了不少操做。首先選中後臺->點擊 db組件->點擊右上角服務->對服務進行編輯。服務就是對數據庫的操做，能夠添加接收參數（一般做爲查詢鍵）以及返回參數（數據庫查詢結果）。具體操做流程入圖：

1. 自定義參數；
2. 將參數與篩選條件選則對應的規則相綁定；
3. 將結果返回給參數以方便獲取。

前臺的事件組裏就能夠直接使用這些服務來操做數據庫啦。

5、ivx優缺點

（一）優勢

• 基於雲服務的開發系統，不再用揹着電腦處處跑了，不再用在家裏的電腦裏裝各類環境了，有瀏覽器就能知足全部的開發需求；
• 全棧開發省時省力，2我的的工做一我的作且速度更快，而且除了使用提供的組件，還能夠本身寫組件，寫js函數，調用三方api接口，很是靈活；
• 能構建全平臺系統，目前支持小程序和web，下個版本貌似還支持app；
• 這套工具的技術採用react+golang+k8s+docker架構將組件生成代碼，其最終生成的代碼的健壯性不比一個老師傅弱，不服的能夠本身再擼一套代碼版的跑一下比比性能；
• 安全性，不管是接口仍是數據庫，其安全策略都很完備。在預覽效果時看到回包的明文結構可能還在吐槽安全性，打包發佈後再看看回包都是加密過的信息，收到回包後只有瀏覽器能解密並使用數據，不由感嘆https下還作到這樣真的是「安全第一」；
• 有相似git的版本管理系統，支持多人開發和分支管理，對可視化事件備註註釋方便閱讀，固然這個確定沒有vscode裏直接能看到差別那種強壯的功能，但在同類產品裏確實作的不錯；
• 完善的學習資源，有詳細的開發文檔，不輸imooc的視頻課程，在線客服和技術論壇。

（二）缺點

• 勸退新手的學習難度，正所謂成也蕭何敗也蕭何，其功能的強大註定了使用的難度，在開發者眼裏的優勢就成了新手眼裏的缺點。若是對於程序員來講事半功倍，但對於沒什麼基礎的新人沒個幾星期的學習和使用是沒法構建大致量、多功能項目的；
• 事件組多了會致使編輯頁面變卡，滾動的時候尤爲明顯，點擊選中組件也有必定的延遲，在流暢性方面用戶體驗並非很好，但願之後能夠改進；
• 不一樣種類項目的代碼不可以通用，好比小程序的組件沒法複製粘貼到web項目，這可能和代碼的生成邏輯有關，小程序生成的是對應wxml、wxss文件。對比其餘前端框架，複用性就被比了下去，好比各類前端框架的native版本（react-native/vue-native）和小程序版本（mpvue/melago），代碼基本能夠通用。

6、思考

我從html->js->jq->node->框架->框架衍生組件->表驅動編程->黑科技->頸椎病康復指南，前端的變化突飛猛進，這些知識是咱們安生立命的資本，花費了咱們大量的時間，結合咱們的學歷和專業才讓咱們在行業內沒法被替代。apaas產品會否是互聯網應用的下一個風口，會否改變編程學習的方式是互聯網人須要考慮的。01代碼被高級語言替代，可視化編程有可能替代高級語言，這並不使我懼怕丟了飯碗，而是會鞭策我不斷學習，一方面瞭解這種新穎的技術理念另外一方面讓我達到apaas所不能企及的高度，變得更加不可替代。