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

来源：|发布时间：2016-12-12|浏览量：

高贵的前端程序猿们：
        如何在前端开发这种高精尖的技术领域找到心仪的工作？实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪、买房买车、迎娶白富美走上人生巅峰的职业梦想？这篇《进化论：从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
 

上一篇：新一代信息技术产业加速变革 大数据产业迎发展机遇

下一篇：2017年热度最高的十大技术类技能