2018 年最流行的 100 个前端项目

作为一名开发工程师，当接手一个全新的项目任务时，如何选用并设计合适的技术架构？面对日新月异的技术更新，如何保持一份积极而又淡定的心态，持续高效地跟进学习这些新技术？

最近一段时间，在筹办腾讯 IMWebConf 2018 前端大会的工作中，我梳理了近 1 年中最流行的 100 多个前端开源项目，总结了一份《8102 前端技术选型》的主题分享。在与公司外部团队分享交流的过程中，我发现很多团队疲于应对业务需求，面对层出不穷的新技术新框架，一方面表现出极大的兴趣，另一方面又流露出彷徨与不安，不知如何快速预研，判断抉择。

下面我将其中的一些想法分享出来，欢迎大家一起交流讨论。

2018 年最流行的 100 个前端项目

开源站点 bestofjs.org 收录了 Github 上 1300 多个前端相关项目，并基于 Github Trending API 的公开数据，更新统计这些项目的 Stars 新增趋势。

基于 Bestofjs 去年的《2017年 JavaScript 明星项目》报告和近一年 Trending 排行数据，我总结了 140 多个前端重点项目，并对这些项目进行了简单的介绍。

P.S.

开源站点 bestofjs.org ：

https://github.com/bestofjs/bestofjs-webui

Github Trending：

https://github.com/trending

《2017年 JavaScript 明星项目》报告：

https://risingstars.js.org/2017/zh/

近一年 Trending 排行数据：

https://bestofjs.org/projects/trending/last-12-months

[ 2017 Rising Stars Top100 ]

[ 近一年 Top100 补充 ]

这 140 多个项目中，值得去深入了解的项目不到 20%。面对如此多的解决方案，该怎样选择。我觉得主要是三个要点：抓核心、跟主力、用巧劲。

技术人员应该关注的核心技术点

网上流行很多「程序员技能图谱」，这些漂亮的脑图就像一部部武功秘籍，仿佛掌握了上面提到的所有技术框架和工具，就能成为武林高手。

这里最关键的问题在于，大部分与框架和工具相关的知识点，非常容易在技术的更新迭代中被淘汰。以前端开发岗位为例，很多入行七八年的程序员，最擅长的技能领域是：IE678 兼容性 Hack、jQuery/RequireJS/SeaJS/ 以及如何快速的切好一个活动页面。等一觉醒来，到了 8102 年，外面早已是 MVVM 和 Node 的世界。由于对技术趋势的关注度不够，投入了大量时间在一些无效的细节和过时的技术栈上，导致在通道晋级和面试时吃了很大的亏。

如果我们做一个角色互换，从项目、业务和老板的角度来看待技术产出，会得到怎样的结果？

项目铁三角模型中提到「质量（范围）、时间、成本」，共同决定了项目的成败。而对应一名技术人员来说，能提升业务的产品体验和开发迭代效率的技术点，才是我们应当关注的核心技术点。

[ 产品体验与开发迭代效率 ]

这些知识点就像面试过程中常被问到的数据结构和算法，会保持着更持久的生命力，也需要我们通过大量的项目实践去消化和理解，成长为我们自己的技能树。

然而，这条路比我们想象中的要难走的多。

[ An issue of Deno ]

三个实用技巧

多年前，我从团队前辈那里学习到，要选择一款合适自己的知识管理工具，记录自己看到和学到的知识点与新技术。我曾在 google bookmark、del.icio.us、feedly、evernote 上，花费了大量的时间，去维护这些 urls 和 tags。

2015 年以后，我已经不这么干了。

1、Awesome

2014 年 7 月的某一天，Sindre Sorhus 在全球最大的同性交友网站 Github 上 commit 了一个叫做 Awesome 的项目。这个项目治愈了大量程序员的「工具集合页收藏癖」，只需在 Github 上搜索 「Awesome xxx」，你就能打开通向任意一项技术领域的大门。

Awesome Lists 是一项开源活动，本质上可以理解为全世界程序员的共享收藏夹。当我们需要对某项新老技术进行全面的了解，包括文档、教程、社区、示例、组件、解决方案、行业动态等等，都能在 Awesome List 上找到答案。

Sindre Sorhus 也从此成为「地球上星星数量最多的人形机器人」。

2、Google vs

借助 Google vs 搜索技巧以及 Google Trends，我们能对类似的技术方案或框架进行全面和深入的比较。

3、Github tips

• 借助 Github 的「in:readme」搜索技巧，我们能将自己的 Github Stars 当做一个保持自动更新的个人技术选型库
• 通过 follow core contributors，我们能第一时间获取所关心项目的最新动态
• 借助 Sourcegraph 等基于 Github 的浏览器插件，能提升源码学习效率

[ 成为最好的程序员 ]

--------------------------------------------------------------------------

原文作者：腾讯工程师叶凯。

来源：腾讯内部KM论坛。

你也想成为腾讯工程师？

也想年终奖人手一部 Iphone X？

那就快加入前端NEXT学位吧！

前端NEXT学位课程第九期火热招生中！

  感兴趣的同学赶紧点击原文了解详情吧~

腾讯NEXT学位

求职干货 | 前辈blog  | 前端课程