共计 3570 个字符，预计需要花费 9 分钟才能阅读完成。
现在“鄙视链”体现在生存的方方面面，各行各业都有默认统一的鄙视链。IT 圈子因为开发语言多样、工程师岗位品种多、技术框架多，也有本人圈子内的鄙视链。依照开发工程师的岗位造成的鄙视链是：
架构师 \> 后端研发>前端研发>产品经理>经营>UI 设计师
架构师认为：没有我，哪有他们，架构是所有的根基
后端开发认为：前端只会“画图”
前端开发认为：产品经理“嘴上功夫”
产品经理认为：我的产品曾经很厉害了，还须要使劲经营吗？
经营师认为：我拼尽全力拉来的用户，都被测试没发现的 bug 搞丢了，而且 UI 不够好看交互不够兽性。
在 IT 行业的鄙视链中，前端工程师是介于纯后端开发和产品经理两头的，常受“夹板气”。前端工程师首先得保障产出的网页与产品经理的 Mock-up 统一，且须要接管前方的接口、数据、业务逻辑解决等。测试人员也会将前端界面的测试后果以 Bug 的模式反馈给前端开发工程师，前端开发工程师就得依据 Bug 排查和分析起因，判断是前端还是后端导致的。因而，前端工程师须要跟多方打交道，沟通能力、前端开发技术、业务需要了解、UI 及 UX 设计一个都不能少。所以才会有了网络上那么多前端工程师的提问：
那么，前端工程师到底有多难？
前端开发难度高，技能要求杂
咱们简略列举一下前端开发须要把握的技能：
- HTML，CSS 和 JavaScript 三种根底语言
- 保护和优化网站的页面及用户界面、用户体验等
- 优化网站，使其在不同的终端设备和浏览器中的行为统一
- 治理和优化软件工作流
- 优化页面 SEO
- 满足新需要和晋升解决流程的可用性
- 转换 UX/UI 的设计稿为理论运行的界面
- 晋升 web 页面加载速度
- 确保 Web 的可拜访性
- 测试和 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
官网地址:http://element-cn.eleme.io/\#/zh-CN
Github: https://github.com/ElementUI/…
ElementUI 这款由饿了么前端开源的 UI 框架，一经面世，就俘获大量程序员的芳心，在 github 上高达 29.8k 的 star 早已阐明所有。它用于开发 PC 端的页面还是入不敷出的。
Ant Design of Vue
它是 Ant Design 的 Vue 实现，开发和服务于企业级后盾产品。
官网地址：https://www.antdv.com/docs/vu…
个性：
- 提炼自企业级中后盾产品的交互语言和视觉格调。
- 开箱即用的高质量 Vue 组件。
- 共享 Ant Design of React 设计工具体系。
Flutter
官网地址:https://flutterchina.club/
Github: https://github.com/flutter/fl…
Flutter 是谷歌的挪动 UI 框架，能够疾速在 iOS 和 Android 上构建高质量的原生用户界面，是一个很好的跨端解决方案。
Quasar Framework
官网文档：http://www.quasarchs.com/
GitHub 地址：https://github.quasar.dev
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 是赫赫有名的 ActiveReports.NET 的纯前端版本，反对 Excel 报表、Word 文档、挪动端报表、图表、数据过滤、数据钻取、精准套打，纯 HTML5 实现，兼容 Angular、Vue、React 等框架。
值得一提的是，ActiveReportsJS 还提供在线编辑器，让用户能够在网页上可视化地调整报表上的文字、款式甚至数据的计算逻辑。有了在线编辑器，咱们就能把报表设计性能凋谢给用户，让他们本人对报表进行微调（大部分场景下，用户只是心愿改几个文字或者色彩），一劳永逸。
总结
前端开发，“道阻且长”。但只有咱们长于搜寻发现，也有很多资源、框架和控件能助力咱们的开发之路。祝各位前端开发工程师好运！
