如何快速成长为一名合格的web前端工程师？

基层知识：HTML，CSS，javascript是基本；Vue.js，AngularJS，React为主流；

原生永远是最核心的技术；

《JavaScript高级程序设计》渡劫必备神器。

下面就是PS了，早期的前端多数由美工转化而来，因此PS没问题；

如今的前端基本都是专业领域培训了，基本不懂PS；不少小公司不注重工做流程，把PSD一股脑甩给前端处理切图和标注，浪费开发大量的时间；UI的进阶有不少插件，好比Sketch什么的。术业有专攻，那是他们的学习路程；

进阶：ES6,ES7,响应式，兼容性，移动和PC端差别化，flex布局，审美等海量项目的淬炼；以及各类提升本身开发效率的技能。平时多看别人写的代码，汲取别人的优势，提升代码的可读性和维护性；

要针对本身遇到的bug多总结，多思考；高阶：掌握Node，koa框架，mysql数据库等，拿下后端基本是每一个前端的终极目标；

不是说必定要作后端，而是理解了后端开发逻辑，数据库设计原理之后，才是真正打通了编程；

完整的工做流程：项目立项--立项评审--肯定需求--产品原型--设计定稿--前端开发--提测--修复bug--验收--上线前端这方面咱们须要作的有梳理业务逻辑并理解业务逻辑,这对你后面的开发颇有用处,同时根据需求进行应用技术的选择,项目结构的划分,需求模块的划分,完整项目的搭建,固然如今有不少能够自动化构建工具能够节省你不少时间, 如今的前端开发已经再也不仅仅只是静态网页的开发了，突飞猛进的前端技术已经让前端代码的逻辑和交互效果愈来愈复杂，更加的不易于管理，模块化开发和预处理框架把项目分红若干个小模块，增长了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。

前端自动化构建在整个项目开发中愈来愈重要,但新手入门仍是应该去尝试本身一点一点的去构建一个项目,等你多作几个项目以为每次都这样重复好烦,天然而然的就入了自动化构建的坑,毕竟这样能让你更深入的理解,为何要使用自动化构建……好比咱们主栈是vue,咱们最经常使用的就是vue-cli,自动化工具备不少选择如Bower、Gulp、Grunt、node、yeoman,咱们应该根据需求选择最适合本身的去研究。

前端是团队里最应该学会沟通的人,界面有问题须要和UI沟通,数据有问题须要和后台沟通,功能有问题须要和产品沟通,测试的时候给你提bug你还须要和测试沟通……（心塞吧）

前端是最接近用户的人,用户对一个网站,软件最直观的感觉是反映到前端；交互体验更是前端项目的核心点；

和UI的沟通,在工做中咱们不该该是被动的实现UI的设计,而是应该合理化的提出本身的想法,否则往后返工浪费的是双方的时间。好比通用组件的设计，每次出页面都会有一套全新的toast提示，很明显在大量开发任务的前提下，通用的统一的消息提示更能提升开发效率，而不影响页面交互体验；

前端应该跟UI沟通制定统一的通用组件，否则你会一直写重复而且不能提升技术含金量的任务；

再好比你须要作一个图表,用到了echarts,你彻底可让UI基于echarts去设计样式,而不是让他在那里自由发挥,由于你永远不知道设计师的脑子里装了多少创意,这样节省的是两我的的时间,不会出现他作好样式而你实现不了的尴尬。

若是大家的关系上升足够好，你可让他们给你预留出时间，去尝试一下新的特效和体验；能够就用，不能够就换设计方案；（前提是UI能配合你的创新）出色的产品经理会考虑的面面俱到，大家争论的需求需求合理性而不会是逻辑缺失性的东西；通常来讲程序员和产品经理之间是最难沟通的,只有相杀没有相爱。

由于“这个需求比较简单，怎么实现你本身搞定，明天要求上线”

记得有一个段子：

产品汪：程序猿，咱们来实现一个紧急需求？

程序猿：请说。

产品汪：请根据手机壳的颜色，来实现APP启动的颜色。

程序猿已经在风中凌乱。。。从这个段子中多少能折射出产品和技术之间的各类激情“火花”。

产品经理眼中简单的需求，而在咱们看来是不可能实现的。而程序员也没法理解产品经理为何要实现这样的需求。那么，站在一个程序员的角度应该怎么样和产品经理沟通呢？

1.深入理解需求，清楚需求的动机和原因咱们程序员必定会在问，产品经理为何想要根据手机壳的颜色来动态实现APP启动时的颜色。既然想听解析，那就先别急着说出本身的结论——技术上没法实现！既然有疑问，那就先将本身的疑问解决。

2.换位思考产品有产品的角度。做为程序员咱们追求的是什么？逻辑正确，更快，更容易扩展。产品追求的是什么？说实话，我本身没有深入去思考过这个问题。站在一个惯性的角度思考能够想到：一个产品为何存在，他的存在能解决什么问题，他的用户体验好很差。这些才是决定一个产品的核心价值。毕竟工做性质影响了一我的的思惟逻辑，因此这时候，咱们能站在一个产品的角度去思考每个需求，便显得尤为重要。

3.不放过每个细节做为程序员想必对这句话都是深深认同的。由于一个标点符号或者类型的错误，会致使一个本身意想不到的bug。

产品经理在设计一个产品的时候，都是从大方向去想问题的，大方向没有错就好了，细节脱离不了大方向。这是他们想的。可是对于程序来讲，却万万不能。由于一个细节的逻辑每每决定了整个大方向。举个例子：有一个需求，用户的做品须要提交审核，通过审核才可让全部人看到。当产品经理交这个需求给你的时候，你能察觉到什么问题了吗？这里面有几个细节：

• 1.用户提交审核后，用户能够不能够再编辑做品；
• 2.做品是否会屡次审核；
• 3.需不须要记录审核历史；
• 4.用户做品是否须要有版本的控制，如要产生版本，版本又是如何产生的；
• 5.审核经过后，用户能够不能够再修改做品，若不能够，那么是否是其余人就看不见用户做品......话说回来这只是一个简单的逻辑需求！可是涉及的细节倒是太多太多。咱们每每在编码的时候写不下去，就是由于给的需求太模糊，没有细化到点上。

4.换一种方式说“不能实现”不能实现，这句话想必咱们都是常常说。可是直接对产品经理说，没准会让产品经理抓狂。由于咱们会让他们以为他们提出的任何需求，咱们都不能实现。可是事实并不是如此，由于不能实现是有条件的，好比时间不够。因此咱们要先认同产品经理的观点（“能实现”），再提出本身实现他的需求的条件是什么。由于现实产品经理也不会常常犯傻，常常提出一些不合理的需求，可是面对需求，咱们须要评估实现的时间，并且这个时间不是那么容易评估准确的。(你只要尽全力实现产品的需求，产品也会慎重对待你的难度)

5.当遇到不合理的需求时，积极寻求替换方案就拿段子里面的需求来讲，让咱们提供几种APP皮肤给用户进行选择，确定比原先的需求容易实现，并且也更加符合人性化。说另一个故事，有家智能家居的公司，要实现厨房水龙头，根据人声说水温几度，就能够达到几度。换个角度想，你会感受出40度和45度水的温差吗？并且根据人声判断，这又涉及到声音识别系统，你要兼容多少种语言？其实我就以为左右切换就挺智能的，彻底没有必要搞的那么复杂。因此程序员要找到一种更好更容易实现的方法。别给产品经理的想固然自乱阵脚。咱们常说的：拒绝别人方案的时候给他一个更合适的解决方案；

6.必须遵循文档精神在开发的时候，咱们每每会另外与产品经理进行细节化的讨论。可是这种讨论结果，咱们并无记录到产品原型里面或者需求列表里面。可是过了几个月后，咱们本身每每会忘记咱们当初为何会讨论出这样或者那样的一个细节。因此一切的需求必须是根据的。从另外一方面来讲，也保障了双方的利益，别等到出问题的时候，不知道是谁的责任，而在这一方面，程序员每每很吃亏。7.对本身的程序有一颗艺术的心有人说过，当需求影响到代码扩展性的时候，会首先砍需求，而不是改代码！在必定程度上，我是认同这句话的。在我看来，程序是一件思想上的做品，要达到艺术的境界，从功能、体验和逻辑上都必须是合情合理的。就像一件艺术品同样，看起来是浑然天成的！由于一件看起来很“丑陋”做品，必定是不符合人的逻辑和习惯的。写到最后，感受绕回到程序员自身了。其实跟产品经理沟通，最重要的是要明白到：咱们是在解决问题，而不是在制造问题！主要抱着这个核心，一切问题迎刃而解通常来讲和后台沟通没那么多的麻烦,约定好规则后,通常来讲大家是经过api来沟通的,但当你调试接口时,出现一些未知的,你感受不是本身问题的时候,及时的沟通后台是最明智的。

责任划分相信你们在这一点上都深有感触,由于前端是最后一关,全部的需求都是在前端手里变成一个具体的产品的,这样也就致使你很容易变成背锅侠,致使项目延期的状况有不少种,设计图不及时,后台数据出现问题,产品临时改需求,若是你不能证实是这些问题致使项目延期,这个锅你必背无疑,惟一的方法就是--口头确认--钉钉通知到责任人确认--通知上级,千万不要以为这个麻烦,出问题的时候会比这个更麻烦的。

合格的web前端工程师尚且须要好多修炼，入门级的web前端工程师也是不容易达到的。想要成为一名web前端工程师，从知海匠库http://www.zhihaijiangku.com的web前端课程开始。课程结合项目实战，还有就业指导，帮助新手快速入门并就业。