国外方案 组件化_面对场景化的全流程方案，如何助力新业务？

项目开发与维护的艰辛众所周知，在复杂的需求和有限的时间内，我们希望集中更多精力在项目业务本身，而非受困于纷繁杂乱的文档、难以溯源的崩溃、错误频出的协作和无从下手的优化。

由此，为开发者“减负”的Alita应运而生。它是一套基于Umi的移动端框架，是面向场景化的开发提效方案。通过整合业务流程、简化技术开发，使得开发者能够更专注于业务能力的提升，并且荣获开源中国“2019年度最受欢迎中国开源软件”评比的前十名。

前端开发常见的问题

随着这几年前端工程化的发展，更多更复杂的业务被交到前端开发工程师的手上。前端开发已不仅仅是编写样式和逻辑代码，更多涉及到前端代码的可靠性、可维护性、可扩展性、应用的性能和开发效率等各方面的思考。

暂且抛开工程化的技术不论，光从业务开发上，就常常会遇到以下几类难题：

“组件化”：

表单开发：表单控件如何控制绑定关系正确，校验麻烦如何避免？

可视化图表：市面上有多个不同的可视化方案，如何选择？每个都有大量的文档，从何处开始阅读？

上拉加载更多：列表页面是最常见的需求，却是最复杂的逻辑。如何避免重复编写，提高控件的使用效率和复杂逻辑的复用率？

“配置化”：

路由配置：路由配置如何编写、如何嵌套，多人维护同一份配置文件，代码冲突如何有效规避？

“规范化布局”：

整体布局：某些页面需要底部导航，某些页面需要顶部导航，该写在哪、怎么统一？

我们想做什么

随着业界的不断发展和新技术的不断涌现，越来越多的开发者开始注重自身的开发体验。带着这样的终极目标，Alita开始逐步探索低门槛、高性能、易拓展、高效率的开发与维护方案，通过可插拔的特性，提升开发者体验，让开发者更多地专注于项目本身。并且提供大量的快速业务支撑方案，释放开发者在业务上的压力。

Alita全业务流程解决方案

Alita不仅仅是一个框架，更是一种开发提效生态；它基于umi、实现黑盒运行、提供无感升级、契约编程、提供方案集成和强制规范。

Alita框架对接“资产市场”和“服务对接”，输出“产品形态”和“应用类型”。

我们如何做

基于组件化开发思想，众所周知，将页面拆成合适的组件，会使代码更加可读和可维护，也使得组件复用更加便利。由此，我们将项目分解成多个独立的页面，使得开发项目日常更容易维护，这消除了很多意料之外的页面交互，大大的降低项目的复杂度。

很多现有的react方案虽然做到了这一点，但仍需通过配置文件，或者项目主入口文件，将应用串联在一起。Alita则做的更好，它将配置的路由改成约定，采用文件及路由面向契约编程的方案，移除项目中的路由配置文件。

针对不同的业务场景，通过封装一整套解决方案的方式来支撑，使得开发者用最少的精力和最小的学习成本编写最简单的代码来实现最健壮的功能。

配置化：

编写页面通用导航，原始实现需要编写大约250行代码，页面配置化之后，只需一个配置，一行代码即可实现。lowcode的模式，在垂直场景下能够让研发更高效。

契约化：

不按项目约定的目录组织代码，将无法运行等。

规范化：

内置eslint和prettier，自动修复空格和换行等小错误，强制编码规范，不符合规范的编码都会自动报错。

有什么好处

通过统一技术框架，达到多个项目基础技术栈的同步。

通过整合业务，实现多个产品中的优质功能能够共享到其他的项目中。

简而言之，Alita改变了原有对单个项目的独立管理，更专注于对整个技术方案的共同维护，使得技术栈维度体现了相互互补、相互支撑。目标不仅仅是产品能力的相互支撑，还有不同项目成员的灵活交换支撑。它协同所有项目成员采用相同的技术方案，使每个页面完全相互独立，以此保证不同项目具备“有效调整实时支撑人数”的能力。根据项目的轻重缓急，大大的增加需求单的完成量。

通过多个项目的共同沉淀，导出前端开发的最佳实践方案。还可以针对特定业务线，整理出更加合适的垂直领域的个性化项目构建体系。

面向开发者友好

对于业务和功能的封装，Alita都以“能不能只写一行代码就实现”的角度去设计和思考。针对当前业务上遇到的难题，抛弃“以后可能有的需求”的思想，进行针对性封装，在实践中遇难题解决难题，对组件进行扩展升级。同时Alita具备导出升级方案，在实际项目中拥有使用一行代码解决业务需求的组件。

基于2019年大半年的项目沉淀，它已经完成了许多高级且有趣的组件库。比如，

规范化整体布局：

alita-layout组件采用小程序布局的开发理念，即非开发人员能够通过简单的页面组件配置完成整体页面布局开发。

动态化表单：

alitajs/dform通过算法区分入参数据，提供了两种使用方式。一种是用户可以独立的、单个使用子组件，通过不同的组件属性和特性去完成表单的展现；另一种是通过json格式数据动态解析表单的结构组成，每一个元素的展现也是由动态渲染生成。

上拉加载更多：

alitajs/list-view基于@umijs/hooks，对“下拉加载”和“上拉刷新”的逻辑进行封装，避免了多数开源代码中可能存在业务逻辑和组件算法逻辑分离不充分，使得在写列表页的过程中，不需要再重复编写任何相关逻辑代码的问题。

另外还有许多高质量的方案，在这里就不一一罗列了。相信在未来的实战中，我们会解决更多开发的痛点和难点，导出更多高效的解决方案。

Alita的推广、提效数据

推广数据

提效数据

组件方案和交付场景方案优化：

通过各种解决方案的方案集成，着力于解决除需求流程和设计流程以外，70%开发者在开发过程中遇到的问题。

组件化方案：

通过优化设计到研发的工作流程和组件生产过程，减少开发人员40%的不必要的沟通、研发耗时。

编译过程优化：

通过插件化第三方方案件和自定义方案的方式，轻量化代码结构，减少编译时的代码量，从而减低编译耗时提高开发、开发自测、打包等耗时。

展望未来，做到更好

总结2019年的成果，2020年我们更加期待它的成长和表现！

Alita1.0完成了10项核心能力建设：

Alita2.0测试版本计划已在3月中旬发布，包含了业务组件的封装、内置数据流、H5通用化布局等具有特点的核心能力。

例如：业务组件的封装，加强了用户在开发过程中对于底层代码的开发耗时；内置数据，提供了开发者快速使用mock数据的研发模式；H5通用化布局则让alita能够在pc端和移动端之间自动适配布局样式等。

另外为了解决在未来统一前端方案之后如何跨平台适配的问题，alita规划具备pc端和小程序的跨平台适配能力。

除此以外，它还将在未来提供更多、更优、更易用的业务方案。

更多相关信息请关注：

开源库https://github.com/alitajs/alita

官网https://alitajs.com