tag 前端架構

標籤
貢獻10
80
07:35 PM · Nov 03 ,2025
ntksol 頭像 wjkang 頭像 hiisea 頭像 ihengshuai 頭像 nealyang231 頭像 valleykid 頭像 xunguang_63df81bc527a3 頭像 u_16213688 頭像 sysu_xuejia 頭像 dewujishu 頭像

@前端架構 / 博客 RSS 訂閱

wjkang 頭像

若邪 - 如何結合整潔架構和MVP模式提升前端開發體驗（三） - 項目工程化配置、規範篇

工程化配置 還是開發體驗的問題，跟開發體驗有關的項目配置無非就是使用 eslint、prettier、stylelint 統一代碼風格。 formatting and lint eslint、prettier、stylelint 怎麼配這裏就不説了，網上文章太多了。想説的是eslint rule 'prettier/prettier': 'error'一定要開啓，以及 stylelint rule

mvp , 前端架構 , 架構

收藏 評論

dewujishu 頭像

得物技術 - 前端日誌回撈系統的性能優化實踐｜得物技術

一、前言 在現代前端應用中，日誌回撈系統是排查線上問題的重要工具。然而，傳統的日誌系統往往面臨着包體積過大、存儲無限膨脹、性能影響用户體驗等問題。本文將深入分析我們在@dw/log和@dw/log-upload兩個庫中實施的關鍵性能優化，以及改造過程中遇到的技術難點和解決方案。 核心優化策略概覽： 我們的優化策略主要圍繞三個核心問題： 存儲膨脹問題 - 通過智能清理策略控制本地存儲大小 包體

性能優化 , 大前端 , 前端工程化 , 前端架構 , 前端

收藏 評論

ntksol 頭像

歐雷 - 控件即是塊編輯器的「塊」

近期時不時地會想「反混沌前端工程」當前比較重要且優先的兩塊事情：控件（UI 組件）體系 Petals 和通用塊編輯器。 大部分人不會認為這兩者之間有什麼聯繫，然而在我眼中關係可大了去了——它們的「本質」可以近似看作是一個東西。 控件可以認為是當下 GUI 開發的重要基礎設施和基本單元，而在塊編輯器體系中則是「塊」，理論上「塊」就是控件，是被注入特殊狀態的控件——好比一個被施了法術的人成為提線木偶一

組件設計 , 塊元素 , 前端工程 , 前端架構 , 組件化

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #3：重構「個人主頁」

鐵汁們聽好了哈——從本篇筆記開始，將進入實際的鏟💩演練啦！ 這首先要被剷除的💩，是分佈在我接手官網項目後最先接觸的用户個人主頁裏。 在這系統中，用户分個人與項目方兩種，它們的個人主頁雖看起來一樣，但視覺細節和數據結構等還是有些差異的，佈局結構大致如圖所示： 個人主頁原先代碼中，其他部分還算有點封裝意識，但最重要的課程、活動等列表部分的代碼看起來就是初級水平，將它們全部糅合在一個 React

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #2：易被忽略的「domain」

若看了上篇筆記，眼尖的鐵汁們應該發現，最終的重構成果並未出現目錄結構調整方案提到的 domain 文件夾。 這是因為領域建模是個相對較難且需要長期去做的事情，所以我們不急，慢慢來，要用心地思考與處理——從本篇筆記開始就會涉及到相關內容啦！ 在進行實際的鏟💩演練之前，這篇筆記先來講解下 domain 文件夾的重要性，請各位鐵汁搬來小板凳坐坐好，用小拇指清理下👂🏼聽我説—— 在我所設計的「模塊化

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #1：項目目錄結構調整

最近哥們兒我接手了一個官網的前端項目，雖説是官網，但它是個 Web 應用而非營銷網站，所以還是有一定複雜度在的。 這幾天是邊往死裏摁🐞邊熟悉代碼邏輯，沒想到這是個燙手🍠，前人留了一堆坑給我——令我覺得他撐死了也就中級水平，不能再高了……🙁☹️🙂‍↔️ 是不以為我看到這💩山會苦惱不堪，心中如那呼倫貝爾大草原般萬🐎奔騰？ 不！你想錯了！！我興奮得很呢！！！ 別誤會，別誤會！我不是那個什麼「

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

ntksol 頭像

歐雷 - 是時候反思下 Web 前端了

我以往寫的技術類文章，絕大部分是問題反思、方法論之類的，極少有某個具體技術或工具的介紹與使用教程——除非是我創造的。 眼看着曾經經常針對前端領域問題進行有價值思考與討論的前輩、大佬、同行們接連退隱或沉默，這塊兒的高價值新產出內容越來越少。 因此，我打算自告奮勇地正式接下「對前端領域問題進行思考並儘量產出高價值內容」這個生態位的接力棒。 需要特別説明的是，「前端領域」不侷限於以 HTML、CSS、J

前端工程化 , 前端架構 , 前端框架 , 組件化 , 模塊化

收藏 評論

ntksol 頭像

歐雷 - 前端有架構嗎？

從事前端開發的你，不知有沒有被問過：「前端有架構嗎？」 問你的人的身份，可能是你的 boss 或上司，可能是後端同事，也可能是前端同行；問你的人的目的，可能是刁難，可能是嘲諷，也可能是請教。 前端開發 眾所周知，做前端開發所依賴的核心技術就是 HTML、CSS 和 JS，就像好基友一樣形影不離，我們將它們仨親切地並稱為「三劍客」。 經過這二十多年，尤其是在 V8 引擎及 Node.js 出現之後，

前端工程 , 前端架構 , 軟件架構 , 前端工程師 , 軟件工程

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.4 webpack + gulp 構建完整前端工作流

書籍完整目錄 2.4 webpack + gulp 構建完整前端工作流 在前面的兩個小節中已經完整的講了 webpack 和 gulp 相關的內容，本小節中將會結合二者構建一個完整的前端工作流，內容目錄為： 前端工程結構和目標 前端工程目錄結構 gulp clean gulp copy gulp less gulp au

react , 前端工程化 , 前端架構 , leanreact

收藏 評論

ntksol 頭像

歐雷 - 我來聊聊前端應用表現層抽象

我們處於變化很快的時代，無論是商業還是科技。一家公司看上去商業很成功，也許前腳剛上市，後腳就因為什麼而退市，甚至倒閉；一項看似高大上的技術橫空出世，各類媒體爭先恐後地撰文介紹，熱度炒得老高，沒準沒多久就出現了競爭者、替代者。 在這樣的大環境下，傳統的「web 前端開發」演變成了「泛客户端開發」，前端開發者從「配置工程師」被「逼」成了「軟件工程師」。開發變得更復雜了，要處理的問題更多了，從業難度不知

配置化 , 前端工程 , 前端架構 , 低代碼 , 軟件工程

收藏 評論

ntksol 頭像

歐雷 - 説説「反混沌」：Future.js

相信看到「Future.js」這個名字，會想起之前某廠連續開源的好幾個前端相關項目之一的「Modern.js」——沒錯！就像「Fxxk Design」一樣，這個名字也是受「啓發」而起的，也是把一些正在建設中與規劃要做的項目進行了「概念包裝」。 從目前的瞭解來看，Modern.js 是要建設「大而全」的體系和打造「事實標準」。這種目標我是支持的，但反對由商業組織牽頭，尤其是國內的，應該由非盈利個人/

配置化 , 前端工程 , 前端架構 , 前端框架 , 低代碼

收藏 評論

hiisea 頭像

hiisea - Elux-從"微前端"到“微模塊”

前言：作為“前端微模塊”這個概念有點新，之前雖然也有人提過這個詞（可百度），但都只是簡單的將其等同於動態加載模塊，並沒有賦予其更大的意義，好像也沒有看到具體的落地方案。小弟也是突發奇想，摸着石頭過河，想和大家討論一下“前端微模塊”會不會成為一片廣闊的天空？ 微前端夠用嗎？ 從產品的角度 某個大型應用包含A,B,C,D,E,F,G等若干功能，原來一直是整體打包出售... 隨着用户需求的多樣化，有的用

前端架構 , 前端框架 , 微前端 , typescript , 前端

收藏 評論

u_16213688 頭像

mob64ca14116c53 - Websocket：vue + node 實現實時通信_vuewebsocket聊天

Neko是一個基於Docker的自託管虛擬瀏覽器項目，通過WebRTC技術為用户提供安全可靠的遠程瀏覽器體驗。作為開源項目的核心組件，前端架構採用了Vuex狀態管理與WebSocket實時通信相結合的設計模式，確保了虛擬瀏覽器的高效運行和用户體驗的流暢性。 🔥 Vuex狀態管理架構設計 Neko前端採用Vuex作為狀態管理解決方案，整

前端架構 , 後端開發 , Docker , 錯誤處理 , Python

收藏 評論

wjkang 頭像

若邪 - 如何結合整潔架構和MVP模式提升前端開發體驗（一） - 整體架構篇

如果你無法接受 TypeScript，不建議繼續閲讀此係列文章 本文不詳細介紹什麼是整潔架構以及 MVP 模式，自行查看文章結尾相關鏈接文章。 整潔架構粗略介紹 下圖為整潔架構最原始的結構圖： Entities/Models：實體層，官方説法就是封裝了企業裏最通用的一部分邏輯，也可以叫 Models, 可能是隻包含數據字段的對象，也可能包含方法，具有一部分業務邏輯。更加深入就是領域驅動

mvp , 前端架構 , 架構

收藏 評論

ntksol 頭像

歐雷 - 我來聊聊模型驅動的前端開發

如果把「客户端」想成是樓，把「數據」想成是水——「Model」就是這幢樓的蓄水池，提供充足的水源；「ViewModel」是將蓄水池裏的水進行淨化等加工的地方，然後輸送給挨家挨户；「View」部分的每個 UI 組件就是「挨家挨户」，對水進行消費的地方。 一切皆為模型 模型是人們根據事物特徵將它們分類並抽象後的結果，建模是人們認知世界的一種方式。 模型驅動 數字世界這種虛擬空間，裏面本無一物，是個需要

配置化 , 前端工程 , 前端架構 , 低代碼 , 軟件工程

收藏 評論

xunguang_63df81bc527a3 頭像

尋光 - 微前端框架StartCMS， 一個基於微前端架構的極速微應用開發框架，開源框架

一、介紹 StartCMS是一個基於ThinkPHP6.0+、ElementUI、MicroApp的極速微應用開發框架 前端不限技術棧，支持Vue2、Vue3、Vite、React、Rangular... 後端不限制語言，支持PHP、Java、Node、Python、Go、C#... 二、主要特性 大道至簡：後端標準CMS分層設計，前端微應用架構，全新開發模式和開發規範給開發更好

vue.js , 前端架構 , 前端框架 , 微前端 , 前端

收藏 評論

valleykid 頭像

valleykid - 手把手教你定製一套適合團隊的微前端體系

編者按：大家在使用目前市面上的微前端解決方案時，可能會有些顧慮。比如遇到框架自身的問題和坑點，影響了業務進度怎麼辦？現在有這麼一款框架 Satum，可以像 express/koa 框架一樣提供中間件機制，其只負責核心的功能(規則計算和微應用加載/卸載)。可以基於該框架定製一套適合團隊自身業務的微前端體系，另外該框架還有更多特性，如面向多實例集成、適配多終端等。 寫在前面 隨着前端工程複雜度逐漸增加

前端架構 , 微前端 , 前端

收藏 評論

wjkang 頭像

若邪 - 如何結合整潔架構和MVP模式提升前端開發體驗（二） - 代碼實現篇

上一篇文章介紹了整體架構，接下來説説怎麼按照上圖的分層結構實現下面的增刪改查的功能。 代碼結構 vue userManage └── List ├── api.ts ├── EditModal │ ├── index.tsx │ ├── index.vue │ ├── model.ts │ ├── presenter

mvp , 前端架構 , 架構

收藏 評論

ntksol 頭像

歐雷 - 説説「反混沌」：Fxxk Design

某天，集結很多業內大牛的某廠連續開源了好幾個前端相關項目，其中兩個是 UI 組件庫。嗬傢伙！同時來倆，到底是想讓人用哪個啊？存心想要逼死糾結星人的節奏？ 那倆 UI 組件庫的名字裏都有「Design」，表明自己是「Design System」而不是普通的「UI Library」。這讓我想起了那段時間一波又一波出現的「元宇宙」公司。嗯～熟悉的味道。 不過，這也點了我一下——何不把我正在建設中與規劃要

前端工程 , 交互設計 , 前端架構 , 組件庫 , 軟件工程

收藏 評論

nealyang231 頭像

isNealyang - 自動化生成骨架屏的技術方案設計與落地

個人文章集：Nealyang/PersonalBlog 主筆公眾號：全棧前端精選 背景 性能優化，減少頁面加載等待時間一直是前端領域永恆的話題。如今大部分業務合作模式都是前後端分離方案，便利性的同時也帶來了非常多的弊端，比如 FCP 時間顯著增加（多了更多的 HTTP 請求往返的時間消耗），這也就造成了我們所説的白屏時間較長，用户體驗較差的情況。 當然，對此我們可以有很多種優化手段，即便是

vscode插件 , 前端架構 , 骨架屏 , 前端

收藏 評論

ihengshuai 頭像

大衞talk - NestJS入門指南

由於圖片和格式解析問題，可前往 閲讀原文 從本篇文章開始講解node中最為出色的框架——NestJS，為什麼説它出色，想必市面上已經議論紛紛了吧。如果你熟悉Spring框架那nest也會讓你輕而易舉的理解，基於typescript裝飾器結合IOC讓nest的框架設計更加清晰明瞭 NestJS 是一個基於 Node.js 平台的現代化 Web 框架，它結合了 TypeScript、面向對象編程的思想

node.js , 前端架構 , nestjs , 前端

收藏 評論

hiisea 頭像

hiisea - 前端架構-分層而治，鐵打的MV流水的C

為什麼在web前端很少有人會提到分層架構，例如經典MVC架構，這是因為瀏覽器誕生之初就只是作為一個後端數據的GUI渲染器。也就是説整體來看，web1.0時代的整個web前端工程就是一個View層，而Model和Controller就是指後端，所以根本無需在web前端工程中去提什麼MVC。 然而web生態發展到今天，瀏覽器越來越強大，賦能越來越多，甚至不亞於一個小型操作系統，這時候的Web前端早已不

react , vue.js , 前端工程化 , 前端架構 , 前端框架

收藏 評論

ntksol 頭像

歐雷 - 我來聊聊配置驅動的視圖開發

我在平時上下班開車時，全憑身體記憶與條件反射，基本不用腦子，所以腦子就空出來胡思亂想了，東想想西想想。 某天早上忽然想到：最近幾年，業界在開發時都講究以「數據驅動」的方式更新視圖，回想過去這幾個月的工作內容，發現我們的視圖層開發並不是單純的數據驅動，而是「配置驅動」。 視圖更新 讓我們先來回顧一下以往以及現在，在視圖層開發時一般是如何更新視圖的吧—— 在 React、Vue 等前端庫/框架流行之前

配置化 , 前端工程 , 前端架構 , 低代碼 , 軟件工程

收藏 評論

hiisea 頭像

hiisea - 微模塊-前端業務模塊化探索，拆解巨石應用的又一利器

大家好，我是Eluxjs的作者，Eluxjs是一套基於“微模塊”和“模型驅動”的跨平台、跨框架『同構方案』，歡迎瞭解... 文前聲明，以下推斷和結論純屬個人探索，鑑於本人知識水平所限，謬誤在所難免，懇請各位大佬不吝賜教... 什麼是前端“微模塊”？ Elux中的『微模塊』是指在Web前端工程中，將代碼和相關資源按照不同的業務功能進行歸類和模塊化。 根據業務功能進行模塊化一直以來都是後端的普遍做法，

react , vue.js , 前端工程化 , 前端架構 , 前端框架

收藏 評論