前端技术选型

最新推荐文章于 2024-04-23 16:26:38 发布

自夏

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量1.6k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_39970857/article/details/126640138

版权

前端技术选型

选型该怎么选型

根据需求
项目运行环境和容器选型
运行方式
团队主要技术栈选型
开发周期选型
后期项目扩展性选型

有了需求才有技术选型

当提出项目需求后，要根据项目整体进行技术选型，不要根据会什么技术或者想用什么新的技术而选型

如果项目要求兼容 IE11 就可以了，那就可以放心选择现在主流的前端框架（vue 3.0 以下,React）

如果项目要求兼容 IE9 以上那就可以放心选择现在主流的前端框架（vue 2.6 以下）

react-app-polyfill （IE兼容插件）

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

要求兼容 IE8 又要使用前端框架 react@0.14
vue 2.6 版本要依靠 babel-polyfill 插件

兼容 IE6 avalonJS，或jQuery，bootstrap 或者纯JavaScript

运行环境和容器选型

运行环境和承载容器（更一步缩小选型范围）

PC （所有浏览器）
移动端（Android，IOS）小程序（国内不计其数的小程序容器）或者 FinClip （小程序容器）H5
指定容器这里指，某一个App 内部的webivew

PC

如只考虑主流浏览器，以及业务场景只在PC 浏览器端运行，此场景就可以使用前端任意 mvvm 框架（vue,react，sveltejs,等，或者原生技术进行开发）

PC and mobile

此应用场景多数为（门户网站，和极少数的管理类型网站），此时的技术选型就得根据使用场景和运行容器来选择，布局方式采用媒体查询，根据不同尺寸的终端来适配不同的样式，如果要使用css 框架，就尽量选择PC和移动兼容的（可参考 bootstrap,以及栅格化布局，百分比布局不推荐在次场景使用）.

移动端 (Android，IOS)，小程序，H5

分析客户寻求就能很快确定，客户到底想要开发一个什么类型的东东，问项目来干什么的，现在互联网的入口主为手机，换一个思维来想（除了管理类的项目多数都是在移动端）

移动端对于前端来讲，就是H5, H5主要运行场景在手机上，如（微信公众号，朋友圈的分享链接，一些App分享出来的链接，或者在App 内容打开的活动页）
如想要依靠微信或者抖音的流量还想要体验好就小程序，目前主流应用App都有自己的容器 (所谓的小程序)，小程序缺点内容量有大小限制（微信小程序如主包限制在2M,一共包的大小，不超过4M，这个规定可能会根据时间而改变）
移动端 (Android，IOS)自己产品，自己运营，体验比小程序好，没有开发限制

如何进行此类项目进行选型呢？

根据

开发效率
扩展性
是否长期迭代更新
团队技术栈
团队成员数量

h5 （如商城，团队技术栈为，vue , React）
- vue
  目前vue分为 cli 和uni-app（跨端框架）
  1.如该项目时间周期短（后期想扩展为小程序或是独立的应用），就选用uni-app ，为啥？因为团队成员都会vue,可以很低成本，生态好（vue 的组件能够使用，但是uni-app的组件vue不一定能使用），在移动端适配方面uni都把基础的都弄好了，不需要我自己去解决一些基础问题，比如说移动端不通手机的适配，和uni 提供的api 移动端都是能够兼容
- React
  React 分为 cli 和 Taro （跨端框架）
  1.如该项目时间周期短（后期想扩展为小程序或是独立的应用），就选用Taro ，因为团队成员都会React 或者 vue,可以很低成本，不需要我自己去解决一些基础问题，比如说移动端不通手机的适配，和 Taro 提供的api 移动端都是能够兼容还有自己组件厂都是为了解决业务场景的，很多都可以自己改
小程序
- 移动端开发框架对接，包含，小程序，h5 ，app
  - 原生小程序

原生小程序开发的体验和调试肯定会比跨端框架好些，因为直接在工具里面编译运行，内部API 可以直接使用，

		- uni  （跨端框架）

如果你会用vue那就选择unia-app ，虽然uni-app 跟小程序开发的如法出入不是特别大，uni-app 开发体验肯定没有原生小程序开发体验好，但是uni-app的生态和轮子肯定要比,微信小程序好（官方不支持动态代码转译，无法把已有的微信小城代码转为uni,但是社区有其他方案）有自己的插件市场，也是为了解决业务场景，在 (Android，IOS) 渲染方式有 webivew 和 Wexx 渲染，（Wexx 有一定学习成本，并且跟 css 有所差异）并且有自己独立的Native库，可以单独使用，可以配合uni使用,（uni-app 由 dcloud 团队维护开发，前身可能是 mui ）

		- Taro （跨端框架）

有react 基础和 Vue 基础都可以选择 Taro 官方（支持使用 React/Vue/Nerv ）进行开发，Taro 官方支持把微信小程序代码转译到 Taro ，同样也有自己的插件市场，也是为了解决业务场景的，并且跨端到 (Android，IOS) 用的 ReactNative (58团队维护)

		- 跨端跨级啊共同特性（跨端框架）

跨端框架是进过编译后在再微信小程序工具运行的（H5可直接运行在浏览器），编译后的源码不太好理解（除非js功底很好），因为特性为跨端，内部API需要不同终端运行进行条件编译，跨端框架编译过程可能，会存在，编译不上代码，编译时间过长，编译卡顿，或者一些动态属性微信小程序不支持，然后H5是支持，这样的坑反正是不少

(Android，IOS)
- 这里只考虑，前端能够用的技术栈 HybridApp ，webApp，reactNative（flutter除外）
  目前能用开发 app 国内有很多跨端框架如（uni-app ，Taro ，Chameleon，Hippy，hummer ）都属于混合开发
  - uni-app 开发时间和周期是很快，但是体验和性能是相对来说是低的（除了选用Wexx），一般为初创公司首选（开发成本和周期都低，容易找到开发人员，小外包公司首选，或者控制人力成本和周期，一般选用的是webview 渲染，因为wexx 有学习成本）
  - Taro 的效率是没有 uni-app 高，但是用户体验是比uni-app 好因为选用的 ReactNative
  - Hippy 腾讯在维护，支持 React 和 Vue 两套界面框架，从底层做了大量工作，抹平了 iOS 和 Android 双端差异，提供了接近 Web 的开发体验，在安装包和内存，都比ReactNative控制的好，腾讯主流应用都有使用
  - ReactNative 开发成本和学习成本是较高的，很uni-app 一样需要先学习React 基础语法后在能进行开发，用户体验是优于uni-app，目前有（云闪付，小红书，京东，Edge手机浏览器）等主流应用在使用，ReactNative 重构已经完成，目前内部在使用今年内社区能够使用重构的版本
指定容器运行
- 如运行到微信小程序，或者企业微信（如字节旗下应用内部运行，抖音，今日头条等）
  考虑？
  会不会后期需要运行到其他平台？
  1. 不确定，建议选用跨端框架进行开发，因为后期转化成本相对于来说是低的
  2. 确定，建议使用原生小程序开发，调试成本和开发体验比混合开发好
  是否需要微信授权登录，如获取用户信息（这里H5 (需要SDK) 和小程序都能实现），和要求用户体验性
  1. 需要，建议使用原生开发（包大小有限制，发布版本需要时间审核）
  2. 不需要，使用 H5 开发，成本低，效率高，版本更新迭代快
- 指定应用内部运行 (App 或者 webivew)
  如只有App内部（这里指原生和混合）
  1. 原生开发，能再应用内部埋点（定义好H5可以调用的App内部的函数，在H5中可以调用原生方法）
  2. 混合（uni-app）在App内部运行，可以在H5中调用uni-app 的app中的 Native，实现与原生交互，又可以快速更新迭代
  3. 在其他的webivew 运行，很多应用内部都 webivew 运行H5，避免了应用的跳转，这一类的运行方式，一般app的开发者会限制webivew 一些 JavaScript函数或者过滤一些函数，如 alert

选型共同特点

长期迭代更新，这个对于前期的技术选型很重要，是否采用项目规范化管理和开发流程，如（需要长期更新迭代，考虑加入TS,和eslite,和一些样式命令规范）在项目基础建设的时候都要去做
团队成员数量，俗话说，无规矩不成方圆，一个人单打独斗，二个并肩作战，三个人团队作战，个人独立开发项目和自己后期维护，根据自己技术栈和是否长期迭代就可以选择技术栈，二个人，各做各的，可能期间回去改对付代码，这个时候就要要求，代码注释和命名规范了，不然越往后（离职）就越难受，只敢加代码，不敢动原有的代码，团队开发时候，更加要注重和加强