前端框架介绍
前言
本文档的编写目的在于介绍本公司前端相关基础框架内容。
框架选型
Javascript框架
目前前端领域主流的JS框架有React、Vue、Angular。当比较React、Vue和Angular时，可以从以下几个关键方面进行比较：
学习曲线：
- React: React的学习曲线相对较陡峭，需要对JavaScript和JSX语法有一定的了解。它使用组件化的开发模式，需要熟悉React的生命周期和状态管理等概念。
- Vue: Vue的学习曲线相对较平缓，它的语法类似于传统的HTML和JavaScript，容易上手。Vue提供了易于理解和使用的API，使得构建复杂应用变得简单。
- Angular: Angular的学习曲线相对较陡峭，它是一个全面的框架，需要熟悉它的许多概念和特性，如模块化、依赖注入和TypeScript语法等。
生态系统和社区支持：
- React: React有一个庞大的生态系统和活跃的社区支持，有许多第三方库、工具和开发者社区可供选择。React也受到大型科技公司的广泛采用，有丰富的资源和文档可供学习和参考。
- Vue: Vue虽然相对较年轻，但也拥有庞大的生态系统和活跃的社区支持。Vue的社区致力于提供高质量的插件、组件和教程，同时Vue也受到一些大型公司的认可和采用。
- Angular: Angular是由Google维护的框架，有一个庞大的生态系统和强大的社区支持。Angular拥有丰富的官方文档和指南，以及大量的第三方库和插件可供使用。
性能和渲染效率：
- React: React使用虚拟DOM来优化页面渲染，只更新需要更新的部分，提高了渲染效率。React还支持服务器端渲染，提供更好的性能和SEO优化。
- Vue: Vue也使用虚拟DOM来提高渲染效率，类似于React。Vue还提供了异步渲染和懒加载等特性，使得应用程序在性能方面表现出色。
- Angular: Angular使用了更复杂的变更检测机制，可能在某些情况下导致性能下降。但Angular提供了强大的优化工具和技巧，以减少应用程序的加载时间和提高性能。
社区支持和就业机会：
- React: React拥有广泛的就业机会和需求，许多公司都在寻找React开发人员。React的社区庞大，有很多机会参与开源项目和社区贡献。
- Vue: Vue在就业市场上的需求也在不断增长，越来越多的公司开始采用Vue开发前端应用程序。Vue的社区也越来越活跃，提供了很多学习和发展的机会。
- Angular: Angular在企业级应用程序开发中非常流行，一些大型公司和项目使用Angular进行开发。因此，Angular开发人员在就业市场上也有很多机会。
总的来说，React、Vue和Angular都是优秀的前端框架，具有各自的优势和适用场景。选择哪个框架取决于项目需求、团队技能和个人偏好。
从市场普遍表现来看:
- Vue在简单项目经济性占有绝对优势
- React在适用性、持续性、可用性占有绝对优势。在复杂项目上经济性也占优势
- Angular凭借完善的工具配套在大型复杂项目占据绝对优势
跨端框架
在React-Native推出引领APP跨端开发之后。伴随国内微信小程序的推出，进一步加剧了前端生态的割裂。市场对于前端跨端需求到达了前所未有的高度。许多项目出于敏捷、成本等考虑。都会在多端开发时采用跨端框架。尤其是国内小程序环境下。这里我们比对下主流的跨端框架：Taro、 uniapp
| 框架 | 技术栈 | 微信小程序 | H5 | App | 支付宝/百度/抖音小程序等 |
|---|---|---|---|---|---|
| Taro | React/Vue | ✅ | ✅ | ✅ | ✅ |
| uni-app | Vue | ✅ | ✅ | ✅ | ✅ |
| mpvue | Vue | ✅ | ✅ | ❌ | ❌ |
可以看到。Taro和Uniapp两个框架在市场主流适配度都非常完善。
Taro
Taro在App端使用的是React Native的渲染引擎，原生的UI体验较好。不过需要自己去搭建iOS和Android的环境，对于初学者来说。会是非常大的挑战。这也是劝退很多新手的原因。
并且Taro适用React开发。难度稍高。但Taro 3的出现，支持了React 和 Vue两种DSL，适合的人群会更多一点，并且对快应用的支持也更好。
uniapp
uniapp配合HbuildX开发工具。封装了很多业务逻辑。提供了强大的整合能力。尤其是对APP的封装。让开发无需花费太多精力即可开发、测试、上架APP。但是过度封装的方案也造成了debug困难。并不适合中大型项目。
美萌框架
经过综合比对以及实践总结。我们最终采用的方案是: Taro为主，uniapp为辅 的开发策略。即在客户对交付没有特殊要求的情况。优先采用Taro进行开发。对简单项目、开发能力稍弱、客户指定等情况的项目。使用uniapp开发
开发工具
| 分类 | 说明 | 备注 |
|---|---|---|
| Vscode | 代码编辑器 | |
| WebStorm | 代码编辑器。相比vscode功能更全。同样也更臃肿。 | 建议使用vscode |
| 微信开发者工具 | 微信小程序/公众号开发预览工具。 | 一般只用作预览、构建 |
| HBuildX | uniapp配套开发工具。提供了很多内置支持。 | 一般不建议使用。只在开发APP使用 |
| Android Studio | 安卓App开发工具 | 开发安卓APP必备 |
| Xcode | IOS APP开发工具 | 开发IOS应用必备 |
| DevEco Studio | 鸿蒙APP开发工具 | 开发鸿蒙原生应用必备 |
通用环境
| 分类 | 技术栈 | 备注 |
|---|---|---|
| 操作系统 | Windows、MacOS | |
| 代码管理 | GIT | |
| 前端开发环境 | Node | >= 14.x |
| 包管理工具 | Yarn | >= 1.x <2.x |
| 包管理工具 | PNPM | >= 8.x |
| 持续集成 | Jenkins | 发布管理工具 |
Taro环境
这里介绍一些Taro框架涉及技术明细
通用
- React 18
- Typescipt >= 4.x
- jotai: 状态管理
- webapck: 打包工具
- babel: 代码编译
- eslint: 代码规范检查
- pnpm: 项目管理和包管理工具
后管技术选型
- Antd & Antd Pro: 蚂蚁金服推出的后台管理系统组件库
- 美萌自研业务组件库: Backend Pro
- 自研框架插件： 权限插件、路由插件
- 自研工具库: reqeust请求库、utils工具库等
C端技术选型
- Taro >= 3.6
- Taro 全家桶
- 自研框架插件： 路由插件
- 自研工具库: reqeust请求库、utils工具库等
- 自研组件库: taro-design 、 taro-poster、taro-picker等
Uniapp框架
这里介绍一些uniapp框架涉及技术明细
通用
- Vue 3.x
- Typescipt >= 5.x
- pinia: 状态管理
- vite 5.x: 打包工具
- babel: 代码编译
- eslint: 代码规范检查
- pnpm: 项目管理和包管理工具
后管技术选型
- Antd-design-vue: antd-design风格的vue组件库
- 美萌自研业务组件库: Backend Pro
- 自研框架插件： 权限插件、路由插件
- 自研工具库: reqeust请求库、utils工具库等
C端技术选型
- uniapp
- 自研框架插件： 路由插件
- 自研工具库: reqeust请求库、utils工具库等
- 自研组件库: mm-design 等
APP框架
我司APP支持 使用原生方式、跨端方式、H5组合 等方式进行开发交付
原生
原生方案采用
- IOS 使用swift语言进行开发
- Android 使用kotlin语言进行开发
该方案
优点：
- 使用原生。体验最好
缺点：
- 成本太高
跨端
跨端采用 React Native 与 Taro 结合的方式进行开发。采用了Taro整套技术方案同时使用ReactNative进行编译构建。该方案
优点：
- Taro整套技术栈。开发难度比纯RN要降低一半
- 使用RN编译渲染原生组件。性能较好
- 开发成本相比原生更低
缺点：
- RN对于有硬件交互和系统API交互较多的。能力稍显不足
- 社区活跃度相比纯原生 有一定差距
H5组合
该方式采用 一级页面原生开发，二级页面嵌入webview 的模式进行开发。该方案
优点：
- 开发成本最低，项目开发周期快
缺点：
- jsBridge进行沟通、webveiw渲染 性能最差
- 需要原生交互的内容。需要封装很多原生方法。后期维护成本高