前端是怎样炼成的

图片来源: http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg

具体来说要如何成为一名前端开发？呃这个比较复杂。迄今为止你都不能在大学获得一个前端学位，而且我也很少听说哪个前端是拿着过时的CS（computer science）或者平面设计学位最后写出专业的HTML、CSS和JavaScript。事实上，大部分的前端工作者，哪怕是现在，几乎都是自我学习并且没有受过传统的程序员教育。这有什么问题吗？ Why is this the case?

前端开发不是视觉设计或交互设计。设计学校并不会磨练前端技巧。前端开发也不完全是受传统训练的CS学士，它们没有为前端开发做任何准备。实话说，跟随美国高等教育系统（大学）中的任何一条传统路径，都可以让人从入门的可能性中掉入体验为王的实践里。现在，如果你想要成为一名前端开发者，你要么自学，要么参加那些看似不被认可的项目、课程、训练营。

前端工程师琢磨用户界面所依赖的骨架。有时他们花了多少心思在交互设计上，就必须得花多少心思在创建UI交互底层代码上。因此，现如今的很多实践并不那么涉及编程技巧，而是来自其他领域。因此，前端开发领域看起来充斥着设计转职而来的开发者，而非程序员转职而来的开发者。当然，随着JavaScript的成长，很多受过传统训练的程序员也希望将他们的知识带到前端实践中来。如果你还是不清楚，简单来说就是前端开发并不被视为是“真正的”程序员。不过时间会变。

综上所述，我相信作为前端开发者的事业之路更多的是未知之路。我能说的只有要想成为前端工程师，你要充分深入了解并能够使用HTML、CSS、DOM、JavaScript，同时注重交互设计和编程实践。实际上，从我的经验来说，最好的前端开发者通常精通交互设计和编程，不过是从网络平台内容而言（也就是浏览器、HTML、CSS、DOM和JavaScript）。而无论出于何种原因，这些知识通常会被保留。也就是说，前端工程看起来更多是由那些自我学习的人去实践而来的，正好是在高等教育延伸领域的对立面。

如果你今日立志想要成为前端开发者，以自己是自己最好老师为前提，我会大致努力遵循下述途径。你停下脚步的地方，就是专业前端应用开发者与前端HTML/CSS开发分道扬镳的地方。

  1. 学习，网络是如何工作的。确定你知道“什么”是域名、DNA、URL、HTTP、网络、浏览器、服务器/主机、数据库、JSON、数据API、HTML、CSS、DOM、JavaScript以及它们都“在哪”。目标是确定你大体了解这些东西是如何协同工作，以及每个部分具体都做些什么。关注高度概括的前端架构。从简单的网页开始学习原生网络应用（也就是SPA）。
  2. 学习HTML、CSS、易用性和SEO。
  3. 学习UI设计模式、交互设计、用户体验设计和可用性的基础。
  4. 学习编程基础
  5. 学习JavaScript
  6. 学习JSON和数据API
  7. 学习CLI/命令行
  8. 学习软件工程实践（应用设计/架构、模板、Git、测试、模拟、自动化、代码质量、开发方法）。
  9. 弄一些适合自己大脑的自用、定制化工具盒。
  10. 学习Node.js

关于学习的一些建议。在学习抽象概念之前，先学习真正的底层技术。不要学jQuery，学DOM。不要学SASS，学CSS。不要学HAML，学HTML。不要学coffeeScript，学JavaScript。不要学Handlebars，学JavaScript ES6模板。不要只用Bootstrap，学UI模式。当你开始学习的时候，你最应该害怕的就是隐匿复杂性。在不当的人那里，抽象概念可以帮助他们造成拥有高级技巧的表象，实际却隐藏了他们对基础或底层概念的拙劣理解。

本书余下的部分包含了一些资源和工具，与上述所列步骤一致。我们假设你不仅仅是学习，而且在你学习的时候还研究相关工具。有些只给出了实作的建议，有些会给出学习实作的建议。我建议你找到符合你大脑习惯的组合并执行。不过当然了，这是组合！所以，不要只看不动手。学习，动手，学习，动手。不断重复，因为世界日新月异，瞬息万变。这也是为什么学习基础而非抽象概念是如此重要。

我要指出，最近涌现出大量的未经认证的前端学校/训练营。这些在教室或在线课程中成为前端开发的途径十分传统（也就是大纲、考试、测验、项目、小组合作、成绩等等）。我在本手册的直接学习部分会更多地谈到这些机构。简单来说，这是互联网，所有你要学的东西都在网上，随意自取（几乎没成本）。然而，如果你需要别人来告诉你如何获得那些实则免费的东西，并为你学习它们负责，你可以考虑参与课程。否则，我不知道还有哪个职业是只要联网并且有求知欲，就可以免费求索的

阅读/观看（反正都是英文的，就不翻译title了…）：