惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
博客园 - 【当耐特】
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Recent Announcements
Recent Announcements
D
Docker
GbyAI
GbyAI
酷 壳 – CoolShell
酷 壳 – CoolShell
WordPress大学
WordPress大学
The Cloudflare Blog
雷峰网
雷峰网
A
About on SuperTechFans
小众软件
小众软件
博客园 - Franky
博客园 - 聂微东
F
Full Disclosure
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
MongoDB | Blog
MongoDB | Blog
G
Google Developers Blog
Microsoft Azure Blog
Microsoft Azure Blog
U
Unit 42
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
V2EX
Engineering at Meta
Engineering at Meta
宝玉的分享
宝玉的分享
aimingoo的专栏
aimingoo的专栏
量子位
P
Proofpoint News Feed
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
罗磊的独立博客
Martin Fowler
Martin Fowler
D
DataBreaches.Net
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
S
Secure Thoughts
Project Zero
Project Zero
L
LangChain Blog
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
T
Tailwind CSS Blog
S
Schneier on Security
Blog — PlanetScale
Blog — PlanetScale
The Hacker News
The Hacker News
Spread Privacy
Spread Privacy
Security Latest
Security Latest
NISL@THU
NISL@THU
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
C
CXSECURITY Database RSS Feed - CXSecurity.com
J
Java Code Geeks

BAIYUN'S BLOG

AI Coding 从小工到专家 - BAI YUN 电信 IPTV 内网融合教程:在局域网任意设备观看 IPTV - BAI YUN 美国住宅 IP 提供商体验对比 - BAI YUN Node.js 程序以 Keyless 模式从 1Password 读取密钥 - BAI YUN 高效优雅的观影指南 - BAI YUN 基于 Surge 的 DNS 优化指南 - BAI YUN RIME 鼠须管输入法简明使用教程 - BAI YUN 自动给不同 Git 项目设置不同的用户名邮箱 - BAI YUN Web3 新手如何选择加密货币钱包 - BAI YUN Web3 到底是什么? - BAI YUN 谨慎开启 Safari 的阻止跨站跟踪功能 - BAI YUN iOS Surge 开启后无法使用部分国产 APP 或网络出错的解决办法 - BAI YUN 屏蔽 Telegram 垃圾私信的有效办法 - BAI YUN 每个人都应该读一遍《1984》和《动物庄园》 - BAI YUN iOS 给常见机构号码增加联系人头像 - BAI YUN 在国内如何购买比特币和投资加密货币 - BAI YUN WEB 性能优化:如何让你的网站页面秒开(方法论) - BAI YUN 加密货币投资这件事 - BAI YUN 国内手机号注册推特教程 - BAI YUN 国内注册币安账号并通过 KYC 教程 - BAI YUN 使用一套助记词创建多个以太坊钱包账户 - BAI YUN Apple Watch 的几个用途 - BAI YUN 钱包安全指南:如何保护你的 NFT 和加密资产不被盗 - BAI YUN 我在 macOS 上高频使用的应用 - BAI YUN Web3 时代:如何使用 MetaMask 钱包实现一键登录 - BAI YUN 2022 年了 Safari 无法渲染渐变文字的 BUG 依旧存在 - BAI YUN 境外手机卡:澳门电信大湾区预付卡使用体验 - BAI YUN 解决 iCloud Drive 上传文件卡住的问题 - BAI YUN Electron 应用如何获取系统代理配置 - BAI YUN 解决 iOS 上 Google 账号登录会卡在加载状态的问题 - BAI YUN 记录 Github Copilot 惊讶到我的时刻 - BAI YUN 解决 Xbox 在国内下载速度慢 - BAI YUN 开始使用 IndexNow - BAI YUN Surge iOS 和 AmpliFi 的兼容性问题 - BAI YUN 自建图床指南 - BAI YUN 使用 TypeScript 提升可维护性 - BAI YUN 在 JavaScript 应用中正确的实现时区切换 - BAI YUN 从 Loading 动画出发改进 React 应用的用户体验 - BAI YUN Node.js Tips - BAI YUN 使用 Dart Sass 代替 Node Sass - BAI YUN WSL 踩的坑和解决方法 - BAI YUN NPM & Yarn Tips - BAI YUN Git Tips - BAI YUN macOS 命令行 Tips - BAI YUN JavaScript 防劫持 - BAI YUN Dota2 - BAI YUN macOS 好用的系统维护工具 - BAI YUN 在 Linux 服务器上使用 Puppeteer 生成 PDF - BAI YUN The Golden Circle 黄金圆环法则 - BAI YUN CSS 写法进化史 - BAI YUN 一个 Web 开发者的 Windows10 开发环境设置心得 - BAI YUN Chrome DevTools Tips - BAI YUN React 设计模式和思想 - BAI YUN Linux & Unix 命令行环境的一些 Tips - BAI YUN 从传统 MVC 到同构:Web 发展历程 - BAI YUN Webpack 动态导入 - BAI YUN JavaScript 中的异步 - BAI YUN
关于我的博客 - BAI YUN
baiyun · 2017-03-11 · via BAIYUN'S BLOG

建立这个博客的初衷是用来分享和记录我的想法,同时希望这些内容能帮助到需要的人,另一方面,这里也是我的技术实验室,很多技术相关的 idea 会在这里进行实践应用。

主要用到的技术栈:

  • Node.js
  • PostgreSQL
  • GraphQL
  • React
  • TypeScript
  • JSON Web Token

技术栈转变历程 🤖

stage 1 (2016-2017)

这是最初版本,传统的 MVC 模式,统计了一下大概 2000 行代码实现了前端到后端的 CRUD

  • Handlebars.js
  • MongoDB
  • gulp

这个阶段的代码是非常简单清晰的,对于一个简单的应用来说也可以了,虽然它并不容易做组件化和工程化。

stage 2 (2018)

17年开始,我刚好在当时的公司推动前后端分离,当时花很多精力做了一套 React 服务端渲染框架来支持前后端分离,成功把手头的两个项目从 MVC(Laravel + jQuery + React) 迁移到了 React SSR。

有了这次在生产环境的成功案例,加上工作上写了快两年 React,这个时候再来看 Handlebars.js 这种模板语法就很难接受了(由俭入奢易,由奢入俭难)

并且在这个时候我切身体验到了 MongoDB 的一些体验性问题,比如说,相比 PostgreSQL 和 MySQL 它并没有一个我个人觉得很好用的 GUI,整体周边生态感觉要比关系型数据库落后不少。

基于上述背景,我决定将博客系统的技术架构调整为这样:

  • 传统 MVC 改为前后端分离,API 和页面渲染拆分为两个独立的服务
  • 支持 React 服务端渲染,在浏览器端过渡为 SPA (兼具 SEO 和用户体验)
  • MongoDB 替换为 PostgreSQL

整个改造过程大慨用了一个周末加几个晚上,这次重写博客系统的时候顺便单独写了一套 React SSR 工具链 发布在 NPM 上,方便我其他的 Side Project 复用这套工具链。

改造好之后,给我最大的感受就是从农业时代的刀耕火种进化到了工业时代,同样的功能用不同的技术方案去做,开发效率和体验是有非常大差距的。

stage 3 (2018)

想切换到 GraphQL 的主要导火索是因为发现了 REST API 在字段裁剪和聚合方面的不便之处,抱着爱折腾的态度,入坑了 GraphQL,此时主要新增了以下技术栈:

  • graphql-yoga
  • React-Apollo

graphql-yoga 使用下来也发现了个别蛋疼的问题(比如默认 host 是 0.0.0.0 用户不能更改,为了安全在生产环境还得自己用 iptables 关掉对应端口的公网访问权限),并且相关的 PR 在 github 上一直没有被通过,后续准备替换掉它。
React-Apollo 使用久了也发现不少问题(它会增加不必要的复杂性,对 React 新版本适配也不够快),最终在 2020 年的时候删掉了它,替换为了自己的方案。

stage 4 (2022)

前端迁移到了 Next.js 13。主要是眼馋 Next.js 那一套丝滑+开箱即用的构建工具链(turborepo、swc、还有后续的 turbopack)。加上自己没有太多精力持续维护自己写的那套同构框架了。

目前本站是基于 Next.js 13 最新的实验性 Server Component 架构来实现的,整体上比之前代码简洁了一些,性能方面和之前的版本大部分情况下相差不大。但是在网络延迟大的情况下 Next.js 13 的 prefetch 性能和 Loading 状态管理比我之前那套框架差太多了。

甚至 Next.js 13 的 Loading 目前都是有 bug 的,所以本站目前没有启用 Next.js 默认的 Loading。

其他方面 Next.js 13 的缓存微操能力几乎等于没有,这方面导致用户体验比之前自己写的框架差了不少。

最后,没有完美的框架,有突出的地方,就有不足的地方,而 Next.js 框架的侧重点最近几年一直在往静态化和 Serverless 方向发展,所以势必会有不少功能是很多用户不需要的。

Features 🚀

  • Mobile First (核心功能支持移动设备)
  • 实时 CRUD
  • 代码自动格式化和高亮(现在会使用 Prettier 保持统一的风格)
  • 一系列高性能优化
  • 文章权限区分公开和私有
  • 全文 RSS(Atom 协议)
  • 大量 SEO 优化
  • 文章 slug 修改后可以自动重定向到新的 slug

本文原载于:baiyun.me

原文链接:https://baiyun.me/my-first-blog