如今，“鄙视链”体现在生活的方方面面，各行各业默认都有同一条鄙视链。因为开发语言五花八门，工程师职位五花八门，技术框架五花八门，IT圈子在自己的圈子里也有鄙视链。按照开发工程师的职位形成的鄙视链是：架构师\>后端研发>前端研发>产品经理>运营>UI设计师架构师认为：没有我，怎么会有他们，架构就是foundationofeverything后端开发认为：前端只能“画图”。运营方认为：我极力吸引的用户都被测试没有发现的BUG流失了，UI不够美??观，交互不够人性化。在IT行业的鄙视链中，前端工程师夹在纯后端开发和产品经理之间，经常被“夹板”。前端工程师首先要保证输出的网页与产品经理的Mock-up一致，需要接收后端的接口、数据、业务逻辑处理等，测试人员也会反馈测试结果以bug的形式提供给前端开发工程师的前端接口。前端开发工程师需要排查和分析BUG产生的原因，判断是前端问题还是后端问题。因此，前端工程师需要与多方打交道，沟通能力、前端开发技术、对业务需求的理解、UI和UX设计等缺一不可。所以才会有那么多前端工程师在网上提问：那么，前端工程师到底有多难？前端开发难度大，技能要求好坏参半。下面简单罗列一下前端开发需要掌握的技能：三种基本语言：HTML、CSS和JavaScript。跨设备和浏览器的一致行为管理和优化软件工作流程优化页面SEO以满足新需求并提高流程可用性似乎Debug的入门门槛很低，你只需要掌握三种基本语言HTML、CSS和JavaScript。代码简单，容易上手，熟能生巧，只要勤加练习，很快就能学会。前端好像没那么难？那是因为这是一个入口，一旦进入，前端深似海。当我们开始实战项目时，所需的技能如下图所示。满屏都是词云，不知如何下手。更大的麻烦来自于“移动互联网”。移动设备的发展速度很快。为了适应更快的迭代交付项目，流行的前端技术和框架也必须快速迭代更新。对于前端工程师来说，精通一门语言已经远远不够了。我们重新梳理一下前端所需要的技能：这些只是技术方面的。前端工程师的工作是结合业务需求、交互设计、数据等进行开发并呈现给用户，涉及到UI设计师和交互设计师。、产品经理、后端工程师、测试人员等不同角色进行交流和协作。与人打交道比计算机更难，它需要良好的沟通技巧和更广泛领域的知识。可见，由于前端工程师需要掌握的技能种类繁多，他们不可避免地成为项目开发中至关重要的角色。基于这么多年的前端行业经验，如果着眼于开发技术层面，确实有一些强大的工具可以让前端开发的日子过得轻松一些。跨平台框架简化UI/UX实现持续集成，框架、工具、脚手架都关注开发体验和开发效率，而UI/UX则关注前端本身的价值。正如我之前提到的，UI/UX的两个元素（用户体验设计和用户界面设计）对产品至关重要，必须紧密配合。不过，最让前端工程师头疼的，恐怕就是设计师的“视觉糖”了。“视觉糖”确实更美，动画更酷，但真实反馈数据的价值和意义并不多。为了达到“视觉糖”的全部效果，前端工程师会消耗大量的精力。而且页面效果的加载也需要引入大量的设计素材，导致整个前端页面性能低下，更难优化。因此，前端开发工程师在进行UI/UX开发之前，应尽可能多的参与设计稿的评审会，建议设计师尽早谨慎使用无意义的视觉糖设计。简化设计。在开发阶段，我们可以优先选择跨平台的框架，它自带漂亮的样式，可以抹平不同平台之间的差异，大大减少编码工作量。更重要的是，作为前端工程师，我们还可以将这些框架的风格和效果推荐给UI和UX设计师，以达到“随便打”的效果。下面介绍一些前端开发人员和设计人员常用的框架。Uni-APP是一个使用Vue.js开发所有前端应用程序的框架。开发者编写一套代码，可以发布到iOS、Android、Web（响应式）、各种应用（微信/支付宝/百度/今日头条/QQ/快手/钉钉/淘宝）、快应用等平台。ElementUI官网地址：http://element-cn.eleme.io/\#/zh-CNGithub：https://github.com/ElementUI/...ElementUI，来自饿了么前端的开源UI框架.me，一经发布就俘获了一大批程序员的心，github上的29.8kstar已经说明了一切。开发PC端的页面绰绰有余。AntDesignofVue是AntDesign的Vue实现，开发和服务于企业级后端产品。官网地址：https://www.antdv.com/docs/vu...特点：提取自企业级中后端产品的交互语言和视觉风格。开箱即用的高质量Vue组件。分享React设计工具系统的AntDesign。Flutter官网地址：https://flutterchina.club/Github：https://github.com/flutter/fl...Flutter是Google的移动UI框架，可以在iOS和Android上快速构建高质量的原生用户界面,是一个很好的跨端解决方案。QuasarFramework官方文档：http://www.quasarchs.com/GitHub地址：https://github.quasar.devQuasar-Framework是一个基于vue.js开发的开源前端框架，支持只写一次代码发布到多个平台，支持网站、PWA、移动应用和电子应用。前端控件减少报表开发工作量无论是什么行业系统，其主体都是数据的录入和展示。入口部分相对简单，而展示部分通常充满挑战。与固定模式的数据录入链接相比，数据展示完全个性化。尤其是前端报表，数据量大，图表多，样式要求高，占用了前端工程师大量的时间。最简单的报表形式是二维表的数据展示形式，包括数据透视表、表格报表展示等。对于前端开发，我们需要结合数据结构，使用合适的算法和标签来展示布局。整体流程通常涉及数据计算、分页控制、单元格合并等，细节还包括交替行颜色设置、主题设置、边缘设置、自动增加汇总行列显示等，实现这些目标的算法可能非常复杂，经常遇到性能瓶颈。任何以固定格式呈现数据的东西都可以归类为报告。除了传统的二维表格，前端工程师还需要面对Word报表，其中涉及左标题右数据、图文混合排版、动态表格展示、页眉页脚等技术细节。;由图表组成的可视化仪表盘，比如几十种图表样式、数据预警、表格内嵌的迷你图等。更可怕的是，在国内的报表项目中，前端工程师还需要适应多终端和多浏览器类型。我觉得前端工程师的心态在这里就被打破了。相同的布局在Chrome中运行良好，但在IE中则完全不同。由于前端开发的工作量和难点都集中在报表领域，自然会有更多人为这个细分赛道提供各种工具。下面介绍一些前端报表开发时常用的工具，让前端开发事半功倍。ApacheEchart.js图表控件ECharts是一个用JavaScript实现的开源可视化库。底层依赖矢量图库ZRender，性能和风格都还可以。Echarts是一个应用广泛的图表库，可以满足大部分场景的需求，而且是开源免费的。AliAntVG2ChartControlAliAntV是支付宝团队推出的一款数据可视化解决方案。G2是一组用于常规统计图表的控件。单个报表可以使用Canvas或SVG构建各种交互式统计图表。前端工程师需要做图表的时候，如果echarts不适合，可以看看G2。葡萄城ActiveReportsJS报表控件如果你面对的不是一个简单的图表，而是一个由表格和图表组成的复杂报表，你应该看看商业报表控件。ActiveReportsJS是大名鼎鼎的ActiveReports.NET的纯前端版本，支持Excel报表、Word文档、移动报表、图表、数据过滤、数据钻取、精准打印、纯HTML5实现，兼容Angular、Vue、React等构架。值得一提的是，ActiveReportsJS还提供了在线编辑器，允许用户在网页上直观地调整报表的文字、样式甚至数据计算逻辑。通过在线编辑器，我们可以将报表设计功能开放给用户使用，让用户自己对报表进行微调（大多数情况下，用户只想改几个字或颜色），一劳永逸。总结前端开发，“路漫漫其修远兮”。但是只要我们善于搜索和发现，也有很多资源、框架和控件可以帮助我们进行开发。祝所有前端开发者好运！
