前端程序员：月薪5K到5万，我干了啥

摘要： 高贵的前端程序猿们： 如何在前端开发这种高精尖的技术领域找到心仪的工做？实如今咖啡馆喝喝咖啡敲敲代码就能升职加薪、买房买车、迎娶白富美走上人生巅峰的职业梦想？这篇《进化论：从 0 到 100，前端猿茁壮成长的精神饲料史》，确定能给你事业的加速动力。

高贵的前端程序猿们：

如何在前端开发这种高精尖的技术领域找到心仪的工做？实如今咖啡馆喝喝咖啡敲敲代码就能升职加薪、买房买车、迎娶白富美走上人生巅峰的职业梦想？这篇《进化论：从 0 到 100，前端猿茁壮成长的精神饲料史》，确定能给你事业的加速动力。

前端开发工做已经变的愈来愈复杂，仅仅是想罗列一份前端开发的学习列表就已是一件艰巨的工做。曾经只要会编写 HTML, CSS 和 Javascript 就是可以找到一份前端开发工做的所有要求。而如今，web 开发远远不止是简单编码。由于咱们的互联网上有了更多的内容，也由于有更多的人、更多设备能够访问互联网,  web 前端开发技能也就更多了。咱们如今须要考虑的问题不少，好比载入时间，性能，不一样的屏幕尺寸, 不一样的输入方式, build 系统, 部署策略，还有如何组织好咱们的代码。

这仍是想象中前端开发么？好吧其实只要你有热情，这些仍是颇有趣的，如今就来仔细看看，一份前端开发的工做，到底须要你准备些什么?

入行行头：5 大硬件

请准备好如下东西

1. 一颗人类的大脑：智商在平均水平线以上便可
2. 一份强烈的渴望：个人代码要能够运行在任何一个有浏览器的设备上。
3. 一台笔记本电脑：不须要花费不少钱得那种，只要它能够运行 Windows, Mac OS X, 或 Linux 系统。固然你也能够只用一台台式机，可是那样就不能带着它坐在咖啡馆里…
4. 一个文本编辑器：能够推荐的好比 Atom,Visual Studio Code, TextMate, 它们都有在 Mac OS, Windows 的免费版本，什么还有 Sublime, WebStorm? 啊，那些都很流行，不过须要须要一笔很多于 70 美圆的花费…
5. 一个代理：这个你们都懂的，我就不解释了

初级资质要求

一些专业基础

你须要学会浏览器能理解的三大语言：HTML, CSS, Javascript – 神圣的三位一体！

很是重要的一点是，必定要理解这三大语言后再去学习别的，确保知道怎样在各类尺寸的屏幕上排列好你的网页，怎样在一个按钮被按下后 do something!

一些颇有用的学习资源

• Codeacademy: interactive, code-along tutorials (this site is the bomb btw)
• Web Development for Beginners: article from webplatform.org.
• MDN：https://developer.mozilla.org/en-US/docs/Web

中级进阶路径

一旦掌握了三大语言，就能够开始学习专业的开发流程啦：

1. Command line：好吧,命令行也许都会,可是要掌握最基本的操做,熟悉怎样配置你的环境,还有那些奇怪的 shell 脚本，由于你会常常用到它们。
2. CSS 已经不够用了,咱们有了 CSS 的预处理：Sass, LESS。
3. 知道如何搭建一个 build 系统：Gulp 或 Grunt 这类的构建任务脚本器,编译 LESS 成 CSS, concatenating Javascript, minify 压缩静态资源, 选一个异步或同步的方式加载它们，而后一个好的 build 系统要能自动作到那些,包括一个本地的 web 服务器用于测试代码。
4. 代码版本管理，git。
5. 在 github 上分享你的代码！
6. 部署! 让你的网站上线。能够找一个免费的服务提供商，好比 heroku.com, https://pages.github.com

这些几乎就是现代前端开发者会用到的工具和技术，好了，你如今能够成为一个前端开发工程师了。

高级炸裂装备

你已经可以为你的朋友的业务搭建一个网站了，简洁的排版，高清大照片，你成功了，它甚至在你的手机都看着很棒。那么还有什么值得学的？

把你的网站和一个内容管理系统 (CMS）集成在一块儿。一个 CMS 可以让你经过用户界面增、删、改、组织你的内容，不须要任何代码。这就是那些博客网站如何工做的。好比免费的 WordPress，去熟悉一个开源的 CMS 吧，会颇有用的。

学习怎样搭建一个 CMS，意味着你讲要熟悉一个服务器端的语言，好比 Node.js, 或 PHP，而后你还会想要知道怎样和数据库打交道，好比 MySql 或者 MongoDB。

来熟悉一种 Javascript 框架吧，这样你能够真正的搭建一个交互出色的 web 应用，那真的很重要，好比 Angular, React, Ember。只要挑一个你喜欢的，可是必定要精通它。

Javascript design patterns，javascript 也有设计模式？ 是的，读一下吧。

突破天际的大招

沟通技巧！你须要和你的小伙伴们沟通，他们是你的 coder 伙伴，你的老板，你的用户，你的….stackoverflow.com， 有问题找 stackoverflow，扩展一下人脉把，上 meetup.com, 在博客上写一些你的学习体验， 在 Gitgub 贡献一下你的 Pull request。

界面设计和用户体验设计 UI/UX design，前段开发的小伙伴须要具有基本的 UI/UX 设计知识。

搜索优化，要知道怎样提升网站的搜索排名，更容易被人们搜索到。

CSS 过分效果，给你的按钮写一个 hover 的 CSS 动画，还有你的从右边滑入的导航菜单也须要一个平滑的动画。

关于性能，让你的网站尽量快的被加载，减小 DOM 的 reflow 和 repaint 操做，防止滚动性能瓶颈，优化 Javascript, 读一读这个吧 google web developer fundamentals。

用一些测试框架来实现 Javascript 单元测试，好比 Jasmine，QUnit。

持续集成 Continuous integration (CI)，知道怎样配置一套和伙伴们一块儿使用的自动测试和部署的工具，好比 CircleCI, Travis CI, Jenkins.

超好用的其余加成技能

↓↓↓这些并不是必须，但能帮你脱颖而出：

用 CSS3, SVG, Canvas API 实现动画。

后端开发， Node.js

最后：去找工做吧！

有了技能是不够的，你须要能展现它们，你还能干的是：

1. 搭建一个小网站，公开你的 gitub 代码库，确保你的代码和文档清楚漂亮，还有一份 README
2. 去 meetup.com 找你的老板或者投资人吧，开一个博客，申请一个 linkedin 账号
3. 由于 web 技术老是在变化，最后，即便找到了一份趁心的工做，仍是须要 stay motivated, 你须要时常去下面这些地方转转：CSS Tricks，SitePoint，Smashing Magazine
4. 固然还有些像 CSDN 这样中文社区，总之遇到任何难题，社区里有总有乐于助人的。
5. 保持好的职业态度：Stay humble, and build cool shit

本文编译：刘晶，一个玩 web 前端开发的 code monkey，也喜欢 UI 设计，他还作事后端开发，现担任点融前端资深开发工程师。

 

来源：51CTO