当你满腔热情,一门心思只往前端事业发展时,如何成为一名优秀的前端工程师。

什么是前端工程师?总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术,在工作中配合UI设计师实现用户界面,和后端工程师进行数据对接,完成 Web 应用开发的职位。

 Front-End-Engineer-1

先来个下马威

Front-End-Engineer-all

别害怕,没有人能把这些都学个遍,学好基础,拎一部分,满足工作中的业务需求就可以了。

梳理清楚知识体系框架

学习一样东西,首先得先去了解它的定义,和大概的框架结构,梳理好思路,然后再一个萝卜一个坑,循序渐进的去丰富自己的知识体系。有人说,前端东西多而杂,你今天刚弄明白一框架,明天又出一新框架,其实大可不必去理这些花里胡哨的框架,毕竟在真正的工作环境中,你是一名业务驱动型的程序员。

好了,废话不多说,先上菜

Front-End-Engineer-1

是不是感觉前端东西不就这几样吗??别急,这里面看似简单,每一门学精了,没个三年五载的,你都不好意思说你会。

expression-1

万事开头难,一步一步来,如今充斥着各大前端框架理念。”MVVM”、”MVC”、”MV*“、”模块化”、”高性能”等等,您可别被这些迷住了眼,不都得先打基础,HTML、CSS、JavaScript这三门语言就够你喝一壶的(你再牛逼的框架不也是用我们写的吗),即使你已经工作三五年了,这里面有零碎的知识都有你不知道的;所以不管你现在已经在哪个阶段,学习基础知识的劲头可不能减。

这时候你的知识体系就是这样了

expression-2

切勿纸上谈兵

该看的都看了,该学的都学了,不能光说不练,得用起来.

expression-4

资深WEB前端工程师

这个方向算是一个 WEB 前端最基本的选择了,在国外,很多老外都能够把自己的专业做到极致,能一辈子就在一个专业领域不断学习和积累。主要在于内因和外因 两方面,内因是老外通常思想比较简单直接,容易一直专注于一个领域;外因是国外的环境很好,能够良好的支撑这样的职业发展道路。反观国内,从内因来讲,WEB前端技术人员还是蛮浮躁的,通常会因为 WEB 前端知识的更新速度太快而觉得学习起来辛苦,最终转向后台或其他道路。

从外因来讲,WEB 前端人员 没有获得公平的待遇,可能从 HTML 页面制作就开始并沿袭下来的,从来WEB前端人员都比后端人员低一等,貌似前端就是“浅显”的代名词、后端就是“深 奥”的代名词,这也直接造就了前端人员的收入无法和后端人员媲美,同时直接影响到前端人才市场的活跃程度。另一方面,前端的技术入门较容易,造成另一个极 端情况:人员泛滥、人才稀缺。我想对所有的 WEB 前端工程师说:面包总会有的,要耐得住寂寞!我个人比较推荐这个职业发展方向,因为,在这个方向下,只要 足够耐心、厚积薄发,成功的概率是非常高的。同时,这是一条最单纯的路,我们更多的是花费精力在技术的钻研上,而不是办公室政治等其它琐事。

多写,多编,要做一名”网红”

1.我觉得博客当然是用来写总结性的东西,它能帮你梳理下整个过程的要注意的地方,写写你在工作中遇到的问题,用来记录和回顾。

2.至于怎么梳理框架,还是看你博客定位了,如果偏向科普类型的,自己看着爽也要别人看的爽,当然是写的面面俱到然后加配图。如果是类似自己笔记类型的,可以稍微简单的写,提示性的。

可以考虑(github pages 或者 gitcafe pages)+(静态博客比如 hexo, octopress)+(markdown 写作)。符合程序员气质。

最主要是数据都归自己管,还可以本地随时查看,对外是博客,对内跟建立自己一个知识库一样。

写博客贵在坚持,这玩意也是见效很慢的东西,你写多了你会发现你不仅是在技术方面的进步,写作,写文档,表达也会有提高的。

而且发现评论里面有能帮助到别人,自己也会有莫名的成就感。

HTML5、CSS3 真的没JS重要?

现在大多数的Web开发者,大都是对基础简单扫一遍,专门研究JS框架去了,什么 Vue、Angular、React 等等,倒不是反对这种做法,虽然这样做,看起来在现实应用场景和暂时找个不错的工作看起来有利一些,但是却大大的限制了自身长期的职业发展;而在前期,我是更加的去注重基础,愿意花更多的时间去了解原生的东西,也不是说我过于保守,只不过是”我在没烧好一块块砖头的情况下,我可不敢去盖大房子”;例如,Saas 效率再高,不也得转换成 CSS 让浏览器去解析,JSX看起来再邪乎,在浏览器大爷面前不也得装JS;当然,我主要去了解各种框架的设计思想,和它实现功能的方式;具体工作中用到时,我会深入研究。

同样也有人说了,玩 CSS 有什么难度,不就不布布局,改改风格吗。是的,但是,想玩好了,可不容易,个人推荐张鑫旭的博客张鑫旭,这是一位长期研究CSS的大牛;相信前端工程师听到他,应该不会陌生。

废话少说,上第二道菜。

roll

谷歌浏览器效果图

神奇吧,这就是 CSS3 吸引人的地方,喜欢各种动画交互的人,肯定会对CSS3的新特性爱不释手;也不是说JS做不到,只不过是 JS 相对 CSS3 要说,要进行重绘,这对浏览器的性能来说,会大打折扣,所以”CSS能实现的,尽量别用 JS 去实现”。

附上代码

HTML
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
CSS
    html,body{height:100%}body{background:radial-gradient(ellipse at center,#34679a 0,#214163 47%,#0d1926 100%)}body>div{position:absolute;top:12%;left:50%;margin-left:-103px;width:200px;height:200px;border-radius:50%;border:1px solid #fff;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(80deg) rotateY(20deg);transform-style:preserve-3d;transform:rotateX(80deg) rotateY(20deg)}body>div:first-of-type:after{content:"";position:absolute;height:40px;width:40px;background:#fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(0);transform:rotateX(-80deg) rotateY(0);box-shadow:0 0 25px #fff;-webkit-animation:nucleus_ 2s infinite linear;animation:nucleus_ 2s infinite linear;left:50%;top:50%;margin-top:-20px;margin-left:-20px}body>div:nth-of-type(2){-webkit-transform:rotateX(-80deg) rotateY(20deg);transform:rotateX(-80deg) rotateY(20deg)}body>div:nth-of-type(3){-webkit-transform:rotateX(-70deg) rotateY(60deg);transform:rotateX(-70deg) rotateY(60deg)}body>div:nth-of-type(4){-webkit-transform:rotateX(70deg) rotateY(60deg);transform:rotateX(70deg) rotateY(60deg)}body>div>div{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;-webkit-animation:trail_ 2s infinite linear;transform-style:preserve-3d;animation:trail_ 2s infinite linear}body>div>div:after{content:"";position:absolute;top:-5px;box-shadow:0 0 12px #fff;left:50%;margin-left:-5px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:particle_ 2s infinite linear;animation:particle_ 2s infinite linear}body>div:nth-of-type(2)>div,body>div:nth-of-type(2)>div:after{-webkit-animation-delay:-.5s;animation-delay:-.5s}body>div:nth-of-type(3)>div,body>div:nth-of-type(3)>div:after{-webkit-animation-delay:-1s;animation-delay:-1s}body>div:nth-of-type(4)>div,body>div:nth-of-type(4)>div:after{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}@-webkit-keyframes trail_{from{-webkit-transform:rotateZ(0deg)}to{-webkit-transform:rotateZ(360deg)}}@keyframes trail_{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}@-webkit-keyframes particle_{from{-webkit-transform:rotateX(90deg) rotateY(0deg);transform:rotateX(90deg) rotateY(0deg)}to{-webkit-transform:rotateX(90deg) rotateY(-360deg);transform:rotateX(90deg) rotateY(-360deg)}}@keyframes particle_{from{transform:rotateX(90deg) rotateY(0deg)}to{transform:rotateX(90deg) rotateY(-360deg)}}@keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}@-webkit-keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}

框架满世界飞?哪个才是最好?

1.初级阶段:首先基本功要打好,JavaScript 基本功包括闭包,原型,继承,变量的作用域等等。

2.初级到中级阶段:这时候可以学习使用 jQuery,可以使用 jQuery 或者原生的 JavaScript 去实现一些常用的插件,比如轮播,比如选项卡,比如模态框等等。如果自己还想深入一下的话,可以去看看 jQuery 的源码。多找一些静态的页面来做一下。

高级阶段:学习使用一些框架,比如 Angular,React,Vue,ember,backbone 等等,但是记住,框架这个东西只是帮你解决了一些问题,给你的项目带来了一些便利;我们要做的是学习这些框架的思想,如果有时间可以深入的研究一下一两个框架的源码,你会有不一样的发现。还有,框架是一群人一个填坑的成果,不要过度依赖框架。

个人推荐JS路线:JS(原生最重要)- Angular - ES2015 - React - ES2016 - Vue。

前端真的够吗?

学习和研究一个领域一样, 需要了解这个领域都在解决些什么问题,了解这个领域的发展和历史,有哪些了不起的任务和贡献者。 该领域内对特定问题的普遍解决方案。

尝试关注下面这样问题,如果可以提出自己的解决方案

  • 前端性能优化
  • 前端组件化,模块化
  • 前端测试
  • 前端开发流程
  • 细化的前端问题,样式,加载,图片处理
  • 前端兼容
  • 异步

当到了这一步,我觉得学习的方法应该是,尝试解决一个别人没有解决的问题或者做得不够好的问题,通过自己的探索和研究,提出自己的方案。这一过程中会学到很多很多的东西,可能不仅仅是前端,这些内容可能包括UX,设计,服务端设计等等。 可能我现在的状态也是处在这里,为了解决一个特定的问题,深入学习这个特定领域,找出解决方案。

项目技能
  1. 开发调试
  2. git,svn版本管理
  3. 开发工具
  4. 前端工具: 性能测试工具,调试工具,代理工具,css工具
  5. grunt, gulp
  6. BDD

总结,还是那句话,再牛再炫的技术和业务扯不上关系都是白搭!