极客时间已完结课程限时免费阅读

开篇词 | 从今天起，重新理解前端

开篇词 | 从今天起，重新理解前端-极客时间

开篇词 | 从今天起，重新理解前端

2019-01-14 winter 来自北京
《重学前端》
课程介绍

讲述：winter

时长10:48大小9.89M

你好，我是 winter。接下来的 3 个月里，我将带你重新认识前端。

前端发展史：从青铜到黄金时代

我自己是在 2006 年开始接触前端的。现在回想起来，那会儿前端还处于史前的“青铜时代”，甚至网页的主要交互都还是依靠切换超链接来完成的。

1. 前端的史前记忆：“青铜时代”

那时候，谷歌刚刚基于 Ajax 发布的 Gmail 也没多久，虽然这项伟大的技术标志着 Web 1.0（静态网页）到 Web 2.0（动态网页）的迈进，但在国内依然少有人懂，如果当时谁可以对这项技术侃侃而谈，那简直就是大神的级别了。
当时我还是个学生，喜欢前端纯粹是兴趣使然。那时我混黑白棋社区，想着给黑白棋界面写插件，但自己又不懂界面相关的知识，于是开始通过各种方式学习前端。
真想学的时候才发现网络上的前端资料很是稀缺，所以我基本上都是先从图书馆借书，然后再在电脑上跑案例验证这样的方式来学习的，现在想起来，还真是一段艰难的岁月。
当然，这段经历也为我日后的前端生涯悄悄埋下了一颗种子，我逐渐开始把自己的职业规划路线放在了前端上。
这在当时是个不可思议的想法，因为那时的前端岗位不论从收入上还是在职责上，都远落后于其他岗位。但是，我基于对技术发展趋势的判断，认为前端在未来会越来越重要。

2. 进入发展期的前端：“白银时代”

2008 年，我毕业了，也很幸运地得到了一个既能发挥我的 C++ 长处，又能兼顾前端发展规划的职位：微软北京的软件开发工程师，恰好负责的是 Windows CE 上的 IE 浏览器开发，在这里，我接触到了当时最先进的软件工程体系，并且积累了很多 UI 架构经验。
两年后，我加入了盛大做电子书，负责电子书的文本排版工作，这个工作是一个既写底层又写 JavaScript 的岗位，同时排版引擎也是浏览器的重要组成部分，也让我对浏览器的工作原理有了更深入的理解。
在盛大后期，我加入了 WebOS 项目，负责前端框架，我开始基于移动的角度思考前端交互和框架，这份工作让我离前端又近了一步。
但是很遗憾，因为种种原因，我在微软和盛大的几个项目都不算成功，除了电子书实际上市但销量不高，Windows CE 7.0 和盛大的 WebOS 都在公司内部夭折。
自己亲手构建的产品，却因为非技术原因没有服务到最终用户，对我来说，是件非常遗憾的事情。不过，这段时间，也让我更加确信前端技术的价值。
回过来看，那几年，前端技术开始了它的大踏步发展，那一段时间，可以说是前端的“白银时代”。最直观的表现之一就是前端逐步从后端分离了出来，它的代码也变得复杂了起来，还需要保存数据、处理数据、生成视图等等。
悄然之间，我发现前端已经从零散的“工序”逐步发展成为有体系和发展目标的职能，同时，在越来越大的前端团队中，工程化的思想也逐渐萌芽。我深有感触，前端已经不再是别人眼中的“小菜一碟”了。

3. 从前端到“全端”：“黄金时代”

在这样的行业背景里，从盛大离职后，我加入了阿里巴巴做手机淘宝开发，这也是我首次从事真正的前端工作。
在手机淘宝，前端团队的各种基础设施也逐渐建立了起来，从最开始的多屏适配方案、基础库、工具链到页面搭建平台和性能体系，最后到客户端融合方案 Weex，我随着团队一起经历了业务发展、团队自身成长和行业变革。
与此同时，在我加入阿里巴巴后的这段时间里，随着移动时代的到来，前端也开启了自己的“黄金时代”，它的职责变得更加重要，有了独立的发布权限，技术也变得更加复杂。
一些传统软件开发和互联网服务端的方法论逐步移植到前端开发中，并形成了前端自己的工程体系，诸如持续集成、前后端分离、线上监控……
架构方面，前端架构的任务也从简单的解决兼容和风格问题，逐步过渡到提倡组件化和 UI 架构模式，最后形成了新一代的前端框架 React、Vue 和 Angular，他们也在竞争和互相学习中成长。

前端开发之痛：散点自学 + 基础不牢

正当处于“黄金时代”的前端技术在全力以赴极速前行之时，我却发现，前端开发者们的步伐似乎渐渐有些跟不上了。
因为在我职业发展的后半段，面试和培养前端工程师已经成为我的长期工作职责。在这期间，我意识到，目前的前端教育几乎是完全缺失的。
在面试应届生过程中，我会习惯性地问表现比较好的同学“你是如何学习前端的”，而我得到的答案多是“自学”“在社团学习”，却从未听到过“在学校学习过”这样的答案。
而对于工作之后的前端开发者来说，没有系统学习的问题仍然存在，常常有一些具有多年从业经验的工程师，仍然会在看到一些用法时惊呼：“还可以这样！”
在我看来，这些用法都是一些基础的不能再基础的知识点，但是他们却浑然不知。
如果深入进去了解，你会发现，表面上看他们可能是一时忘记了，或者之前没注意，但实际上是他们对于前端的知识体系和底层原理没有真正系统地理解。
在阿里工作的时候，我戏称很多同学学前端的方式是“土法学前端”，他们对于知识的理解基本都停留在点上，从来没有大范围把这些点串成线，形成自己的知识体系，因此才会出现上面说的遗漏和盲点。
这个问题在一些一直在小公司工作的前端工程师身上非常突出。
经常能看到一些案例，一些有技术追求、有热情的工程师，因为技术敏感度和主观能动性都不错，所以工作了五六年之后，逐步开始在自己的公司做一些技术管理相关的事情了。
但是，由于他们所在公司的业务并不复杂，也没有技术积累，所以他们自身的技术水平其实并不高，可以说还处于非常初级的阶段（可能面试连阿里 P6 都过不了）。
做了管理，技术没跟上，并且还错过了最佳的学习时间，这个境遇可想而知，他们在工作中大概率只能是被动地接受需求解决问题，然后也同时焦虑着自己的未来，焦虑着自己的竞争力。
关于前端工程师成长，我认为需要两个视角。一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论；二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。只有这样做，才能够持续发展，在高速发展的技术和工程浪潮中稳稳立足。
这也正是“重学前端”这个专栏的初衷，我希望提供一些视角，带你以完备、体系化的方式理解和思考前端的基础知识和工程实践。
除此之外，前端工程师也是开发工程师的一员，除了前端自身的领域知识和工程特点外，你还需要了解程序员通用的编程能力和架构能力。
所以，想要成为优秀的前端工程师，我觉得你需要通过系统地学习和总结获取知识，通过练习获取编程能力，通过工作经验来获取架构和工程能力。
当然，一个为期 3 个月的专栏无法穷尽前端庞杂的知识，讲知识点也不是我们的目标。知识点讲的再好再全，也不一定能记得住。
我们专栏的目标是帮助你建立自己的知识体系，根据你自己的理解把前端的领域知识链接起来，形成结构，这样做，不但能帮助你记忆知识，还能在其中发现自己知识的缺失，甚至可以凭借知识体系来判断知识的重要性，来决定是否要深入学习。
在这个专栏里，我将知识分成了四个模块来讲解：
JavaScript；
CSS 和 HTML；
浏览器实践；
前端综合应用。
前三个模块是前端的基础知识，是个人的前端能力提升，而模块四则是前端团队发展相关的内容，有助于你和团队的整体提高。
在 JavaScript 部分中，我主要会从文法和运行时的角度去讨论 JavaScript 语言。它们是互相关联的，而语义就是文法到运行时之间的桥梁；它们分别又是完备的，任何语言特性都离不开两者，所以从语法和运行时的角度，我们都可以了解完整的 JavaScript。
CSS 和 HTML 部分，会侧重从语言和设计思想的角度来讲解，我们同样可以对两者的全貌建立一些认知。
浏览器部分，包含了浏览器工作的原理和一些重要的 API，包括 BOM、DOM、CSSOM 和其他一些内容。了解了这些知识，你才能把 JavaScript 和 HTML、CSS 连接起来，用 JavaScript 来实现功能。
前端综合应用部分，主要是我的一些工作经验，我会选择我在手淘和淘宝工作中的一些案例来辅助讲解。
前面，我说到前端是一个非常年轻的职业，但我仍然认为前端具有很多空间和机会，一些基础设施仍然简陋，前端的能力可以带来更多的业务场景，这些有待于我们去发掘。
前端社区非常活跃，新技术也在不断出现。在这样的环境下，机会和竞争并存，学习也犹如逆水行舟，不进则退，建立自己的知识体系和方法论，你才能够保持领先优势。
我希望从我的经验出发，给你一些启发和帮助，并借由这个专栏帮你建立自己的前端知识体系。同时，我也相信，在你们中间一定会产生更多能够带领前端领域取得突破的、优秀的前端工程师。
最后，也希望你能和我分享你的前端故事和经历，你是怎么走上前端道路的？你希望将来成为怎样的前端工程师？欢迎在留言区与我分享。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享

赞 299

提建议

© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
下一篇
明确你的前端学习路线与方法
 写留言

精选留言(428)

  • 无敌娜娜
    2019-01-14
    作为一个已婚未育准备去异地生活换工作的女前端，还不是本专业自学的，这几天找工作尝到了人生百态，希望通过这个学习，可以让公司注重我的能力而不是已婚未育，毕竟真没打算这么早生娃，加油加油加油，向大牛看齐，渣渣也有美好的明天😊
    共 12 条评论
    383
  • 郑旭
    2019-01-14
    目前我就在自学前端，大概也属于土法，瞎看，像没头苍蝇一样。 说说用到的我觉得比较好的资料吧。 https://www.theodinproject.com/home odin project： 一个小的教程合集，作者列出学习步骤和每一步的实践项目。 后端部分是学习rails，我就不打算看了。 frontend master 上边都是一些国外有名前端开发者讲的课。最出名的应该是You don't know js的作者的课吧。javascript讲的不错。CSS flexbox and Grid 我觉得挺不错的。CSS in depth没有很多实际的例子，但知识点很全。这个网站课程大都是讲知识点，实践项目比较少或是比较初级。 然后在油管上搜一些小教程，演示如何做网站，或是一些特殊效果。 面对茫茫多的CSS知识总感到很茫然，看到codepen上不管是炫技还是实用的trick，都会感慨自己啥时能学到那个地步。
    展开

    作者回复: 感谢分享，不必羡慕，我想建立知识体系的目的就是让trick不再是trick，真正有价值的东西永远是建立高楼大厦的工程知识，而不是雕刻在砖面的小花纹。

    共 3 条评论
    182
  • 恋着歌
    2019-01-14
    希望老师能介绍一两个，活跃的前端社区。以及怎样参与进去，影响社区和个人。

    作者回复: 现在传统社区不行了，最活跃的可能是npm和github

    143
  • 假巴尼
    2019-01-14
    培训机构出来的，但是对it行业充满了敬意
    共 1 条评论
    115
  • 徐三响
    2019-01-18
    2016年，是我大学时光的最后一年，也是我从生物工程专业正式转入前端的开始。正式开始前端工作是2016年10月份，是一家创业公司。前半年我一直在维护公司的一个老项目，开发一些新功能（非常迷茫的半年）。非常幸运，在2018年初公司来了一位新CTO（阿里老P9大神），从此我便有了奋斗和学习的目标。不久，我便跟着他重构了公司的4个项目（我独立负责前端的开发和搭建），同时也做起来CTO助理的工作。项目从0到1的阶段结束后，我顺理成章的成为了前端组长（其中有坚持学习了半年 java，想在内部转型，后来因为前端缺人，写了一个java模块后又继续干前端了）。直到2018年11月，我换了新工作，转型java失败的我，决定全身心投入前端的工作和学习。直到2019年年底，我读了《javascript高级程序设计》《你不知道的javascript上册和中册》《前端架构设计》《javascrip数据结构和算法》《nodejs实战》《图解http》《linux菜鸟～未读完》还读了很多文档，一些小册，持续学习英语，项目中实践工程化，node微服务，优化前端工作流，基础库等。。团队中普及git，普及项目管理，等等。。作为一个93年的90后，至此为止从事前端工作已有2年，自知还有很多不足，我最喜欢的一个词叫“厚积薄发”，我为自己的前端之路代言。——摒弃浮躁，厚积薄发，PandaTsui祝大家新年快乐。
    展开
    共 3 条评论
    79
  • Gloria
    2019-01-15
    嘿嘿～大二准前端程序媛前来报道#^_^#我爱前端！软件工程专业，web前端与信息技术方向，已形成自己的知识体系与学习路径，不断完善枝叶中，我要成为一位强大的前端程序员，不破楼兰终不还！！！

    作者回复: 气势不错。

    共 6 条评论
    69
  • 木子烁束岸
    2019-01-14
    不得不说这营销真的很成功。骗走了我的第一次……在极客时间买专栏。没办法，这痛点戳的太准了。尤其这些年半道出家的前端真不少。我认了。希望有收获
    共 3 条评论
    58
  • 荏苒
    2019-01-14
    2014年毕业，找不到工作半路出家学Java 第一份工作，“新来的，写服务的人够了，你去写页面”

    作者回复: 也是一种缘分

    共 2 条评论
    53
  • 个人学习
    2019-01-14
    一直全栈开发，然而每次前端花的时间最长，希望通过学习少走一些弯路。
    共 4 条评论
    41
  • 宁静致远
    2019-01-14
    做了管理，技术没跟上，并且还错过了最佳的学习时间，这个境遇可想而知，他们在工作中大概率只能是被动地接受需求解决问题，然后也同时焦虑着自己的未来，焦虑着自己的竞争力。 理解的这么深透，这就是我的瓶颈！

    作者回复: 面试这么多年，见了太多感叹可惜的案例了，希望你能有所突破。

    共 4 条评论
    36
  • Thoughtful valiant...
    2019-01-15
    今年大四了，因为专业原因自学了一些WebGL，从而对前端产生了兴趣。 从看《高程3》到《权威指南》，进入大四以来的5个月，基本把论坛中各位推荐的当年的“神书”学了一遍。又开始学阮一峰老师的ES6，再到跟着React官方文档学习。还买了一些课程和小册学习。接下来还要学Redux，Dva，Node等等等。 感觉前端要学好多，但是一想还有那么多要学，自己又莫名的开心。希望自己能一直这么有动力！ 希望能从老师的课程中解决自己学习前端的痛点，同时还希望自己的前端之路走的更加顺畅，更体系划，加油！
    展开
    28
  • SQYuns
    2019-01-14
    w老师刚好说到了我的痛点，前端我一直都是一个人在自学。学校又只教c。学的很多知识比较零散，为了更加系统化地学习前端。我开始用思维导图来做记录我学习的知识，但却一直缺一个指点方向的老师。今天我选择了你，希望老师也能不辜负我们对你的信任
    27
  • lovedebug
    2019-01-14
    作为一个喜欢的前端的后端，其实前后端一起应证学习很有趣，也很深刻。
    共 1 条评论
    24
  • 棚头傀儡
    2019-01-15
    黑马培训半年出身，今年第一份工作就过万了，但是依旧觉得成长速度慢下来了，每天都是增删改查，样式bug调整，甚至学的好多东西都生疏了，我觉得前端能做的比我现在会的要多的多，我想做点深入的
    共 2 条评论
    22
  • 慎独
    2019-01-15
    学前端也算是半个培训班吧，在腾讯课堂上报了一个班。在前端的基础上讲的还算是挺系统的，这个讲课的人曾经也是阿里巴巴的，他讲课的时候还给我们提到过你，(他叫姬成不知道认不认识)。目前的还是大四还没有踏上工作，开年就要找工作了，加油加油！！。自认为js的基础还算行，希望能更好的提升。
    22
  • xianglong
    2019-05-21
    电子专业出身，爱好前端，培训半年，入坑四年，从最基础的html，css，js，jquery，浏览器兼容，图形渲染等等，到后来react，vue，webpack，nodejs，各种数据库应用，边学边运用到公司项目中，顺便整理自己的知识体系，也经常在各大社区贡献自己的微薄之力，一直是野蛮生长的状态； 然而，不断地加班熬夜赶项目， 最终导致了去年一场大病，无限接近死亡，损伤了记忆，目前养病半年有余，想要重新整理前端知识体系却发现，原有的项目开发经验变的零散难以整理， 期待能跟着大牛的课程重拾信心，重构知识体系架构，继续奋战在前端的战线上，同时提醒同为开发的朋友们，身体是革命的本钱，注意自己的身体健康
    展开
    共 2 条评论
    21
  • 唯一
    2019-02-18
    作为一个已婚已孕学历不高正在找前端工作的人来说，面试了很多公司，真是尝遍了人生百态，希望学习知识能成为自己的盔甲。以前工作的公司好多新技术都用不上，在一个岗位干了几年的的重复工作，在做了母亲之后对自己的人生有了新的规划和认识，只有自己一直在努力，才有资格教育自己的孩子，才能成为他的榜样。

    作者回复: 已孕这个真的是很难找了……

    共 2 条评论
    19
  • 郭光景
    2019-01-15
    Winter is coming, it's so cool!
    18
  • 958
    2019-01-14
    顺利找到工作就来还愿，会买下老师出的所有学习资料

    作者回复: 咱们不搞封建迷信那一套。

    16
  • Mavericker
    2019-01-16
    作为阿里员工也来捧捧场，希望能有所收获～
    共 1 条评论
    13