不依赖后端，一个前端能够做什么？

2022年7月6日 · 阅读需 8 分钟

chalk

Developer

很多前端同学都会问自己的一个问题 —— 没有后端的前端能干什么?

对于这种问题，我的回答是：能做很多事情！你的时间远远不够！

别再自我焦虑

如果说你坚持认为没有后端你就啥也做不了，那么请你现在立刻马上去学习后端相关知识!

相信自己，无论你是一位刚刚入门的小白，亦或是工作良久的码农，这篇文章让你对你的工作之路有所了解～

仅一个前端也可以做很多事情，在此列举一些个人也能开发的项目（不定时更新）

表格组件

在 B 端业务开发中，你少不了表格，一个好的表格能够让你的开发效率倍增！

找遍各种第三方表格组件，不如实际动手开发一个属于自己的表格组件！
参考 Antd 底层库：Rc-table
推荐使用: React-Table

查看常用的功能

列隐藏
列固定
列宽调整
行数据过滤
编辑模式
全屏模式
页眉和页脚
本地化 i8n
分页
行操作
行号
工具栏
数表格
展开行
拖拽排序
- 拖拽列排序
- 拖拽行排序
行选择
- 单选框
- 复选框
- 更多选择模式
分组
- 列分组
- 总和
- 平均值
- 计数
虚拟化 (解决大数据量性能问题)
- 行虚拟化
- 列虚拟化

提示

不止于此，你应该将所有功能可插拔化，保持“低耦合、高聚合”的原则

流程组件

流程组件也可以作为一个亮点，涵盖内容较多

Canvas & SVG 构建 React Flow
SVG 构建 AntV X6
Div 元素构建 react-flow-builder

细致化你可以借助一些第三方库(例如: PIXIJS...)自己动手写一个

微前端

微前端作为“巨石”应用解决方案，你可以搭建一个自己基座。
参考选型有:

腾讯 WUJIE
阿里 qiankun
京东 MicroAPP

请求状态管理

关于接口请求，你应该至少封装过 Axios
在其之上可以接入 React-Query 做数据管理

优点及特性

缓存
你可以缓存你所请求的接口数据
可控
你可以使用乐观更新的方法
其他更多功能…

组件库

开发一个属于你自己的组件库, 酷毙了～

使用 Rollup 打包
使用 Storybook 形成文档
使用 NPM 发布

编辑器

编辑器也算是常用的啦，为什么不尝试着自己封装一个呢？

文本编辑器

以 String 数据格式保存 SlateJS
可以使用 Json 对象的形式保存数据DraftJs
Canvas 形式的编辑器 canvas-editor

代码编辑器

MicroEditor
交互式编辑器 React Live

交互式编辑器

时间展示
非内联函数

实时编辑器

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  }, []);

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>现在是: {date.toLocaleTimeString()}</h2>
    </div>
  );
}

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  }, []);

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>现在是: {date.toLocaleTimeString()}</h2>
    </div>
  );
}

结果

实时编辑器

const project = "World";

const Greeting = () => <p>Hello {project}!</p>;

render(<Greeting />);

const project = "World";

const Greeting = () => <p>Hello {project}!</p>;

render(<Greeting />);

结果

动画库

一个良好的前端开发者怎能不关注动画呢？

几个动画库推荐

基于弹簧物理引擎动画 React-Spring
React Motion
ReMotion

表单解决方案

在 B 端业务开发中，你少不了表单，一个好的表单能够让你的开发效率倍增！

推荐库

视频播放

视频插件选择

DPlayer
[React-player][https://cookpete.com/react-player/]

样式解决方案

在为你的样式感到烦恼？不要让烦恼留在最后

使用 TailwindCSS 解决你因样式产生的烦恼

使用 CSS-in-JS Styled-Components 解决方案

拖拽插件

拖拽场景也不少，性能选优

拖放

性能极好 @dnd-kit
性能也不错 react-beautiful-dnd
栅格拖拽使用蛮好 React-draggable
使用人数挺多 React-dnd

调整大小

调整大小 react-resizable
调整盒子大小 react-resizable-box
拆分面板拖拽调整 SplitPane

性能组件

虚拟列表

大量数据你不得不使用虚拟化的方式提升性能(下拉组件、表格组件、树组件)

无样式虚拟滚动 TanStack Virtual
virtuoso
Hook 提供的虚拟滚动 ahooks
这个库也建议你吃透

搭建一套自己的路由体系

路由作为一个项目的基础，你要考虑的情况有很多！

路由所需要做的👇

路由的层级
路由的配置文件
路由页面的缓存(KeepAlive)
多页签的实现
路由权限
活动页路由、404 路由、登录页路由…
性能指标（流畅跳转不卡顿）

提示

你可能需要考虑更多情况

建议一些三方库

业界标准 React-Router
可跨框架 TanStack Router

低代码

嚯！去年好像很火的样子～

实现一套低代码，哪怕是低配版

—— 拖拽 + 结构化

定义标准 JSON Schema 规范结构
例如使用 XRender

可参考现有项目

阿里 FORMILY
百度 Amis

物料平台

管理物料，让前端开发更快更好更轻松。

自动化

流程自动化、部署自动化、发布自动化…

自动化这种东西你看着选

系统级 Demo

将以上内容应用在项目中，感受一下！

别再自我焦虑​

表格组件​

流程组件​

微前端​

请求状态管理​

组件库​

编辑器​

动画库​

表单解决方案​

视频播放​

样式解决方案​

拖拽插件​

性能组件​

搭建一套自己的路由体系​

低代码​

物料平台​

自动化​

系统级 Demo​