RIA

RIA / Web

RIA - Rich Internet Application

Web

新浪微博
Google/百度
Facebook
知乎
...

RIA

Gmail
QZone
Evernote Web
...

相比于传统Web1.0/2.0，RIA 所适用的场景，更类似于【信息管理】这样的需求。

曾经类似需求会选择 Flash 或者 Sliverlight 这样的插件方式的实现。
当出现 AJAX 之后，AJAX 已经成为主流。

技术选择

HTML(5) + CSS(3) + Javascript + Ajax

框架选择

主流前端库/框架

jQuery/Underscore/Mootools/Prototype.js
YUI3/Dojo/ExtJS/KISSY
Backbone/KnockoutJS/Emberjs
AngularJS
Bootstrap
Semantic UI
Jade
SeaJS/Require.js

分为几大类

DOM 操作跨浏览器兼容
JS 语言扩展
前端MV*
响应式布局
模块化加载
组件控件
模板引擎
特殊渲染效果

框架/库，同时拥有一个、多个甚至全部特性。

业务需求

主流浏览器兼容（IE8+）
部分刷新页面
图表

技术需求

跨浏览器兼容
Ajax 部分更新
Chart 控件

所以在几大类中分为必须和可选两类

必须

DOM 操作跨浏览器兼容
JS 语言扩展
组件控件

可选

前端MV*
响应式布局
模块化加载
模板引擎
特殊渲染效果

最精简框架选择（A）

jQuery
Undersore
jQuery UI

大而全解决方案（B）

ExtJS 4+

紧跟时代选择方案（C）

jQuery
Undersore
Bootstrap
RequireJS
Chart.js

大而全的 B 是很多 ERP 以及内部管理系统（包括淘宝）使用的方案。ExtJS 4 可以支持前端MV、前端模块化、复杂控件，最大的缺陷在于，昂贵的收费、扩展受限和性能。*

最精简 A 只做必须的内容，舍去响应式布局、模块加载、特殊渲染效果。依托 jQuery UI 社区提供控件来呈现页面。

C 方案把 A 中 jQuery UI 替换成 Bootstrap，从而引入更统一和可维护的控件风格，以及响应式支持。加入 Chart.js 来提供更强大的图表功能。引入 RequireJS 来做模块化加载

可用 Semantic UI 替换 Bootstrap

Bootstrap 在功能上和 Semantic UI 相同，但是 Semantic 拥有更小得体积以及更灵活的定制。但同时，需要学习更多地标签。

可以使用 d3.js 来绘制更复杂的图表

d3.js 可以说是现在最强力的前端图表展现库，不仅仅图表，很多数据可视化会推荐使用 d3.js。也因为这样 d3 的体积和复杂度远远高于 Chart.js。

文件组织架构

传统组织方式


 |-- js
 |-- common
 |-- ManageUser.js
 |-- Index.js
 |-- img
 |-- css
 |-- all.css
 |-- print.css
 |-- Index.html
 |-- ManageUser.html

RIA 方式


 |-- js
 |-- /* 模块化组织 Javascript 文件 */
 |-- img
 |-- css
 |-- all.css
 |-- print.css
 |-- Index.html

传统方式会有大量 HTML/JS 文件。JS 文件通过在 HTML 文件中使用

RIA