iuap design是我送给你的礼物（1）

[GuoYongfeng]

iuap design是我送给你的礼物（1）

总是到了周末，才想起该写的文章没有写。所以，在吃完午餐的园区里，在蝉鸣鸟叫的陪伴下，为你起笔。

最近，总有同事和身边的朋友经常问我两个问题：

• FED是什么产品？
• iuap design是啥啊，好吃么？

每次听到这两个问题我都差点哭晕在厕所，宝宝心里苦啊。为了避免以后我们还能愉快的玩耍，今天坐下来好好聊聊这两个问题：

Q：FED是什么产品？

**A：**其实，这是我真实遇到的问题，不过还好，不是前端工程师问出的。FED是一个公共前端部门或组织，前端的简称是FE，加了后面的D，表示具备一定设计能力，关注用户体验（个人理解）。

Q：iuap design是啥，好吃么？

**A：**严肃的告诉你，iuap design是美味的冰激凌，你信么。其实这个概念是我们首次提出，并且还是存在一定误解的。而正好，我也希望能够在这里表述清楚。

介绍

iuap design是由用友网络FED团队打造的一套前端集成解决方案，为企业级应用开发而生。提供前端开发全链路生态，包含设计指导、前端框架集、前端开发工具集、组件库、模板库等一系列技术产品。从简单需求实现到前端工程化，提供一站式的技术服务。我们秉持开放、自由、轻量、生态的原则，提供可组装可插拔的技术生态。

诞生之初

梳理一下我们公司当前业务和技术现状。在企业互联网全面转型之际，公司的产品一个接一个的上市发版，一个接一个的项目中标，大家的努力支撑着公司快速发展，形势喜人。但随着业务的发展和扩张，随着而来面临的问题也日益增多，下面我们一起从三个维度来分析目前存在的一些问题：

• 业务形态

公司大量中后台系统开发缺少专业前端支持，开发人员各种类库拼凑，维护性和易用性较差。而能做到这样的，还算是不错的了，至少能够查看文档拼拼凑凑的把项目做起来，一般都是前后端都具备一定开发能力的同学在维护。但他们心里也苦啊，总是写不顺手的css样式，苦恼样式不好调，还有各种兼容性问题，看他们总有种大猩猩玩火柴棒的感觉。

同时，为了实现功能，各种jquery插件拿过来实现效果。出现的问题是，功能可以实现，但是性能问题呢，维护问题呢，一堆js文件引入加载的问题呢，缺少一个专业前端，很多不是问题的问题，都暴露出来了。

• 前端开发效率

话又说回来了，虽然前面提到项目缺少前端资源。如果资源允许，那就放开口子撒欢招人。FE到位之后，依旧需要面临项目从零开发的问题，毕竟万丈高楼平地起嘛。而这也无可避免的出现起始开发效率较低、前端工程化水平较低等问题。于项目而言，这样很是影响工作和开发效率啊。

• UE一致性

整个开发团队如果资源配置齐全，一般都不至于做出体验很low的产品，当然，这个也不是绝对的；即使资源配置齐全，不同团队做的产品风格也是风格迥异、水平参次不齐，对外而言，就没有公司品牌的一致性；甚者，让开发人员自己发挥做出的各种管理系统的界面风格，那就只能关起门来自己看了，不知道你信不信，反正我是信的。

破局

前面我们已经聊了一些基础性的话题，通过对问题的定位和分析，我们在方案的架构层面制定了两个指导思想：

• 提供简单、全面、易于扩展的前端架构
• 推出快速开发类工具或应用满足不同人群

接下来，看看我们团队是如何为项目全生命开发周期中遇到的问题而打造的一整套前端集成解决方案iuap design。

设计语言

在企业级应用开发中，因为产品的项目化实施及客户定制化程度较高，在实现过程中尤其是前端的实现，会有不同的设计及交互规范，然而这里规范中存在大量的雷同控件、页面、交互模式及实现方式，这些重复性的工作对产品参与人员，尤其是设计、开发等角色来说是个困扰和折磨，也带来了巨大的开发及管理成本，降低了互联网时代的开发效率。

基于20多年企业级产品设计经验，iuap ue工程部总结了企业应用领域遇到的常见场景，由此而沉淀下一套企业应用领域设计模式，并总结成为我们的UI设计语言（以下简称“design”）。

design旨在重塑企业应用研发模式，解放设计，整合资源，提高效率，让研发团队更关注业务、效率提升用户体验。

design致力于提升”终端用户”、“UE设计”、“弱前端开发”等角色的使用体验。它模糊了研发角色（产品、交互设计师、UI设计师、前端开发工程师）原本清晰的界限，使用该语言，可以高效率快速产生体验一致、直接可用的前台最终html页面。

更多关于design的内容可直接访问iuap design 官网

项目脚手架

任何一个项目启动开发的时候，都需要从零开始新建一个项目工程。而我们在大量的实际项目开发的过程中，提炼出来几套久经考验的项目脚手架工程，让前端开发赢在起点，并提供开发指导文档，让项目快速启动。

提供的项目脚手架，具备完整的开发功能设计，并且具备较高的前端工程化能力。同时我们将源码和文档开放，大家可开箱即用。以下给出两个示例项目的Github地址：

• cloud-starter-kit
• java-starter-kit
• webpack-dev-boilerplatet

前端基础库sparrow.js

sparrow.js是从大量的企业级应用开发中提炼出来的一套前端基础库，其中通过大量的实践和抽象，为解决诸如多语言处理、分时区处理、RSA加密、企业级数据格式化等问题封装了一系列方法。

同时，sparrow.js还包含对DOM、CSS基本操作、多平台浏览器移动设备判断、Cookies操作、事件的绑定、日期、数字、字符串相关判断、以及浏览器自身函数不足所扩展的一系列功能。

使用的方式也非常简单

• install

$ npm install neoui-sparrow --save

• use

import core from 'neoui-sparrow/lib/core';

// TODO SOMETHING

近期，我们团队又将原有的功能代码使用ES6 + Webpack + Mocha重构。更多关于sparrow.js的丰富资料，请前往iuap-design

结语

更多关于iuap design的故事，我们会持续发出，下周我们再见。同时，关注用友网络FED团队博客可获取第一手技术干货，赶快行动吧。