December 27, 2013

WebApp框架随想

Web 框架的发展方向,一是 Web Page,一是 Web App。

Data

对于 Web App,需要有一个认知,它就像是一个本地应用一样表现自己,也像本地应用一样管理数据。而目前的 Web Page,关注的点是在如何呈现页面、如何组织样式、如何处理 DOM。而一个 App,它是需要处理数据的,小至本地存储,大至数据库,甚至本地文件的存取,都是它需要关注的问题。

说到数据存储,可以想到 WebServer 众多 MVC 框架,其中的 Model 就代表着数据。一般的 MVC 的流程是这样的,由 WebServer 唤起服务器脚本,经过一系列路由到达了 Controller,Controller 通过一系列分析处理,得出结论要怎样存取数据,Model 完成了数据的交互后就到达了 View,经由 View 中模板的渲染就得到了可以展示的 html,最后由 WebServer 呈现给浏览器用户。可以看到,这是一个一次性的过程,页面在远端渲染完成后,交由前端显示。而对于一个 App 来说,它甚至可以只请求一次 Server,只在本地完成各种交互。在这些交互中,一次 UI 的改变有可能是微乎其微的,将这些微小的改变都放在 Controller 中监听来操作右变成了原生的样子,会显得杂乱无章;而有些交互又可能牵连甚广,你甚至需要重新对整个 UI 布局。很多情况下一个 WebApp 是不要经历 Controller -> Model -> View 这样一个结构的,它只是想很简单地响应用户的动作而已。

不过话又说回来,MVC 的结构中的数据存储有着不错的模式,我们可以将数据抽象成 Model,在存储的时候采取类似的方式,相信能够将数据这一块理出一个头绪。

View & Interaction

对于一个「界面」来讲,所需要呈现的东西的原始载体就是开始时加载的 html,姑且称之为 View 吧。 这个 View 会在当前界面中保持足够长的时间,有时整个 App 就固定的一两个页面,而主界面甚至会占据绝大多数时间,所以 html 可以同 App 一同打包。

而在代码层面,每一个界面的 View 指向一个 html(或是多个 Pagelet,待议),html 本身会在初始化的时候 render 传入的内容。Html 中会有 data-role 之类的属性,View 会通过这些属性来控制界面的初始化和呈现。

另外,我希望 View 的展示可以随着 Data 的改变而改变,不再去写多余的代码,这种方式类似于 AngularJs 中的 Controller 和 Scope。不过对于 App 来讲,应当更进一层,Data 应该是 Model,对 Model 的修改不只是单纯的操作数据库。Model 应该是一个更高层次的抽象,一个 Model 会有抽象的「读」和「写」操作,而 Model 实例化之后是可以注册各种不同的响应方式的,比如对一个 Model 进行写时可以触发写本地数据库、与服务器交互、改变 View 中呈现等等。但是对 View 的改变应该是自动的,不需要再去写多余的代码的。

关于交互,比如事件,类似于 jQuery 的事件机制就很不错。对于大部分的结构间的交互可以使用事件而不是回调,这样可以在很大程度上满足解耦的目的。

Controller

  • 有操控 Model 的能力
  • 可以控制(或隐式地控制)View 的呈现
  • 可以控制 View 的交互动作、事件

通过上面的描述,一个 WebApp Framework 已经有了一个大致的形态。


blog comments powered by Disqus