前言
IT圈茶余饭后的“鄙视链”，简直就是一场瞬间的情感大戏！“我们写xxx的看不起写xxxx“，无处不见这种互相鄙视的情绪就像一场刺激的游戏，每个人都觉得自己是鄙视链的最顶端。快来看看这个IT圈里的“鄙视链”究竟是怎样的吧！
如今“鄙视链”体现在生活的方方面面，各行各业都有默认一致的鄙视链。IT 圈子因为开发语言多样、工程师岗位种类多、技术框架多，也有自己圈子内的鄙视链。按照开发工程师的岗位形成的鄙视链是：
架构师>后端研发＞前端研发＞产品经理＞运营＞UI设计师
架构师认为：没有我，哪有他们，架构是一切的根基
后端开发认为：前端只会“画图”
前端开发认为：产品经理“嘴上功夫”
产品经理认为：我的产品已经很厉害了，还需要用力运营吗？
运营师认为：我拼尽全力拉来的用户，都被测试没发现的bug搞丢了，而且UI不够美观交互不够人性。
一、前端和后端的区别
1、定义不同
前端统称为”客户端开发“，在应用程序或网站的屏幕上看到的所有内容，都是由浏览器解析、处理、渲染相关HTML、CSS、JAVA文件后呈现出来，都属于前端的工作范畴。
后端称为“服务器端开发”，属于在系统“后面”所发生的事情。在后端服务器和浏览器或应用程序之间存储网站、应用数据和中间媒介的服务器都在后端的工作范畴内。在应用程序或网站屏幕上看不到的东西基本上都是后端。
2、展示方式不同
前端的工作是制作网页，后台是结合数据库实现一些代码的功能逻辑。也就是说前端开发人员在应用程序中创建一个界面，上面有一个按钮，通过按下按钮可以获取客户的数据。
后端开发人员负责写出按钮工作的代码，通过指出从数据库中提取哪些数据并将其传回到前端(且最终显示在那个位置)。
3、所需的技能不同
前端开发需要具备的技能：对美学、艺术和设计有较好的理解、了解各种 CMS，如 WordPress，Joomla 或 Drupal、直观的用户需求、PHP 和 OOP 知识(面向对象编程)、专业的质量保证、能够使用 PhotoShop，Sketch 或 Figma 等设计工具、网络托管基础知识等。
后端开发需要具备的技能：全面深入了解第三方附加组件、关于如何调试代码的批判性理解、将客户的业务需求转换为功能代码、了解 Web 服务器配置、兼容外部系统(支付处理，社交媒体网站)、批判性思维技巧、设计用户交互系统等。
4、思考角度不同
前端主要是考虑怎么能让用户觉得用起来更舒服，考虑页面布局、交互效果、页面加载速度等，主要是偏向用户看得见的部分。
后端更多是考虑业务逻辑、数据库表结构、服务器配置、负载均衡、数据的存储、跨平台API设计等等。更多的是考虑用户看不到的部分，保证业务逻辑处理数据的谨慎，保证数据吞吐的性能。
5、入门难度不同
前端开发入门简单初期容易后期难，能看到自己做出来的展示界面会很有成就感。
后端开发入门难，想要深入则更难，后端枯燥乏味没有太大成就感，平时工作就是看一堆业务逻辑代码。
在IT行业的鄙视链中，前端工程师是介于纯后端开发和产品经理中间的，常受“夹板气”。前端工程师首先得保证产出的网页与产品经理的Mock-up一致，且需要接收后方的接口、数据、业务逻辑处理等。测试人员也会将前端界面的测试结果以Bug的形式反馈给前端开发工程师，前端开发工程师就得根据Bug排查和剖析原因，判断是前端还是后端导致的。因此，前端工程师需要跟多方打交道，沟通能力、前端开发技术、业务需求理解、UI及UX 设计一个都不能少。所以才会有了网络上那么多前端工程师的发问： 
那么，前端工程师到底有多难？
二、前端开发难度高，技能要求杂
我们简单列举一下前端开发需要掌握的技能：
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/快手/钉钉/淘宝）、快应用等多个平台。
ElementUI
ElementUI这款由饿了么前端开源的 UI 框架，一经面世，就俘获大量程序员的芳心，在 github 上高达 29.8k 的 star 早已说明一切。它用于开发 PC 端的页面还是绰绰有余的。
Ant Design of Vue
它是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
特性：
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Vue 组件。
- 共享Ant Design of React设计工具体系。
Flutter
Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面，是一个很好的跨端解决方案。
Quasar Framework
Quasar-Framework 是一款基于 vue.js 开发的开源的前端框架，支持只写一次代码即可发布到多个平台，支持 website, PWA ,Mobile App 和 Electron App 。
四、前端控件降低报表开发工作量
不管是哪个行业系统，主体都是数据的录入和展示。录入部分相对简单一些，展示环节通常充满了挑战。
相比于有固定模式的数据录入环节，数据展示则是完全个性化的。尤其是前端报表，数据量大、图表多、样式要求高，耗费了前端工程师大量的时间。报表中简单的当属二维表的数据展示形式，包含数据透视表、表格类报表展示等。对前端开发来说，我们需要结合数据结构，使用合适的算法及标签将布局展示出来，整体过程中通常会涉及到数据计算、分页控制、单元格合并等，细节的问题还有交替行颜色设置、主题设置、边线设置，及自动增加的汇总行列展示等，实现这些目标的算法可能会非常复杂，而且还经常遇到性能瓶颈。 
所有以固定格式呈现数据的，都可以归类为报表。除了传统的二维表格类外，前端工程师需要面对的报表还有Word报告类，涉及到左标题右数据、图文混排、动态表格展示、页眉页脚等技术细节；也包含由大量图表构成的可视化仪表板，如数十种类型的图表样式、数据预警、嵌入表格的迷你图等。
更可怕的是，在国内的报表项目中，前端工程师还需要适配多终端多浏览器类型。我想前端工程师在这里的心态是崩溃的，同样一种布局在Chrome里面就表现很良好，但是IE中面目全非。
既然前端开发的工作量和难点集中在报表领域，自然有更多人为这一细分赛道提供各种利器，下面是一些开发前端报表时常用的工具，让前端开发事半功倍。
Apache Echart.js图表控件
ECharts是一个使用 JavaScript 实现的开源可视化库，底层依赖矢量图形库 ZRender，性能和样式都OK。Echarts是一个应用非常广泛的图表库，可以满足大部分场景的需求，而且开源免费。
阿里AntV G2图表控件
阿里AntV是支付宝团队推出的数据可视化解决方案，其中G2是一套面向常规统计图表的控件，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。当前端工程师需要做图表时，如果echarts不合适，可以看看G2。
葡萄城ActiveReportsJS报表控件
如果你面对的需求不是简单的图表，而是由表格和图表构成的复杂报表，还是去看看商业化的报表控件吧。ActiveReportsJS是大名鼎鼎的http://ActiveReports.NET的纯前端版本，支持 Excel报表、 Word文档、 移动端报表、图表、数据过滤、数据钻取、精准套打，纯HTML5实现，兼容Angular、Vue、React等框架。 
值得一提的是，ActiveReportsJS还提供在线编辑器，让用户可以在网页上可视化地调整报表上的文字、样式甚至数据的计算逻辑。有了在线编辑器，我们就能把报表设计功能开放给用户，让他们自己对报表进行微调（大部分场景下，用户只是希望改几个文字或者颜色），一劳永逸。
五、总结
前端开发，“道阻且长”。但只要我们善于搜索发现，也有很多资源、框架和控件能助力我们的开发之路。在一个技术领域内，比如软件开发、网络管理、数据分析等，不同的职业角色和技能专长都是非常重要的。然而，由于每个人的角度和经验不同，有时会出现不同领域之间的误解和互相嘲讽。
然而，这种“鄙视链”并不利于团队合作和技术进步。在一个健康的工作环境中，应该是鼓励多样化的技能和经验，并且尊重每个人的贡献。团队合作的成功往往建立在不同技能和经验的互补之上。因此，对待“鄙视链”，我们更应该注重理解与尊重，尊重他人的选择和专业，学会倾听不同声音，培养包容的态度，共同促进整个行业的进步和发展。
祝各位前端开发工程师好运！
