全棧平臺

• 螞蟻楊周璇：我做前端這十多年來的感悟
• 云鳳蝶可視化搭建的推導與實現(xiàn)
• 云鳳蝶中臺研發(fā)提效實踐
• 中臺建站的智能化探索
• 云鳳蝶如何打造媲美 sketch 的自由畫布

• 長夜未央——企業(yè)級研發(fā)提效的下一階段
• 十倍效能提升——Web 基礎(chǔ)研發(fā)體系的建立
• 前端服務(wù)化——頁面搭建工具的死與生

• 如何設(shè)計阿里經(jīng)濟體都在用的搭建服務(wù)—天馬

• 積木系統(tǒng)v2@江源.pptx
• 積木系統(tǒng)，將運營系統(tǒng)做到極致

• 騰訊云開發(fā)低碼平臺

• 案例
• 為什么專業(yè)開發(fā)者都選擇無遠

• 氚云

• 關(guān)于iVX平臺實現(xiàn)的總體技術(shù)棧【低代碼/無代碼、可視化開發(fā)語言】
• iVX是怎么開發(fā)出來的？0代碼開發(fā)的理論基礎(chǔ)是什么？】
• iVX和其他低代碼的開發(fā)平臺區(qū)別究竟在哪里
• ih5

• 閃電數(shù)據(jù)管理 —— 無代碼數(shù)據(jù)管理(開發(fā))系統(tǒng)
• lightning —— 基于Django的無代碼Admin及低代碼開發(fā)框架

• OpsMind 前端低代碼開發(fā)平臺--MPlatform

• 支持業(yè)務(wù)系統(tǒng)/管理系統(tǒng)、可視化大屏、3D園區(qū)低碼快速開發(fā)

支持離線部署

頁面搭建

僅包含前端部分的 low code 平臺

• 京東商城活動頁面構(gòu)建系統(tǒng)——通天塔

• 持續(xù)迭代的電商可視化運營頁面生成系統(tǒng)

• 活動運營自動化平臺實踐

• 美團外賣前端可視化界面組裝平臺 —— 樂高

• 前端即服務(wù)-通向零成本開發(fā)之路

• 前端工程實踐之可視化搭建系統(tǒng)（一）

• 活動專題系統(tǒng)搭建過程中我的一些思考

• 干貨 | 已配置4000+頁面，攜程前端組件化探索之“樂高”運營系統(tǒng)

• 「可視化搭建系統(tǒng)」——從設(shè)計到架構(gòu)，探索前端領(lǐng)域技術(shù)和業(yè)務(wù)價值

360 - 即視

• http://h5.dooring.cn/

店鋪裝修

非獨立頁面，依附于業(yè)務(wù)系統(tǒng)存在的頁面搭建

有贊-微頁面

• 淘寶店鋪裝修

• MegaLayout - 下一代Formily表單布局解決方案
• https://designable-antd.formilyjs.org/

• 可視化在線編輯器架構(gòu)設(shè)計

• 如何設(shè)計高擴展的在線網(wǎng)頁制作平臺

• 【第1524期】頁面可視化搭建工具技術(shù)要點

• 基于 Angular 的小程序可視化編輯器 Panel-Magic 的實現(xiàn)解析

• 百度外賣如何做到前端開發(fā)配置化

• Ovine：基于 amis 補全了路由、權(quán)限相關(guān)的組件
• 愛速搭

• 一個簡單易用的電商活動頁面生成系統(tǒng)

• 使用 React 構(gòu)建頁面可視化搭建工具

• 實時輸出前端代碼，折騰大半年的開源項目 sparrow-js

Moria - Lowcode development platform

• nocobase

https://github.com/odoo/odoo

• https://github.com/imgcook/imove

辦公/管理系統(tǒng) a.k.a no-code

Notion

• https://welovenocode.com/nocodelist

聲明式編程

• "Probabilistic scripts for automating common-sense tasks" by Alexander Lew

行業(yè)綜述

工程化之低代碼體系

• LowCode平臺前端實戰(zhàn)之京東投放素材中心

技術(shù)點

• 可逆計算：下一代軟件構(gòu)造理論
• 從可逆計算看聲明式編程

可視化拖拽組件庫一些技術(shù)要點原理分析（二）

• 可視化拖拽組件庫一些技術(shù)要點原理分析（三）

國外

https://www.claris.com/zh/filemaker/

• FoC 聊天記錄：https://marianoguerra.github.io/future-of-coding-weekly/history/?fromDate=2017-06-13&toDate=2017-06-14&channel=general&filter=

一切改進都是源自于人類的缺陷

How we think

• 人腦是串行的，無法有效并行思考多條線索

人腦不適合思考并行執(zhí)行的多線程

• 【單線程】把共享變量的編程模式改成事務(wù)整體提交的模式

人腦不適合思考同時呈現(xiàn)在屏幕上的多個獨立的業(yè)務(wù)流程

• 代碼是按發(fā)生時間組織的，在一起的代碼未必是邏輯上有關(guān)聯(lián)的業(yè)務(wù)流程
  • 【按業(yè)務(wù)切分文件】閱讀者應(yīng)該可以按照自己的任務(wù)目標來跟蹤索引，而不是默認一個按鈕點擊引起的處理邏輯都一定要寫在一個大文件里
• 【按變更頻率切分文件】業(yè)務(wù)變更是閱讀的首要原因，代碼應(yīng)該按照業(yè)務(wù)變更的頻率來組織。會同時變更的代碼應(yīng)該放在一起

人腦很難管理多份獨立可變的狀態(tài)，本質(zhì)上每個獨立變化的狀態(tài)就是一個獨立的線程

• 驅(qū)動狀態(tài)數(shù)量熵增的三大因素：
  • 因為交互體驗的要求，從后端到富客戶端到3d動畫，狀態(tài)被復制多份，越來越靠近展示層
  • 因為硬件物理的約束，內(nèi)存從CPU統(tǒng)一尋址，到異構(gòu)計算，CUDA，每個硬件核都有一層自己的內(nèi)存
  • 因為數(shù)據(jù)量的增長，從統(tǒng)一的OLAP從庫，到Data Lake，Data Mart，數(shù)據(jù)被復制成越來越份，流水線越來越長
• 對抗狀態(tài)數(shù)量熵增的手段：
  • 【聲明式數(shù)據(jù)聯(lián)動】減少獨立變化的狀態(tài)，用表達式來表達 derived state
• 【全局虛擬數(shù)據(jù)層】借鑒Unix的統(tǒng)一文件抽象，引入一層統(tǒng)一的虛擬數(shù)據(jù)層。盡可能把狀態(tài)轉(zhuǎn)化成 cache

人腦很難理解新增對原有行為的劇烈變化，更習慣逐層穩(wěn)定疊加。也就是人更希望“控制變量”

• css 最大的難度在于不正交，新增一條對規(guī)則會引起意想不到的效果
  • 【局部化布局】swiftui 的 HStack/VStack/ZStack 布局規(guī)則數(shù)量少，每條規(guī)則作用都是局部的穩(wěn)定的疊加
• 性能優(yōu)化往往需要破壞局部性，因為局部的自治容易引起重復勞動
  • 【局部化IO】系統(tǒng)自動實現(xiàn) I/O 的批量等可以自動化做的全局優(yōu)化
• 【局部化IO】業(yè)務(wù)寫成自治的，但是可以附加額外的手工全局調(diào)優(yōu)。而不是強制要求把業(yè)務(wù)邏輯從局部抽出去

How we perceive

• 人眼只能在狹窄的感受野里獲得信息

人對時間的感知是來自于對空間的感知

人希望在一個屏幕內(nèi)從上往下的獲取時間順序上從早到晚的信息

• callback 的編程方式破壞了屏幕上的順序和時間順序的直接映射關(guān)系

• 【協(xié)程式IO】用協(xié)程取代 callback，把屏幕上的代碼擼直

通過 status 字段驅(qū)動的業(yè)務(wù)狀態(tài)機破壞了屏幕上的順序和時間順序的直接映射關(guān)系

• 【協(xié)程式業(yè)務(wù)流程】用協(xié)程取代 status 狀態(tài)機，把屏幕上的代碼擼直

因為感受野的限制，源代碼沒有空間展示所有的細節(jié)

• 類型定義，內(nèi)存分配等“細節(jié)”占用了大量的視覺區(qū)域
  • 【IDE細節(jié)隱藏】在文本上省略掉細節(jié)，由 IDE 進行補全，當鼠標移動上去的時候才展示出來
• 人最習慣的空間整理方式仍然是層狀的文件夾
  • 所有的“架構(gòu)”設(shè)計，最終都是對文件夾和文件的設(shè)計。但是一個維度的靜態(tài)索引（文件夾嵌套）無法滿足所有可能的檢索需求
  • 【IDE按需索引】由 IDE 來補全文件夾分類不能滿足的索引需求，針對閱讀者的任務(wù)來設(shè)計IDE索引

視桿細胞容易忽略形狀和順序的差異，但是對顏色更敏感

• 語法高亮占用了寶貴的資源，但是并沒有考慮閱讀者的訴求
• 【IDE按需高亮】對于不同的任務(wù)，閱讀者希望找到的重點是不同的，語法高亮應(yīng)該結(jié)合任務(wù)來做

How we collaborate

• 人與人之間最高效的溝通的方式是面對面的交互式聲波震動

人類低下的溝通帶寬根本上限制了一個團隊的規(guī)模

• 上線速度要求越快越好，但是加人帶來的邊際效益遞減

• 減少開會拉齊，團隊應(yīng)該盡可能地自治，而不是什么都要靠 feature team 橫向拉通

高內(nèi)聚，低耦合

• 【靜態(tài)鏈接包】編程工具應(yīng)該提供更多的組合可能，而不是所有的組合都要在運行時用面向?qū)ο蟮亩鄳B(tài)來實現(xiàn)
  • 【按變更頻率切分包】分工應(yīng)該按照變更頻率來確定，分工應(yīng)該是明確的

盡可能由最終用戶，或者靠近最終用戶的團隊來解決問題，而不是長距離傳遞需求

• 最終用戶編程：直接讓需求提出者自己來實現(xiàn)需求
  • 把“學習”內(nèi)置到工具里，需要內(nèi)置一個教學工具
    • 最終用戶的編程工具開發(fā)難度高，成本高，投入超過了單個軟件的回報
    • 【編輯器預制】把“公式編輯”，“店鋪裝修”等常見共性需求提前預制
  • 教學工具的目標是教學，而不是把自己標桿為更先進的生產(chǎn)力
    • 【教學內(nèi)置】提供教學模式和生產(chǎn)力模式的無縫切換
• 低代碼編程：通過提前預制，把工作量前置，減少應(yīng)用開發(fā)者的規(guī)模，從而可以在組織架構(gòu)上把開發(fā)者內(nèi)置到用戶組織內(nèi)部。與此相對應(yīng)的是文檔驅(qū)動的外包式開發(fā)。
  • “預制”來自于對共性需求的提前預判
    • 【非功能性需求云化】非功能性需求的實現(xiàn)，都是運行在相似的機器上
    • 操作系統(tǒng)
    • k8s
    • RPC 框架
    • 開發(fā)者都是人類
    • 編程工具
    • 溝通工具
    • 用戶都是人類
    • 【SaaS組件】IM / 電話 / 短信
    • 【Ui組件】字處理器 / 表格
    • 【CRUD生成】慣用的展現(xiàn)和交互
      • 列表詳情
      • 樹狀層級
      • 表格結(jié)構(gòu)
      • 可拖拽白板
    • 【SaaS組件】相對穩(wěn)定的業(yè)務(wù)流程
    • 登錄注冊
    • 支付
    • 行業(yè)內(nèi)相對穩(wěn)定的業(yè)務(wù)共性流程
    • 電商
    • HR / 招聘
    • 銷售管理 / CRM

How we learn

人的“歸納/理解/學習”能力高度依賴于可視化交互式地操縱與反饋

• 幫助應(yīng)該放在任務(wù)執(zhí)行的地方，與其說“可視化”，不如說是“可發(fā)現(xiàn)”
  • 【填空題變選擇題】單獨的語法手冊是不好使的，必須提供界面上的按鈕，把填空題變成選擇題，這樣才能啟發(fā)學習
  • GUI 設(shè)計器 / 店鋪裝修
  • 公式編輯器
  • 審批 / 工作流設(shè)計器
  • trigger 流程設(shè)計器
• 人習慣于用手觸碰一下對象，然后觀測其反饋，從而歸納學習
  • 不可觀測的行為無法學習
  • 生產(chǎn)環(huán)境的bug無法本地復現(xiàn)，我怎么找規(guī)律？
    • 【TestInProduction】tracing，大量的 tracing，流量回放
  • lowcode 平臺的bug沒有任何線索，除了找平臺開發(fā)者，我能怎么辦？
    • 不能要求用戶了解所有的內(nèi)部細節(jié)，“平臺”要做到可依賴
    • 業(yè)務(wù)邏輯問題的定位和生產(chǎn)環(huán)境的bug定位一樣，靠 tracing
  • 反饋太慢的行為給人的負面感受是指數(shù)增加的
  • 本地機器太慢了跑不起來，需要上公司的沙盒環(huán)境來復現(xiàn)問題
    • 【云IDE】
  • 改完了代碼需要重新編譯重新加載
    • 【LanguageServer】交互式開發(fā)的時候跳過不必要的編譯
    • 【所見即所得】所見即所得的 GUI 開發(fā)，本質(zhì)上就是用解釋器執(zhí)行，換取編譯時間的縮減
  • 【HMR】重加載的時候保持頁面狀態(tài)

no code / low code / pro code

一切的改進都是源自于人類的缺陷