2020年了，前端还有的搞么？要怎么学？

傷城~ 2023-02-09 11:57 29阅读 0赞

> 前言

首先简单介绍下自己，目前七年前端实际项目经验，有一线大厂经验，也去过国外。算的上是前端老鸟了，这篇文章是个人的经验和心得，不吹不黑，中肯的态度来说，希望能够帮到大家。

![format_png][]

> 都2020年了，我现在学前端还来的及么？

这是很多前端新人经常问我的一个问题，有学弟学妹，也有想转行的朋友。

我的意识里，“大前端时代”是从15年年底开始的，这一年Vue等三大框架开始在一线慢慢被使用起来，到17年大火，甚至于你不会框架都找不到工作。

从前端的发展趋势来看，**用户越来越注重页面体验**，包括交互体验以及响应速度等。所以**现在仍然是“大前端时代”，前端是互联网中不可缺失的一部分。**

从这个趋势来看，前端是仍然被需要的，**被需要就有存在的价值**。现在学也是来得及的，不过得努把力了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

> 我该怎么学？

前端的核心是JS，这个是必要拿下的，无论是新手还是已经工作了几年的同学，如果JS基础不扎实，建议一定要买一本《JS高程》看一下，这是前端必读的一本书。我现在也会偶尔翻翻。

很多同学工作了几年，业务能力有了，但是面试的时候却屡屡碰壁或是工资提不上去（这部分人数多一些），大部分原因是基础不够扎实。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]

### 三大框架怎么选？ ###

到2020年，三大框架的斗争基本告一段落，Angular已经把自己差不多玩没了。大厂会选择React（有大量技术积累），中小型公司仍是倾向于Vue，毕竟Vue入门简单一些，小白也能用，并且在国内生态是强于React的。这句话不要刚，17年的时候，React在国内的生态是很脆弱的，网上的文章很少，出错了都不知道怎么解决。

所以建议**新手先学Vue，有工作经验的同学不要局限于Vue**，可以看看Vue的源码，学一学React，毕竟Vue有很多技术点都是借鉴React的。

### 工程体系的再度升级 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2][]

工程化的进度愈来愈快，从之前的几个文件就是个项目演化成脚手架、各种依赖包等。020年工程体系一定会继续走向闭环，不再是一个脚手架这么简单。而是会结合 IDE，打通业务属性，**从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个相对完整的闭环。**

### 超级APP下 —— Web 标准的重新定义 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3][] ###

近几年，小程序可谓是火的一塌糊涂。甚至独立出来小程序开发这个岗位。

在微信小程序出现以前，大家在谈 Hybird、ReactNative，但终归只是技术层面的狂欢，一直没有业务属性的注入。而小程序的出现：一方面告诉业界在当前设备上 Webview 也是非常优秀的，另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域运营。缺点也是很明显的：可能很难产生业界的最终标准，**Web 的碎片化会更加严重。**

### **让前端离业务更近 —— Serverless** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4][]

其实 Serverless 早已和前端产生了联系，只是我们可能没有感知。

比如我们经常使用的CDN，它就是一种serverless的实现。随着 Serverless 的逐步落地，BFF 这层的代码会摆脱运维、机器分配等复杂的问题。这也是我们前端应该做的，服务端同学专注中台系统的实现，**对业务的好处是降低试错成本**。

> 如何提高核心竞争力（针对于在职人群）

刚刚说到，很多小伙伴会发现，做了几年后，就会有瓶颈：**技术原地踏步，薪资上不去。**那么，我们应该怎么做呢？

*  **会使用框架，但不局限于使用框架**。目前Vue，React还是大火阶段，但是切记使用框架的时候多看看**底层源码与架构设计**。
 *  **JavaScript****是前端核心**。作为基本功，无论工具或框架如何变迁，**了解JavaScript底层以及设计模式**
 *  **学习服务端开发。**前端逐步与服务端打交道，而许多人还停留在写页面、调接口的阶段，大厂或是高级前端工程师的招聘上都要求你有node开发经验。
 *  **了解前端工程化**。web业务日益复杂化和多元化，前端开发从**WebPage模式为主转变为WebApp模式为主**。前端的工作需要多人协作，要考虑到**项目的可维护性、开发质量、规范性**等等。

如果本文对你有帮助，大家可以点赞转发一波，有错误大家可以评论指出，感谢！

大家继续加油，未来可期！我们的征途是星辰大海！

![format_png 1][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Itc3NsLmR1aXRhbmcuY29tL3VwbG9hZHMvaXRlbS8yMDE4MDkvMTYvMjAxODA5MTYyMzEyNDRfZ2R1Z2IuanBlZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518205833592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200518210043444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200518221500395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200518221526291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200518221829994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltZzEuZG91YmFuaW8uY29tL3ZpZXcvZ3JvdXBfdG9waWMvbC9wdWJsaWMvcDY4MDgxNDI3LmpwZw?x-oss-process=image/format,png