【扯】免费前端教程不会告诉你这些—知乎live摘录

本文大部分内容来自知乎live—免费前端教程不会告诉你这些

本文大部分内容来自知乎live—免费前端教程不会告诉你这些。

笔者感觉这里live整体质量不错，大纲如下：

对前端感兴趣的同学可以去听听学习一下，一定会受益匪浅的。本文重点摘录了前端的发展历史和前端进阶过程中的建议。

【观点摘录】

• 1 大厂不会在意你会不会某一个框架，他只在意你能不能再两个月之内快速学习上手一个新框架。

• 2 如果你已经工作三年了，别人是不好意思骂你的（当然有意提携另说）。但当你是新手时，就应该在空白期尽可能暴露自己的缺点，然后及时修补（一定要补）。

• 3 只有运气特别好时，公司的项目才可能带着你跑，一般情况下，公司的业务并不能带给你提升，码农需要有自己的side project。

• 4 看书|总结|输出（写或演讲）。学习的效果依次递增。

• 5 判断基础的方法：去找该专业最经典的书，看目录，然后在脑海中回忆这些章节的内容。看三本，就知道自己基础的薄弱处。

• 6 科班生和非科班生的差距仅仅是前者在无所事事时做了正确的积累，而你那时可能还在打游戏。

【前端历史】

1.混沌之初

在互联网诞生的初期，并没有前端工程师这一概念。网页一开始是由后端程序员开发的。其网站特点是无设计、布局简单、样式朴素，没有动画。因为他们是用table做简单的布局。

2.美工救场

后来由于审美需求，增加了美工这一职位，他们用ps制作网站的设计图，然后编写css+div布局的html（该方式替代了table布局）。

3.gmail发布

2004年google发布gmail，这一里程碑标志着web app的概念正式登上历史舞台。全世界的程序员发现利用js居然还能做出具备pc端功能的应用。于是乎，有一部分程序员开始着手于js的研究。

4.前端第一次革命——ajax

gmail出世后，越来越多的后端工程师投入到js中去，从JavaScript的命名也能看出，js早在前期有讨好java程序员的倾向。

ajax本质是利用js发送http请求，并将获取的数据填充到页面中去。微软是最早使用js发送http请求的，早在IE5里，微软就内置了一个对象可以利用js发送请求。可以说微软提出了ajax的概念，google发扬它。

此时编写网页的模式就是：美工负责页面细节+后台编写业务逻辑+后台编写js完成交互

5. 提升用户体验阶段——前端工程师粉墨登场

在用户体验不断被强调的背景下，页面里js的复杂程度随着交互的复杂不断提升。后台程序员在维护js代码上表现地越来越分身乏术，毕竟他们还需要维护后台的逻辑。在这种情况下就需要一个人员，专门来负责编写页面当中复杂的js逻辑。至此，前端工程师正式登上历史舞台。

此时的工作模式如下：
（1）设计师：负责网站设计稿和标注
（2）后端：负责网站后台业务逻辑
（3）前端：负责网站的表现和交互部分（html+css+js）

这样的工作模式使用一段时间后，就发现了一些问题。

前端的html代码是依赖于后端的模板引擎的。例如html文件正在后端是以jsp的形式存在的，那么前端在编写js部分的代码时，若果想要看到完整的页面，就必须具备与后端相同的开发环境。

也就是说，前端工程师需要把后端的代码放在本地，然后将后端工程运行起来，成功之后，再在jsp（模板文件）里编写js代码。

所以，这样就容易导致前后端分工不清，而且在开发流程上存在比较严重的依赖关系。

6. 剥离阶段——前后端职能强化

从第5个阶段的描述可以看出，在传统的服务端渲染页面模式下，前后端存在分工不明确，开发流程耦合的情况，为了提升开发效率，必须做适当的剥离。

（1）html完全由前端控制，后端服务化，不再触碰UI层。
（2）数据接口化。后台提供接口供前端调用，前后端通过ajax的方式通信。
（3）人员分离。前端后端一拨人，后端一拨人。

至此前后端的配合模式定型。但是新的问题也出现了，虽然不是技术上的问题。

这样分工协作后，我们再来梳理一下前后端的职能：
（1）前端：负责页面样式、UI。
（2）后端：提供接口服务（业务逻辑实现）；转存数据至数据库；

那么对于公司而言哪个职位更重要呢？答案一定是后端，因为他管理着重要的数据和核心业务逻辑的强验证（虽然前端也会验证，但是前端的强制性明显弱于后端）。前端呢？负责UI。

因此可以看出前后端分家后出现了一个新的问题：职能强化了，但能力范围缩小，致使前端看起来“不那么重要”。

7.前端第二次革命——移动端设备兴起

移动设备兴起带来最直接的挑战有如下几点：
（1）适配。硬件设备（主要是屏幕）的适配（响应式）和移动端浏览器内核的适配。
（2）页面性能优化，尤其是在弱网情况下的快速访问能力。

此时在移动端的浪潮中，前端的地位进一步的强化，至此前端开发的概念也开始有了细分：
（1）客户端开发：特指android开发和IOS开发
（2）PC端开发：PC浏览器里网页
（3）H5：嵌入在移动设备里的网页
（4）PC客户端：不依赖于浏览器的PC桌面应用。

上述4个领域的内容，在后期被合并成一个词——大前端。

8. 第三次革命——Node.js 闪亮登场

nodeJS的革命性在于：它让JS的运行脱离了浏览器。这就意味着在前端工程师可以利用js在桌面、服务器、甚至移动端编写js代码。极大地丰富了前端工程师的开发场景（有点像万金油的德鲁伊）

在性能优化的过程中，我们时常需要对图片、代码进行压缩，打包，以减少浏览器的请求次数。同时，由于开发内容的日益增多，提高代码的复用性也被越来越多的前端工程师重视。于是自动化和模块化的呼声越来越高。

在自动化方面，出现了几款比较有代表性的工具，例如grunt、gulp再到后来的大名鼎鼎的webpack。当然伴随着这些工具诞生的，还有成千上万的插件，诸如解决兼容性的babel、压缩JS的uglyfy等，可谓是百花齐放。

在模块化方面，首先是对css的模块化，出现了诸如sass、scss的利用函数编程的方式编写css的库，提升前端工程师对css的复用程度。

接着是js方面angularJs，vueJs，reactJs，在ES6的基础上应用而生，同时还伴随着诸多优秀的UI组件库，例如antd、谷歌的material 。极大地丰富了前端工程师在开发工程中的选择性。

在node的加持下，js能力的不断提升，js开始向各个领域延伸。

• 移动端H5:angularJS、vue、react三分天下。
• 客户端开发：react native（本地跨平台）、Ionic（加载移动浏览器）
• 服务端开发： 以Koa和express为代表的框架
• 桌面客户端： node（后台进程）+webKit（UI层）模式的NW.js、electron

那么到这里，就可以看到js所延伸的领域已经非常广泛。虽然前端程序员“抢”了不少活儿，但是综合上来看，工资与后端、算法工程师之间依然存在差距。

【关于JS万金油的思考】

从上述历史可以看出JS涉猎的范围在不断扩大，似乎只要会了JS，各种以JS为编程语言的框架就已经算入门了，那么是不是意味着之前传统的工程师们会被前端工程挤兑不？

答案肯定是否定！原因概括成一句话就是：编程语言是共通，但都有自己特定的套路。

以后端为例，在编写服务应用时需要考虑非常多的问题，例如：
（1）内存泄漏问题；
（2）程序的并发性；
（3）与业务耦合的权限的控制；
（4）与数据库的链接，以及跨进程通信；
（5）服务端的缓存，会话的保持。
这些问题对于一个只写过html+css+js的前端程序员而言都是陌生的。可能他能够快速上手编写后台应用，但是却很难在没有打通关键点的情况下编写出高质量的应用。

再以android为例子，依然是存在和上面相同的问题，所以往往在实际开发的过程中，团队配比都是：若干个XX工程师+至少1位资深android工程师+至少1位资深IOS工程师。之所以都是资深的原因很简单，那就是当混合开发出现了难以解决的问题时，就需要这些资深的原生工程师去填坑。

所以JS跨平台跨领域的特性并不能完全挤兑掉已有的工程师们，但是一定程度上会增加他们所在领域的技能专精。即数量可以减少，但质量会提高。

【前端进阶】
一年前端：

• 从60分到80分：不再仅仅满足能用，同时要关注用户体验，完善功能。
• 模仿组件：看一下别人的代码，不要复制粘贴，看的差不多了自己手动写，然后对比，删掉，再重写写，如此往复。
• 不要重复自己：在工作的过程中，不要重复自己所做的内容，要么所有改进，要么换一个岗位。
• 不要满足于调用API：能不能制作一些东西给别人用。

三年前端：

• 不在关注代码写的好不好，关注工作效率。尽量不加班，把常用的工具封装成组件，供自己或别人调用。或者把自己遇到的问题记录下来，避免自己后面再犯错误。
• 做一些分外的事情：后端、产品、设计。
• 管理上级，笼络评级（处理好人际关系）
• 变成重要的人：对产品能够有深入的了解，记住了工作中重要的事情。（是不是别人有问题都来问你？）
• 坚持写博客：对于产品、工作过程中思考和总结。
• 模仿框架

笔者个人订阅号~欢迎小伙伴们关注

若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211