Skip to main content

通用部分

方法论​

寻找 XXX 的最佳实践​

需求描述

最近在做的这个项目，前端用的 Vue，后端用的 Express + MongoDB。因为之前写前端项目还算多一点，后端没怎么写过，所以这次的后端代码总感觉还有很大的提升空间，那么怎样能找到优质的代码，来学习借鉴呢？

研究过程

要找到优质的代码，在搜索关键词里可以加上 best practice。当然了，即使加上这组关键词，也要对搜索结果进行手动筛选。

就比如自己在研究 Express + Mongoose 的 API 怎样写才能更好的时候，用 node mongodb crud best practice 作为关键词来搜索，第一页的文章里，有借鉴价值的只有一篇，其它的文章都和 best practice 根本不沾边，只能算是 tutorial，入门指引。

但是即使用了上面的方法，也未必能如愿以偿，自己最后找到的比较满意的资源，是 FrontendMasters 上的一套收费课程，的开源代码：api-design-node-v3。大致看了一下它的代码，个人认为已经完全可以拿来应用到生产项目中了。

这个开源项目是怎么找到的呢？是因为试了好几个关键字都没找到满意的结果，于是又用关键字 design node api 在 Google 上搜索，给出的第一个链接就是这个项目，点进去看了看，果然是个宝藏，哈哈。

看来即使是搜索这种看起来很简单的事，也得多花心思、多花功夫，像自己这次花了不少时间，总算找到自己满意的资源，还是相当值得的。

项目脚手架​

需求描述​

不管是 Vue 还是 React，或者是后端 API 服务，初次上手的时候，都希望能有个现成的脚手架来提升自己的开发效率。

问题的关键不在于某个具体的项目，而是在于如何在 GitHub 上找到这种仓库。

关键词​

  • scaffold
  • boilerplate
  • bootstrap
  • create
  • starter
  • template
  • stack

参考项目​

项目架构梳理​

Q​

对于前后端分离的项目架构，有什么好的方法、工具可以进行梳理么？

画个时序图，倒是可以梳理整体流程上的架构。但是对于细节，感觉时序图这样的工具就无能为力了。

画个流程图的话，感觉画起来又很花时间。

所以有没有什么方法，能够既看到项目的整体架构，又看到项目的每处细节？是不是还得用时序图加别的什么图，搭配起来用？

A​

多看 GitHub 开源项目的文档，要图文结合才能把设计说清楚。

写项目设计文档，其实就是写一份教程。如何把教程写得通俗易懂，也是一门学问。

兼容性数据统计​

为了保证所研发的页面在各种电脑端、手机端上都能正常使用，就需要充分研究各类浏览器、手机系统的市场份额。

PC 端 IE 份额统计​

友盟​

P13：PC端浏览器占比，2017年6月，IE系列26.5%。

Search1990​

百度统计流量研究院​

链接：https://tongji.baidu.com/data/browser

  • IE9 8.42%
  • IE8 7.41%
  • IE7 2.66%

其它 15.56%，其中应当包含了 IE11 的份额。

StatCounter​

Desktop Browser Version Market Share China

  • IE11 5.58%
  • IE8 5.19%
  • IE9 2.48%

备注​

  • IE9：仅有部分OEM厂商在其出厂的电脑中预安装了IE9。
  • IE7：预装于Vista及Server 2008中。

总结​

两大主流前端框架：React及Vue均原生支持IE9+。

React有兼容IE8的方案，但该框架较重，体量偏大，不适合于快速开发。

Vue则完全无法兼容IE8。类似的框架Avalon虽支持IE8，但实际应用中发现支持效果并不理想。

结合前面统计数据可知，IE9已经占据了相当程度的市场份额，且份额已经超越IE8。

IE8的份额仅占7%左右，视具体目标用户群体而定，该数量可能更低。

而为了兼容IE8，所需额外增加的工作量至少是一倍左右，有时甚至更多，因为除了上面JS框架的兼容性很差之外，IE8也几乎不支持HTML5、CSS3中的新特性。

因此，建议对IE8用户进行引导，建议其安装360等国产双核浏览器，既可保证用户可获得较好的用户体验，也不需要升级更新IE，以免产生新的问题。

参考资料​

安卓版本统计​

关键字​

  • android version statistics
  • 安卓 版本 统计
  • google android version distribution

参考链接​

结果统计​

综合上面四个链接的统计数据，占一定市场份额的低版本安卓比例如下：

  • 4.4：10% 左右
  • 5.0：3% ~ 5%
  • 5.1：18% 左右

iOS 版本统计​

参考链接​

结果统计​

根据上面的统计数据，iOS 11 用户为 65.62%，iOS 10 为 20.68%，iOS 9 为 8.29%，iOS 8 为 4.24%，总计 98.83%。

其余各低版本用户总计 1.17%，其中 iOS 7 0.93%。伴随着 2018 年 iOS 12 的发布，低版本用户比例将继续下降。

实际数据分析​

查看服务器上 IIS 的日志，访问页面的 UserAgent，Android 版本最低为 4.4.4，和测试机基本相同；iOS 版本最低为 8.3，比测试机还高一个大版本。

这样的话，以后业务开发就一定要用两台测试机做基础测试，通过之后再用其它较新设备测试。

Vue 支持度统计​

Vue 3.X​

Google vue3 chrome compatibility。

看到这个 issue：Minimum Browser versions supported by Vue library #1151，提到在 What browsers does Vue support? 中有说。

查看文档，说是 Vue 3 要正常使用，需要浏览器原生支持 ECMAScript 2015 (ES6)。

再查看 Can I Use 上面的数据，Chrome 系列浏览器从 51 开始就全面支持了，iOS Safari 从10 开始就全面支持了。

然后又查看 Google Analytics 上面 2022 年 6 月用户的 UserAgent 统计信息，Android 用户完全符合 Chrome >= 51 的标准，iOS Safari 的话，还是有少数用户（41 / 16327） iOS < 10。

这个用户数量很少，应该没什么影响，那以后新的前端项目就可以考虑直接用 Vue 3 + Vite 来创建了。

Vue 2.X​

官方文档：

  • iOS：10+
  • Android：4.4+

用两个旧设备打开用 Vue.js 简单写的测试页面，都可以正常显示内容，iPhone 是 iOS 7，Android 是 4.4，那以后的页面开发就都用 Vue.js 了。

用真机 iOS 7 和 Android 4.4 测试，在 iOS 7 中检测 Vue.js 用到的特性 Object.defineProperty 和 Object['__defineSetter__']，结果都是支持的。

参考资料​