第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)

愚坤發表於2020-03-31

前言

上篇大致提及了本篇的主要內容,首先是把自己在搭建系統中見識的秒開、跨端、海量部署的學舌給大家(自己掌握的不牢靠,只能大概闡述),主題內容是自己在參加完大會後反芻對搭建工具的理解

第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(上篇)

第五場 《如何設計實現 toC 營銷搭建系統 | 終端秒開》

這是供一個運營人員的快速搭建平臺,提及了其他系統沒有的功能:灰度,更重要的主題是秒開。 講師重點介紹了,如何把不同page的相同module程式碼做到複用,頁面在進入時,雙鏈路並行提高載入速度。

  1. 客戶端預載入頁面程式碼
  2. 請求使用者資料

這也依賴了客戶端強大的快取能力。

第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)

題外話

說一個小插曲,主持人對步天說: 我們們現在聊的他們聽不到,而我則坐在螢幕前懷疑是不是自己的耳朵出問題了,哈哈哈。

後邊的分享越來越乾貨,群裡的同學也有反饋說聽不太懂。

第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)

自己也是聽個大概思路,隨著時間的推移和經驗的積累,沒準哪天就能看得懂並用得上這些巧妙的設計了。 如果整場分享都是你所瞭解的內容,不能否定它對你瞭解的內容有強化和加深,但並不能擴寬你的認知

第六場《如何設計實現跨端頁面搭建系統 - 跨端模組》

本場和上一場的分享是相輔相成的,上一篇的主題在雙鏈路載入和模組程式碼複用,這一場則介紹了更多實現細節。 再一次強調了是針對非技術人使用,頁面資料為一維度結構,這意味著更簡單便捷的操作,不必讓非技術人員理解DOM樹;

跨端的工作交給處理Rax處理; 在用阿里開源SchemaForm工具formily,並提到一個值得注意的問題:scheam 只能定義第一次的格式,互動變化後則沒辦法定義;講師還分享了元件管理、工程化方面的心得。

第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)

第七場 《如何設計 toB 商家搭建系統 | 海量部署》

這是一個針對B端使用者使用的營銷平臺,快速搭建營銷頁面,講師分享了一些關於編輯器的設計,但基本上之前的講師都講過了,感覺最後講好吃虧。不過從標題我們就能看出來,意不在此,擁有百萬級的頁面,更重要的是海量部署問題

講師從原有的架構開始講到如何演變成現有架構,自己也就聽個七七八八,更多是運維層面的東西,從原來使用CDN靜態資源演變到使用釋出平臺通知訊息佇列,再通過訊息佇列通知Node服務自動部署,有點分治之的意思。

最後真的是抗不下去睡著了?,技術棧是midway,有用到訊息佇列;思考:像演算法一樣, 如果把時間維度拉長,面對海量資料,規模膨脹如何處理

第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)
第三期 |《早早聊搞搭建》搞過搭建的我收穫了什麼?(下篇)

大會覆盤

最後一場要比其他幾場時間稍微長一點,最後主持人結尾告一段落。

自己在貪婪的攝取講師們寶貴的經驗時,也記錄了自己的體檢表,也希望辦方能越來越好,讓參會的同學有更好的使用者體驗。

講師注意事項
會前告知講師處理好手機問題,防止來電導致分享畫面被切出。
講解複雜架構圖時,配合滑鼠指示(一頭霧水的在架構圖中找重點)。

群訊息
微信全程很打擾,但又不敢退出,怕萬一直播有問題或群裡釋出重要訊息而錯過。
提供提問模板表單,有提問的同學直接填寫表單,主持人根據表單結果像講師提問。

參與感
在直播前收集參會同學的問題,然後講師認領並在分享中回答,這樣互動性更強,更具有針對性。

思考與反芻

在如今這個時代,前端加上Node的如虎添翼,而前端搭建工具加vue/react的元件化後,實現一個拖拽頁面元件編輯器也不再一個有門檻的技術活,前端視覺化搭建工具更是百家爭鳴、遍地開花,前端視覺化搭建工具存在的價值毋庸置疑,如果你準備或已經著手開發適合自己公司業務情況的視覺化搭建工具,有幾個問題可參考??

明確目標人群

搭建平臺的型別NoCode、LowCode以及很相似的AutoCode 、ProCode,沒有最好,只要最適合,這取決於你的解決方式,毫無疑問,技術人員在程式碼上是強項;相反,對於非技術人員NoCode更適合。

Schema協議

看了這麼多搭建工具,講師們無一例外都講到了Schema,解決方案也五花八門,元件Schema保障所有元件屬性可配置,頁面Schema負責元件元件間的關係,Schema協議是生成工具的核心

元件Schema了普通資料類的定義外,更復雜的是配合頁面Schema定義事件和元件通訊,至於頁面資料具體是code還是data則無關緊要。雲鳳蝶的實現是狀態外接做元件通訊,雖然已經有很多開源的Schema協議,但大都沒提及關於事件和網路請求的相關內容,一個健壯而優雅的Schema方案迫在眉睫,元件其實就是函式,而typescript的interface應該被重視。

編輯器架構

如果你做的不是傻瓜到像穿梭框元件一樣,就必須考慮模組間的介面、擴充套件、維護等問題,值得參考也是業界最知名的也就是Erich Gamma 的VScode架構了。

元件管理

在元件管理方面,要考慮元件版本,元件依賴,以及文件;元件在不同規模的使用量情況下如何升級等(W+),以及安全方面的沙箱隔離,如果保證元件不影響你的平臺;相比於制定元件規範和建立生態,雲鳳蝶的方案更優雅,元件即package,交給npm管理,根據typescript讀取interface,不限制元件物料,不需要手動維護元件Schema。

基礎能力

不同業務場景需要的基礎能力也不同,如果是應用級則需要提供使用者管理、許可權管理、單點登入等功能;如表單類工具至少需要OSS相關的能力;營銷類工具則更重視效能與資料監控;需要多端實現也不是那麼複雜,畢竟視覺化搭建生成工具只是獲取元件配置資料,具體生成一份還是多份就看個人選擇了。

多人編輯

這不是一個必選的功能,如果針對開發人員可能很難繞過多人協作,這方面已經有很完善的解決方案,就看哪個更適合自己了。

啟發

imgCook給了我們很大的啟發,不一定侷限在搭建工具層面,比如,使用人工智慧的方式建立適合自己的領域模型。

總結

在參加這次分享之前,我還對視覺化搭建產品懵懵懂懂,在瞭解完大廠的視覺化搭建產品架構後,使我看到了業界搭建產品的全貌;如果只靠自己摸索和探尋,難以想象會遇到多少彎路和挫折,希望自己能在這個領域內持續學習和積累。

經驗是寶貴的財富,也只有網際網路獨有的禮物文化中才能發酵一個一個有價值的學習分享會,再次感謝講師們和主辦方的付出和饋贈。



相關連線

關於大會:前端早早聊大會目標成為用得上,聽得懂,抄得走的前端大會,計劃 2020 年辦 12 期,由前端早早聊與掘金聯合舉辦,未來前端早早聊大會行程動態、資料下載請掃碼下方公眾號跟進:

1.png

相關文章