专栏首页前端迷2020年前端学习的新路径

2020年前端学习的新路径

原本想写个更加标题党的:《2020年你为什么还在用10年前的思路学习前端?》

不过本文更多的还是想给大家带来下一个时代前端开发学习和进阶的思考,而不是纯标题党。就像今年前端领域发生了很多事情,却没有了前几年的热闹非凡的感觉:

  • Angular & React & Vue三大框架稳定发展,不再有刻意吸引眼球的无意义争论;
  • ES6普及和浏览器对标准支持的增强,各种语言和Web的基础知识逐渐成为合格前端的标配;
  • Hybrid和Native并行演进,工程化的前端架构设计逐步在各个项目中普及;
  • 甚至涉及后端的Node、Ngnix等,也成为技术人员必知必会的领域知识。

如今也甚少听到前后端分离、前端工程化等推广,原因无非是大型前端项目早已普及工程化的前端架构,而且更多的前端大牛们都已经在实践大前端体系化的架构设计。

可以预想,前端开发已经开始像后端开发一样,在要求语言和技术基础上,对规模化的实践企业级的流程成为更重要的需求。

2019年缩减HC、裁员不绝于耳,大家都是人心惶惶,年前如此。想必马上到来的2020年又是一场更为惨烈的江湖厮杀。各大前端社区里,面试题整理的文章层出不穷,知识整理的内容每天都在刷屏。准备面试开始变成了重复性的刷题背题,然而每次面试前都要现找面试题,而且答案也不是现成的,这样重复的事情在不知不觉中浪费你很多时间。

著名学者文森特·赖安·拉吉罗的《思考的艺术》一书中有这样的总结:

人的思维过程是创造性思维批判性思维的融合,前者强调的是思维的高大宽深,后者强调的是稳准狠快

在这样的方式指导下,就可以分步来重构一套更值得借鉴的学习路径。


Step 1 —— 基础

学习固然有技巧,但绝不是走捷径,所谓的基础也不是背下来整个JS文档,从HTML、CSS到Vue、React一个都不缺,跨平台PC、移动端、小程序全都覆盖。越是吹嘘全面的,反而更容易徘徊在基础薄弱的边缘。

基础扎实,需要的是对前端相关领域都有一些基础性的了解,了解各项技术的应用场景和优劣选择。对于技术人员来说,理解***前端UI层、通信层、服务层和存储层***的层次结构和关系,才是最初应该掌握的基础。

前端开发如今已经进入工程化的阶段,践行软件工程在前端领域的应用,就需要任何一个专业开发人员理解工程领域的各个阶段应用。


Step 2 —— 体系

很多前端课程,都强调知识面的广度与深度并行,真正去学习的时候就发现是单纯的灌输式学习,反正全都给你讲了,听完了就号称有深度了……

其实在日常工作中,我们讲究的是开发效率,很少会去刻意记下一些细节和概念,脑海中都是一些分散的知识点,无法系统性地关联成网,一直处于似曾相识的状态。

前端项目基础架构.png

以如此的状态,不论是面试还是遇到业务难题的解决,都是很难快速应对的。其实面试就犹如考试,大家回想下高考之前所做的事,无非就是 知识点理解体系化关联记忆。能够将已经懂得的知识体系化,最直接的方式就是结合自身业务提出问题。举个例子:

不论使用Vue还是React,总需要每天编写很多业务组件,通过看官方文档和官方教程,我们能够知道组件化的思想是什么,能知道父子组件以及之间如何传递参数,能知道组件有生命周期,也能知道组件的数据流等等。

这些知识是框架设计者所提供的功能,为了能应付各种场景方便使用所做了最简化的抽象。在开发的过程中,从0开始就需要思考:

  • 如何拆分出合适的组件粒度
  • 如何编写扩展性、通用性强的组件
  • 如何把握数据流向,画好数据流向图
  • 如何在业务复杂后,对数据流正确的处理
  • 如何解决功能冲突和异常
  • ……

在这个结合自身业务思考的过程中,才能逐步提升技术思维层级。


Step 3 —— 产出

也许有人会问,刚刚到思考问题这一步,怎么直接就到「产出」了?很多问题(包括刚刚提到的组件化问题),我还没有想明白,怎么去做产出?

其实就像几年前我一直都坚持的一个论调:“互联网上不缺垃圾!污染互联网的人是在作恶!” 而经过几年的各种形式技术分享之后,反而开始积极推动随时做技术产出这件事。因为之前的想法不无道理,但是实际情况是:

  1. 如果你不首先有足够多的产出,得不到互联网上足够的反馈和批评,那你的产出的质量如何才能提高呢?
  2. 不是精品的内容其实也未必会污染到哪里,比如现在写的这些文字,如果给它一个很清晰的标题,放到我自己的名下合理的归类,那么读者很容易决定留下或是离开。
  3. 在所谓的「自我要求不高」的内容创作时,思维更加容易自由驰骋,很多临时的想法其实可能是很有意义的。

比如,两年前阿里巴巴推行中台战略,对技术中台还没有太深入实践的我,写过一篇《我为什么说中台是多此一举?》的文章,很多读者给了反馈,并且在和我的沟通中读到一些乐趣和启发。同时此文备案存下之后,日后对技术有了更高层面的理解,想要劝说大型项目思考技术中台的优势的话,那这篇幼稚的文章就是极为重要的反面教材。

所以最近我在微信群、自己身边的社群一直推动**「行动高于成果」**的活动。以这样的态度去做主动学习,原本想要推广自己对技术的一些思考,却发现意外获得了更多技术干货。

将大家发布的内容做个简单整理,其实有很多可以随手产出的知识点,比如:

  • 业务思考:理解业务和公司的目标,同时也要多思考业务,想着有没有通过技术手段来提升业务价值,比如移动端的白屏时间减少,可以带来很好的用户体验,提升用户的留存率。
  • 技术思考:思考业务开发中的一些痛点,如何用技术手段去优化业务的开发流程,提升开发效率,比如为业务量身定制一款脚手架工具等。
  • 优化工作流程:不仅可以从熟悉的需求-开发-联调-测试-上线的每个工作环节做出思考分析,还可以思考每个环节有没有可以提升的点,特别是上线过程,比如能不能做到自动化、能不能做到小流量上线、能不能及时回滚代码。
  • ……

所以技术产出,把工作中遇到的一些问题的解决方案、学习的一些新技术,产出的一些技术项目总结下来,作为技术分享和输出,这样一是可以总结沉淀你的技术,二是可以让大家能知道你做的东西,三是锻炼自己的表述能力,这个能力在大公司的晋升述职中非常重要。

行文促进观察,产出就会思考。 内容积累足够多的人,才会在用到的时候信手拿来。

本文分享自微信公众号 - 前端迷(love_frontend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三年前端,面试思考(头条蚂蚁美团offer)

    可以看出,我是个很喜欢折腾的人,大学期间也做过很多项目,非常愿意参与到产品中去。技术上勉强合格,不过独自负责过很复杂的前端项目,所以一般基础面试题还有项目经历都...

    前端迷
  • [vue源码][nextTick]原理以及源码解析

    nextTick Vue中的 nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于 nextTick的源码涉及到不少知识, n...

    前端迷
  • 大前端面试宝典 - 图解前端

    这不仅仅是一份用于求职面试的攻略,也是一份前端er用来检视自己,实现突破的宝典。 希望通过这个指南,大家可以打通自己的任督二脉,在前端的路上更进一步。

    前端迷
  • 5G来了,金融科技行业将有哪些变化?

    回顾过往,从2G到2.5G、3G、4G,再到如今的5G网络,短短二十几年,通信技术的每一次更新迭代,对社会经济都有着深远的影响,是科技革命和产业变革的重要驱动力...

    iPayLinks
  • 推荐几个Spring Cloud学习资料

    研究Spring Cloud也有一段时间了,手头上有一点收集的资料,分享给小伙伴们学习(公众号不允许外链,所以排版效果不太好,有兴趣的小伙伴点击文末阅读原文)。...

    江南一点雨
  • BlockStack身份授权流程

    去中心化身份的前提条件,是在同一个身份平台所能覆盖的范围内,用户的身份识别和检测标准统一,作为区块链应用开发基础设施的服务提供商,BlockStack 在数据权...

    rectinajh
  • 编码习惯之Controller规范

    Controller规范,主要的内容是就是接口定义里面的内容,你只要遵循里面的规范,controller就问题不大,除了这些,还有另外的几点: 1、所有函数返回...

    lyb-geek
  • 我的编码习惯 —— Controller规范

    第一篇文章中,我贴了2段代码,第1段是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终交付的代码,从15行到1行,自己感受一下。

    Java团长
  • 程序员你为什么这么累【续】:编码习惯之Controller规范

    由于昨天小编没有睡好,犯了两个错误(作者写错+第二张图贴错),重新发布纠正一下。非常抱歉,感谢大家的关注...... ——请先阅读这2篇文章: 程序员你为什么这...

    程序猿DD
  • 后端程序员都做些什么?

    这个问题来自于QQ网友,一句两句说不清楚,索性写个文章。 我刚开始做Web开发的时候,根本没有前端,后端之说。 原因很简单,那个时候服务器端的代码就是一切:接受...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券