解放前端生产力，非侵入式前端MVVM框架-asta4js

Asta4js是一个崭新的前端MVVM框架，提供非侵入的模板绑定，让负责业务逻辑的javascript工程师和负责视觉效果的前端设计师可以独立工作而互不干扰，从而极大的释放了前端的生产力。

 

https://github.com/astamuse/asta4js

 

分离模板与绑定

我们首先来看Asta4js的简单示例，看看Asta4js如果帮助我们分离模板与绑定。

 

假设我们有如下的HTML：

 

<span id="name-preview"></span>

 

我们如何插入我们的数据呢？

 

  Aj.init(function($scope){
    $scope.data = {};
    $scope.snippet("body").bind($scope.data, {
        name: "#name-preview" //bind the $scope.data.name to #name-preview in 1-way
    });
  });

 

就是这样子，我们用css selector巧妙的将数据绑定的声明从html模板中分离出来，负责业务逻辑的工程师可以完全独立的编写业务逻辑相关代码，而负责视觉效果的设计师也可以完全独立的进行美学设计。

Asta4js的模板分离技术如何提高我们的生产力，其实我们在github上公开的代码中就有一个非常好的例子，我们来看看我们的一个示例程序：

 

http://astamuse.github.io/asta4js/examples/userList/userList.html

 

 这个画面虽然简单，但至少还算得上清爽，那么，这个画面在未经我们的设计师修改之前，它长什么样子呢？就是下面这货了：

 

 

是的，我们的工程师并不擅长界面设计，这个示例也只是用来说明框架的功能如何使用的，所以，他只是简单的将必须的html元素全部堆砌到页面上，然后完成了必要的js示例代码。接下来，我们来看一下将这个都不能用丑陋来形容的页面修改为还能见人的页面，我们的设计师的提交履历：

 

-------------------------------------------------------------------------------------

SHA-1: 334859ae2785b68e8dfb7e043ffc73d777d44905

 

  * btn style modifired

 

  examples\userList\userList.css

  examples\userList\userList.html

 

SHA-1: 00aa49bda5449299cd2f0b0fc0fdf40dc66fd223

 

  * style added

 

  examples\userList\userList.css

  examples\userList\userList.html

 

------------------------------------------------------------------------

 

看到了吗，我们的设计师可以独立的完成所有的页面重构。而在设计师重构这个页面的时候，我们的工程师，正在跟框架的bug搏斗，完全没有介入这次美化工作。

 

 

好了，更多的细节，可以在github上找到，详细的user guide也已经基本完成，是的，虽然只有简单的6页wiki，但是，那已经是详细的user guide了，因为我们的框架，就这么简单！

 

https://github.com/astamuse/asta4js/wiki

 

 

Web Component

 

在这个框架的开发过程中，facebook发布了reactjs，同时google也发布了polymer，我们意识到，基于component的开发模式同样对于前端开发具有重大意义，幸运的是，我们发现，Asta4js甚至不需要为component模式做任何特殊的变更，它的设计思想天然的支持web component这一最新的web api 标准。因此，我们很欣然的宣称，我们的Asta4js，同样允许开发人员以component为基础进行开发。

 

我们甚至可以直接使用polymer的内置组件来进行开发。下面的链接是我们的在线例子演示了如何在Asta4js的项目中使用polymer的paper-slider组件：

 

http://astamuse.github.io/asta4js/examples/webComponent/polymer/slider.html

 

因为Asta4js是基于标准的web api来集成web component，因此，不仅仅是polymer，所有遵循web component标准的第三方组件，都可以轻松的被引入Asta4js的项目，我们有另外一个在线示例演示了我们如何引用mozilla brick的calendar组件：

 

http://astamuse.github.io/asta4js/examples/webComponent/brick/calendar.html

我们在用户手册中也详细的说明了如果利用Asta4js引用第三方component以及如何利用Asta4js创建自己的component：

https://github.com/astamuse/asta4js/wiki/Web-Component-Developing#work-with-an-existing-component

 

我们为什么要创建Asta4js

 

现在的前端MVVM框架有很多，angular，vue，knockout，等等等等，他们都支持简洁的view-model双向绑定，让前端工程师可以从繁琐的DOM操作中解脱出来，把更多的精力投入到业务逻辑中去。那么，为什么我们还要创造一个新的框架Asta4js呢？

 

我们在常年的工作实践中逐渐意识到一个问题，那就是现有的模板引擎在很大程度上束缚了前端设计师的生产力，因为嵌入前端模板的各种模板引擎控制代码总是会在一定程度上干扰设计师的工作，而且，也非常不利于前端页面的重构工作，可以说，设计师修改页面之后页面不能正常工作的梦魇已经是大多数开发人员日常工作的一部分了，似乎已经成为一种理所当然的负担。大多数公司对这个问题的解决办法是，或者加强设计师和开发人员之间的交流，比如安排他们的座位相邻，或者要求前端设计师具备一定的编程能力，至少将模板绑定部分的开发任务能够负担起来，更进一步的，很多公司视图通过全栈工程师来解决这个问题。

 

然而，所有这些努力不说收效甚微，至少可以说，都并不完美，设计师和开发工程师仍然被仅仅的束缚在一起，这导致了生产力的巨大损失。

 

我们在几年前创建了自己的服务端渲染框架Asta4D，它是一个灵感来源于Scala框架Lift的Java服务端框架，在这个框架中，我们实践并光大了发源于Lift的逻辑与模板分离的渲染模型，在近几年的开发实践中，取得了良好的效果，我们的设计人员可以在几乎完全不依赖后端工程师的情况下完成数个版本的前端页面的迭代，我们的后端工程师也可以在几乎完全不需要与前端设计人员交流的情况下独立的完成大部分的开发任务，这种极富弹性的开发流程给我们带来了巨大的收益。

 

在今天，当我们的新服务需要一个基于客户端渲染的MVVM框架的时候，我们评估了市面上现有的大多数框架，客观的说，我们坚持认为angularjs是目前市面上最好的MVVM框架，没有之一。但是，遗憾的是，angularjs仍然是一个侵入式的模板引擎，它要求我们在html模板文件中声明各种绑定和控制，这对习惯了分离式绑定的我们来说，是一次生产力上的极大倒退。同样，angular饱受批评的directive的复杂性，也让一些特殊的定制化开发工作的成本变得十分高昂。

 

但是即便如此，鉴于angular是我们所认为的最好的前端框架，我们的新服务仍然基于angular进行了开发。然而，随着公司业务的开展，我们又有新的服务需要开发的时候，我们终于认为，是时候将我们在服务端领域的分离式渲染的成功经验，引入到前端开发中来了，于是，我们创造了Asta4js，一个完全分离html模板和js绑定逻辑的MVVM框架。

 

最后，Asta4js仍然处于初期开发的状态，我们欢迎任何bug报告以及pull requet，也可以在github上提交issue来进行单纯的讨论。

https://github.com/astamuse/asta4js

 

 

 

 

 

我需要用英语写一篇这样的文章，但是一时理不清思路，所以决定先用中文写一遍作为草稿，因此接下来，我可能会大幅修改这篇文章。