前端的世界里没有“容易”二字

转眼，2019年已经过去一大半了。

这半年，你过得怎么样？新的热点技术学会了吗？写的代码还有bug吗？头发还好吗？还记得年初的 Flag 吗？

2019年对于大前端技术领域而言变化不算太大，目前三大技术框架日趋成熟，短期内不大可能出现颠覆性的前端框架。

我将在这篇文章中，带大家盘点一下：2019高级前端必备的 TOP 级知识点。你可以看一下你自己的技术体系和当下流行的技术栈，有多大的区别，以及接下来你该如何去规划自己的学习方向。

1

框架层的更新

React，Vue，Angular依旧保持了前三，今年React发布了16.9,Vue3也即将发版，但是总体情况来看Angular在国内的开发者占有率还是偏低，这个跟当初NG1和NG2的语法巨大变革不无关系(手动捂脸)。同时像Flutter for web(Flutter已经不仅仅可以运行在Android或者iOS上，还可以运行在Windows, MacOS, Linux, Chrome OS甚至是Web上)、还有Omi(融合Web Components 、JSX、HTM、虚拟DOM、功能样式和代理合并到一个小型、高性能的框架)也是值得各位同学关注的。不过前端框架千千万，唯有原理永流传。

2

状态管理

随着前端框架的流行，组件化开发成为主流，然而随着页面复杂度越来越高，在一个组件文件中，要做UI渲染、事件处理、状态管理等等事情，于是一个文件变的越来越复杂。同时，页面组件层级变的复杂后，跨组件间的数据通信也变的很繁琐，需要将数据上提到父节点，通过property传输数据、回调方法更新父节点状态等等。这个时候状态管理也显得尤为重要。一想到状态管理大家肯定脱口而出Vuex、Redux、mobx等等。但是随着React Hooks的愈加成熟，基于Hooks版本的轻量状态管理也非常值得大家关注。https://github.com/mobxjs/mobx-react-lite

3

前端工程化

说到这里，请大家看下边这张我总结的图吧。翘首企盼的Webpack5、一个前端在前端工程化中的具体实践中，要做的工作越来越多。

4

微前端

微前端简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程，你也可以理解微服务前端化，每一个小项目完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作，实现所有页面的展示与交互。微前端也从最初的一个概念变为前端的新宠儿。一图胜千言吧~

5

编程语言

来自statesofjs的统计，在类JS编程语言上，ES6遥遥领先，TypeScript也获得接近半数的使用量。其次是Flow、Reason、Elm和ClojureScript。不过笔者更倾向于TS吧，因为我可以用装饰器很轻松的实现依赖注入，而且像抽象类、接口、类型推断、强类型这里ES6-10还没没有。不过仁者见仁智者见智，选择TS还是ES6还是要看具体的项目而定。

6

其他

其实整个大前端体系还有非常多需要提的比如工程化、服务端、监控、测试、跨端、等等，篇幅有限笔者写到这为止了。希望大家能够抓住当下大前端发展发展的新趋势，找一份更好的offer。

写在最后

看到这里，你是不是想大喊：老子学不动了？成年人的世界没有“容易”二字，你学不动，别人学得动，你只能靠边站。但是为了给家人更好的生活，为了自己的梦想，你必须坚持下去。

引用张爱玲的一句话：中年以后的男人，时常会觉得很孤独，因为他一睁开眼，周围都是要依靠他的人，却没有他可以依靠的人。

前端技术路漫漫，成长的曲线非常的陡峭。老袁从业前端8年，冷暖自知，也希望大家能够跟上这个时代，工作顺利。

我曾经也是一名初级前端，我深知对于初级前端工程师来说，每天的工作大部分可能是搬砖，当你想跳槽涨薪的时候，你会发现自己的技术早就脱节了。

如果你想跟上前端高速发展的时代，如果你也想月薪3万不是终点，是起点，如果你也想做点改变，

真的不妨来参加为1-3年前端同学精心准备的前端训练营：

【高级前端必备的TOP级知识点】

???

大纲如下：

1.TypeScript+Webpack环境搭建

• 构建基于TypeScript编译和运行环境
• 构建基于tsx组件化思想Webpack环境
• 构建TypeScript对Node.js的编译支持

2.React hooks 实战应用

• 去 Redux 使用React hooks 完成状态管理
• 使用React hooks+Functional components

3.集成BFF开发模式完成真假路由混用

• 搭建基于Nest.js的后端开发环境
• 将React项目发布至其前端进行集成
• 完成BFF+SPA整体项目的测试环境搭建

4.Webpack开发SPA与MPA核心知识

• 了解SPA与MPA开发的性能指标区别
• CSS in JS & JS in CSS工程实践
• 学习Webpack优化SPA与MPA配置区别

5.基于AST实现简版Webpack

• 了解Webpack基础运行原理
• 了解AST在前端开发具体用途
• 从0到1带你手写简版的Webpack

6.Webpack5新特性尝鲜与微前端

• 学习Webpack5最新特性和进展
• 学习Webpack在微前端具体实现细节