从IT圈“鄙视链”看前端开发有多难？

如今“鄙视链”体现在生活的方方面面，各行各业都有默认一致的鄙视链。IT圈子因为开发语言多样、工程师岗位种类多、技术框架多，也有自己圈子内的鄙视链。按照开发工程师的岗位形成的鄙视链是：

架构师>后端研发＞前端研发＞产品经理＞运营＞UI设计师

那么，前端工程师到底有多难p>

前端开发难度高，技能要求杂

我们简单列举一下前端开发需要掌握的技能：

1. HTML，CSS和JavaScript三种基础语言

2. 维护和优化 站的页面及用户界面、用户体验等

3. 优化 站，使其在不同的终端设备和浏览器中的行为一致

4. 管理和优化软件工作流

5. 优化页面SEO

6. 满足新需求和提升处理流程的可用性

7. 转换UX/UI的设计稿为实际运转的界面

8. 提升web页面加载速度

9. 确保 Web的可访问性

10. 测试和Debug

入门似乎门槛很低，只需要掌握HTML，CSS和JavaScript这三种基础语言即可。代码简单，易上手，熟能生巧，只要勤于练习，学起来很快。似乎前端也没有那么难因为这属于入门，一入前端深似海。

当我们开始进行项目实战时，需要的技能就如下图了。满屏幕的词云，不知道如何下手才好。更大的麻烦来自“移动互联 ”。移动设备的演化速度快，为了适应更快速地迭代交付项目，前端的流行技术和框架也得快速迭代更新。对前端工程师而言，再也不是只精通某一门语言就可以应付的了。

这些还仅仅是技术层面，前端工程师的工作是将业务需求、交互设计、数据等糅合在一起开发出来展现给用户，涉及与UI设计师、交互设计师、产品经理、后端工程师，测试等不同的角色沟通协作。跟人打交道比电脑更难，这需要良好的沟通技能和更多种领域的知识。

由此可见，由于前端工程师需要掌握的技能多而杂，不可避免地成为项目开发中至关重要的角色。

根据在前端行业混了这么多年的经验，如果我们聚焦在开发技术层面，确实有一些强有力的工具，能让前端开发的日子好过一些。

跨平台框架简化UI/UX实现

持续集成、框架、工具、脚手架这些东西关注的都是开发体验和开发效率，而UI/UX关注的是前端自身的价值。刚才我提到，UI/UX（用户体验设计和用户界面设计）这两个要素对于产品至关重要，并且必须紧密合作。然而，前端工程师大概最痛苦的就是设计师的“视觉糖”。“视觉糖”确实更美观，动画酷炫，但真实反馈数据的价值和意义却不多。为了实现“视觉糖”的全部效果，会耗费掉前端工程师的大量精力。而且，页面效果的加载也需要引入大量的设计素材，从而导致整个前端页面的性能低下，优化起来更是挠头。

所以，前端开发工程师在进行UI/UX开发前，应该尽可能多地参与到设计稿的Review会议，及早地建议设计师慎用无意义的视觉糖设计，多从实现业务逻辑的角度出发，尽量简化设计。

在开发阶段，我们可以优先选择跨平台的框架，自带美观的样式，还能抹平不同平台的差异，大幅降低编码工作量。更重要的是，作为前端工程师，咱们还可以把这些框架的样式和效果推荐给UI与UX设计师，以期达成“打哪指哪”的效果。这里有一些常见的框架，提供给前端开发工程师和设计师们。

Uni-APP

这是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种应用（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

更可怕的是，在国内的 表项目中，前端工程师还需要适配多终端多浏览器类型。我想前端工程师在这里的心态是崩溃的，同样一种布局在Chrome里面就表现很良好，但是IE中面目全非。

既然前端开发的工作量和难点集中在 表领域，自然有更多人为这一细分赛道提供各种利器，下面是一些开发前端 表时常用的工具，让前端开发事半功倍。

Apache Echart.js图表控件

ECharts是一个使用 JavaScript 实现的开源可视化库，底层依赖矢量图形库ZRender，性能和样式都OK。Echarts是一个应用非常广泛的图表库，可以满足大部分场景的需求，而且开源免费。

葡萄城ActiveReportsJS 表控件

如果你面对的需求不是简单的图表，而是由表格和图表构成的复杂 表，还是去看看商业化的 表控件吧。ActiveReportsJS是大名鼎鼎的ActiveReports.NET的纯前端版本，支持Excel 表、 Word文档、移动端 表、图表、数据过滤、数据钻取、精准套打，纯HTML5实现，兼容Angular、Vue、React等框架。

总结

前端开发，“道阻且长”。但只要我们善于搜索发现，也有很多资源、框架和控件能助力我们的开发之路。祝各位前端开发工程师好运！