从2019看2020前端发展趋势

从2019看2020前端发展趋势

2020前端趋势之愚见

前言

作为工程师不仅仅应当有理性的分解问题和研究技术本身带来的快感，更应当有对技术的敏锐观察或者说对技术趋势的判断以及其对应于场景的运用和实践，从过往的2019年看2020年可能会出现的趋势，或者说对前端发展的个人的一些小小见解。

私以为目前大前端按不同的分类方法，大致有以下几种分类方法：

按领域划分

• 后台方向：传统的大web方向
• 数据可视化方向：webGL、Canvas、SVG、Echart/HiChart、D3
• AI方向：TensorFlow
• 游戏方向：Cocos Creator、Egret

按端划分

• PC端
  • 网页
  • 桌面应用：Electron、NW、PWA桌面
• 移动端
  • web渲染：小程序、快应用、PWA
  • 原生渲染：RN、Weex、Flutter

按框架划分

• Vue全家桶

  • Vuex
  • Vue-Router
  • Vue-cli
  • Element-ui/Cube-ui/Vant-ui

• React全家桶

  • Redux
  • React-Router
  • Redux-Saga
  • dva
  • umi
  • (mobx)
  • Ant-Design

• Angular(国内可忽略)

下面将分别从以上三种分类进行阐述

领域划分

1. 传统大web领域包含着以node为核心的后台这一块，对于2020年的前端来说，不会node基本就很难混了，传统web开发的后台部分也被算在大前端领域，express+koa源码要会，有c++基础的同学node要做到精通，node能做的可不只是你学的那些东西，广阔天地，无限可能。数据库方面MySQL+MongoDB+Redis需要掌握，有python基础的同学可以学习一下PostgreSQL，docker+linux+jekins+k8s这一套都是传统web开发需要掌握的，GraphQL以及serverless相关内容可以考虑逐步应用起来，持续集成等等，对传统大web领域而言，对于2020年的前端都应该掌握，毕竟这是前端发家的地方，可以说是基础中的基础。

2. 数据可视化方向会是一个不错的发展方向，尤其对于有些有设计基础并且数据比较好的前端工程师，在数据可视化方向进行深究将来可能会成为一个比较不错的亮点优势，WebGL相关可以重点关注，有余力的同学可以关注一下OpenGL

3. 私以为AI和前端的结合会是一个比较不错的搭配，AI的理念模型都很好，但苦苦找不到特别好的落地场景，而前端本身就是冲在流量的最前沿，这两者结合可为是天造地设的一对儿，尤其是Google的TensorFlow还有js版本，ai方向可以重点关注TensorFlow相关应用

4. 游戏方向一致都是前端可以追逐的领域，但无奈其体验和原生应用相比还是差很多的，私以为前端重游戏方向(像原生那样的体验)质的飞跃可能还要搭上5G的东风，但对于轻快的令人愉悦的小游戏还是有一定的优势的，可以作为“饭后甜点”，配合运营等各种场景

端划分

1. PC端：传统网页部分不再赘述，这是老本行，对于桌面应用方面可以看一下，虽然PC端的应用市场很难有特别大的2C业务，但是作为2B部分还是有很多的，比如IDE的开发以及对应IDE插件的开发，有志于这一部分的同学最好有PC操作系统层面应用的开发经验，这样会如鱼得水

2. 移动端：移动端要说的就太多了，首先移动端不像PC端那样会承载着过多的B型模式，手机端本身就是一个特别适合C的端口，由此出来的各种骚操作也是层出不穷，私以为以目前的经济形势来看，短期内很难有特别大的回升，互联网领域如果还想要活下来，对前端而言小程序、快应用是个不错的切入方向，而且各大厂app已经圈好各自的领地，就等着在这上面生根发芽，从他们的各种轮子来看，小程序、快应用来“狙杀”各中小企业是志在必得，小程序各种框架如：uniapp和taro可以作为重点的研究对象，快应用只对于安卓，目前好像也没有特别流行的框架，可以观望着。对于原生渲染的Hybrid，大家都在跟风flutter，试了一把，写起来特别像原生，如果有ios和安卓转过来的同学可以重点研究flutter，说不定哪天就火了呢，对于本身写惯js的同学，如果要做原生渲染的app，rn还是首选，虽然很多厂都在抛弃它。

框架划分

1. Vue来说，目前在国内还是中小型公司的主栈，但是从后半年的趋势来看，React可能是你不得不学的框架了，并且今年10月出的Vue3的源码来看，真的好像react，所以主栈是vue的同学一定要学react，大厂都问react，就算你主栈不是react，问完vue怎么都想绕过来问react，vue的源码仔细研读，做到能手写一版的程度，2020不会源码，不懂原理基本就很难混了，会往死里问的，真的，不能只是知道，要深刻理解，没事儿就翻出源码，品味一番，你品，你细品！

2. React而言，毋庸置疑，即便在国外都有其一席之地，就目前大厂而言，你可以不会vue，但不能不会react，因为他们默认如果你会react，vue可以很快上手，react的生态圈就太广泛了，目前业界做的比较突出的也就是阿里那一套东西吧，dva+umi+saga，mobx可以看看，ui框架就重点是antd，react方面就重点关注阿里前端就可以

其他

主要是不知道怎么分类，就写个其他吧

1. 2020年前端不仅仅只局限在js上，私以为ts这框架还是不错的选择，但是写业务可能有些许繁琐，不少大厂团队已经开始全部ts，有志于大厂的同学ts应该是2020年必备的技能，除此之外，传统web方向个人认为go语言是个不错的进阶方向，想往AI方向发展的同学，python应该必备，另外刚才说的希望把node整个玩儿透的同学，c++是个不错的选择，当然c永远都是基础，不论算法还是编译器，下个点专门说。

2. 想说说基础的重要性，现在互联网涌入的人员很有可能有一半都是类似作者这样的非科班的人员，对于20年前上古时代而言，不重视基础或许还能有一线生机，但是对于2020年的前端，对基础的把控无疑是各大厂或中小企业作为筛选编程人员的一项重要指标，不仅仅是形势严峻，更重要的是现在对前端的要求已不再是切切图、做做动效那么简单的要求，而是要求能够写框架，甚至写一个js解释器，个人建议非科班同学可以先把《计算机网络》、《编译原理》这两门基础看一下，然后结合已经做的项目，回味写的代码，你会有不一样的理解，其实每次面试题那些代码都是在把自己作为一个js解释器来执行代码。越底层的东西，越具有奠基性和稳定性，只会principle不行，但是不会principle肯定不行！！！

3. 说说工程化吧，对于绝大多数做前端的来说，大部分可能都是从其他传统理工科专业转过来的，而工科专业或者工程专业，交给我们的工程思想其实是一致的，而我们的title也是“web前端工程师”，所谓工程化就是将某种理论进行高效并稳定的可复制的实践出来，而对于前端工程而言，就是将计算机理论的靠近用户层的高效、稳定、可复制的实践出来。所谓高效，就是前端性能的优化，包括各种性能检测、性能瓶颈分析等，jperf、WebPageTest、Yslow等，webpack优化等，除了正常代码层面的优化，对具体项目的性能优化才是体现一个工程师经验和能力的地方；所谓稳定，就是要在各种情况下都要保持在一个合适的波动区间内，这其中也包含安全的问题，因为安全也是稳定的一部分，web安全主要是在网络这一块，另外兼容性也是稳定的要求，要能做到覆盖绝大用户画像的体验的优雅与一致；所谓可复制，主要讲的就是说能够模块化、组件化的进行重组和拼合，这就要求工程师具有一定的架构能力，从宏观上对这个工程项目有一个把控，比如现在比较火的微前端。

4. 最后想谈谈核心竞争力的问题，现在的情形大家也可以看到，现在对前端的要求真的是越来越高，不仅仅是互联网发展到了这个阶段，各大人员纷纷转向互联网导致人员的增多，更重要的是确实是需要这样的水平才能完成这个阶段才能完成的任务，目前高级/资深前端(p6/p7/p8)的前端还是有很多坑位的，形势就必然要求我们更加完善自己的能力，以及对自己做出更高的要求，如果把北上广深杭看做欧洲五大联赛的话，那么BAT/TMD就是各大豪门球队，我们作为“运动员”，可能前端对应的话可以看做是前锋或前腰等位置，评价运动员都有一个雷达图，对应的我们作为开发者，作为工程师也是有对应的雷达图。首先如果问我未来五年有什么技术从目前来看还能保持的，我不敢打包票，但是有一项是肯定的，那就是算法和数据结构，这是永远的核心中的核心，可能我们作为前端，对算法和数据结构这一块儿不如后端那么重视，但是作为程序员来讲，这项技能是你的基石，如果有这个闪光点可以说可以击败绝大多数的前端，这个可以比喻为运动员的体能和核心力量，虽然平时不重要，但当对抗或比赛的时候其重要就会体现出来；其次，就是各大前端基础能力了，比如js基础+html基础+css基础+网络+框架，前端比较杂，要做到没有盲区，别人问到要知道，可能不能准确的说出来，但要知道是什么，最好有知识图谱的建立，配合mdn比较合适；最后，就是要关注一些新出现的前端技术，可以关注各大论坛大会等等，如果能在实际项目中运用出来那自然是最好的。前端早已进入深水区，只有不断学习才能不被淘汰，路漫漫其修远兮，各位战友共同加油！！！

总结

回望2019，展望2020，总结如下：

1. 领域细分，生态多样。全能全会，一专多能
2. 多端纷争，框架丛生。艺不压身，大巧不工
3. 工程专分，还需躬行。精雕细琢，玉汝于成

好了，2020到了，愿大家在这个寒冬不再寒冷，加薪升职，心想事成！！！