Web UI组件化最佳实践的思考

原创 2016年05月13日 16:00:05

Web UI组件化最佳实践的思考

前端组件化的几种思路

  1. 重客户端的SPA模式,将大量的逻辑和数据处理放在客户端,服务器端提供JSON数据
  2. 服务器端处理业务逻辑,客户端只负责两个事情:显示和发送数据到服务器端,服务器来调度UI的显示
  3. 混合模式,混合使用以上两种方案,交叉使用rjs + html + json

第一种方式现在比较流行,也有很多比较的框架支持,比如 React, angularjs 等。优点是,速度很快,交互体验比较好,UI容易组件化。缺点是 客户端非常重,需要编写大量的JS代码。对程序员的要求也很高,需要非常熟悉服务器端和客户端代码。

第二种方案是Rails推荐的方案。优点是开发速度非常快,但是用不好。因为Rails 太灵活,服务器端可以向客户端发送各种格式的数据:比如 HTML, JSON, JS。并且,这种方案 UI 特别不容易组件化。如果用官方传统的方案使用 render partial 方案会让view层代码膨胀,并且定制化也不好做,需要做大量的if else 判断。

第三种方案在一个无序的项目中经常出现。这样的后果是,项目代码膨胀,维护性很差,并且UI很难组件化,重用的可能性几乎为零。

我的实践

我以前非常喜欢的方案是重客户端的方案, Rails/Express 只负责提供数据和业务逻辑,不负责UI的生成和流程。因为这种方案有一个非常大的优势,就是它是一种非常标准的Clint - Server开发模式。客户端的代码甚至可以直接打包成App client(这是一种非常理想的状态)。在实践的过程中,我发现了有很多问题:首先,需要熟悉客户端的框架,需要较多的技术栈,学习曲线陡峭,不仅仅需要熟悉Rails,还需要熟悉JS的技术栈,比如webpack打包,react 等框架;第二,富客户端框架与Rails整合复杂;第三,Rails 的功能弱化了,无法使用Rails提供的大量方便的特性。

第二种方案是对Rails这种的重服务器的框架来说,是一种可选的方案。但如果只使用Rails自带的View + Helper 方式很难实现UI组件化的问题。所以,我们需要新的解决方案,它应该满足如下几个条件:
1. UI可以重用:这是核心需求,只有UI组件可以重用,才能提升生产力,提高产品质量
2. UI的样式可以定制化:可以定制化才可以扩展项目的UI库,所以也很重要
3. 不同UI组件可以通信:不同组件之间的通信是一个非常常见的case,这是提升用户体验的关键
4. 开发速度一定要快:就是要使用方便
5. 与Rails整合比较好:这是后台服务器的技术决定的,不同的服务器端框架需要做对应的适配

一个简单的例子: Todo List

我打算用一个非常简单的例子: Todo List, 来实践上面定的方案。
如下图所示,我打算做一个简单的Todo list。它只有一个功能,在input框中输入任务名称,下面的任务列表会自动刷新。
这里写图片描述

分析:
1. 可以将页面分成几个部分:TodoContainerTodo
2. TodoContainer 是组合容器,不负责具体的UI的显示
3. Todo 是普通的UI组件,负责具体的UI的显示,但不负责UI直接的交互
4. UI组件直接的交互通过Rails完成
如下是我的架构设计图
这里写图片描述

从图中可以看出,UI组件直接的更新是通过服务器来触发的,不同组件不要在客户端通信。这样就降低了组件的复杂度,并且解耦合。

我实践了 Rails + RJS + cells 能很好的满足我的要求。代码在 https://github.com/chucai/cell_case 。 下面我简单的说明一下我的实践流程:

  1. 初始化项目
rails new cell_case
  1. 安装 guard , guard-livereload
    主要是用在修改服务器端代码,可以自动刷新浏览器。这是web开发必备神器,特别是在有双屏的条件下,可以极大的提供我们的开发效率。

  2. 安装 livereload 的 chrome 插件
    3.1 安装地址
    https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
    3.2 配置
    访问 http://localhost:3000,然后在浏览器的右上角,点击livereload的加载按钮。

这一步很关键,否则自动刷新将无法使用。

3.2 启动 guard

guard
  1. 安装cells
    Rails UI 组件化的一个库

  2. 新建一个Model - Todo

rails g cell todo
  1. 创建首页
rails g controller dash index
  1. 创建第一个容器组件 - TodoContainerCell
rails g cell todo_container
  1. 使用容器组件组合其他组件

其中有几个值得注意的:我们在传递额外的数据给cell组件的时候,可以使用 Hash的方式,这样数据会保存在Cell对象的options中。

总结

不足之处在于 cell组件过于简单的,没有不同的角色,比如 Container组件,功能太单一了,只是一个简单的View-Model。如果要深度使用,还需要在cells的基础中进行定制化。cells的代码比较简单,可以在这个基础上做一些扩展。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

XCoreRedux框架:Android UI组件化与Redux实践

XCoreRedux框架:Android UI组件化与Redux实践@author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:https...

AngularJs学习笔记——ui路由(多层嵌套/传参)和组件化结合的开发模式

为什么要使用ui路由 1、ui路由与ng路由的区别,ui路由弥补了ng路由在路由嵌套方面的不足,ng路由是有angular官方提供的,而ui路由是由第三方提供的(https://ui-router.g...

Vue.js组件化开发实践

Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合,而无须从头开始重构整个项目;另一方面,Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。 https:...

滴滴的组件化实践与优化

原文地址:http://www.infoq.com/cn/articles/xiaojukeji-component-practice-and-optimization 本文...

Openlayers 3 使用React 组件化+wepack+ES6实践记录笔记

本博文不作深入研究内容,只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题,本博文作为开篇,所以只是简单的demo案例说明。后面还会有其他的一些博...

前端组件化开发实践

前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着前端开发复杂度的日益提升...

iOS组件化实践方案-LDBusMediator炼就

一、中小型App为什么要组件化 当项目App处于起步阶段、各个需求模块趋于成熟稳定的过程中,组件化也许并没有那么迫切,甚至考虑组件化的架构可能会影响开发效率和需求迭代。而当项目迭代到一定时期之后...

iOS App组件化开发实践

原文地址:http://blog.csdn.net/u013602835/article/details/52668894 iOS App组件化开发实践 ...

安卓组件化架构实践

组件化架构组件化和插件化的目的都是为了解决项目越来越复杂,耦合性高,牵一发而动全身,一个小的改动也要编译十几分钟等问题,两者的区别简单来说组件化是在编译期分模块,插件化是在运行期。一般插件化用于动态修...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)