论坛首页 Web前端技术论坛

Argos:轻量型的JavaScript开发平台(一)

浏览 1459 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2016-03-15  

学习AngularJS后,发现Js越来越有趣,开发有效率也是非常地高,上手很快。
决定要在JS的道路上一直走下去。

使用Java开发后端代码是一种痛,因此需要JavaScript来解放大脑。

我对选型的平台定义几个目标:
学习成本极低:快速上手,不用学习太多类型技术。
灵活:实现简便,功能模式简单。
热布署:现改现得,不需要太多的布署操作,升级无缝。
稳定:除了系统上的运行稳定,在代码与库,还有生态上需要有比较稳定的发展。

有几种选择方案,业务最好的是Node.js,这个东西性能很强大,不过很多坑,虽然事件模型很优秀,但开发过程发现,代码阅读性实在是比较低。而且第三方库代码实在是少,很多东西还需要自己实现,而且比较多坑。

由此我将目光转向Java平台上,发现了RingoJS。这个东西基本与node.js中的express的东西无差。使用起来比较轻便。但是在学习成本这块比较高,可以说与java无任何关系。例如一些AOP,事务这些东西都没有较好的支持,因此放弃。

从目前的各种框架分析后,主要的一个开发效率,学习成本,第三方库丰富度上的问题为主。

关于开发效率,与学习成本上,主要是因为整个开发链过程中,需要学习与管理的东西太多。从整个系统开发链接中,由前到后需要学习的东西是比较多的,从html,css,js,java,sql。在各环境还会衍生出各种技术。
其中前后端分工最大。其中前后端思想极其不统一。这种情况也是类似于服务程序与数据库不统一。
为了补这个坑,出现了各种ORM,但是还是无法很好地解决设计不统一的问题。

由种种原因,决定尝试统一前端与后端,数据库的开发思想,设计了一套解决方案。
目前为止,打算需要结合JavaScript与Java的优势,其核心思想中前后数统一,新开发一个项目,Argos。

Argos主要针对Web系统开发,使用者只是需要使用JavaScript代码编写。融入了同步式的事件模型。包括前后端,通过抽象统一对象,统一前后端开发模式。后端为BaaS,后端为服务的模式。

理论太多无用,先上代码试试:
编写服务端代码,建js文件hello.js

var $argos = {  
        $init:function(){  
            print('hello World');  
        }  
} 

 
启动程序

#argos server/hello.js  

 

启动后会输出'hello World'。

以上代码仅启动服务,在启动业务时,平台会调用$argos.$init方法。
现在开始做前后端交互的样例,加入一个简单成员appName,并让前端可以访问appName成员的值。

var $argos= {  
    $init:function(){  
        print('hello World');  
    },  
    appName : 'helloApp'  
}  

 


编写前端代码:

var $argos= ...//省略初始化过程  
$scope.getAppName = function(){  
                    $argos.getAppName(function(resp){  
                        console.info(resp.data);  
                    });  
}  

 


当调用$scope.getAppName时,前端控制台会打印出“helloApp”字样。

上段代码主要说明了后端$argos对象与前端$argos两者抽象结构尽量保持一样。
因于环境不同无法达到完全一致。不过尽可能地实现同样的效果,前端语法上会统一规范。
后端中$argos对象中存在appName成员变量名,则在前端使用时,在成员名前加上get字眼。

同理,需要更新服务端值时,则需要使用'set'字眼,代码如下:
Js代码

$scope.setAppName = function(){  
                   var newAppName = $scope.appName;  
  
                   $argos.setAppName(newAppName,function(resp){  
                       console.info(resp.data);  
                   });  
               }  

 

更新完成后,则会输出服务端更新后的新值。

以上代码配后AngularJS框架的$scope对象,当前的前端测试示例基于此情况。
还有一种情况则是服务端某方法的调用,这类调用更加简便,直接在前端调用方法就可以,示例代码如下:
后端代码:

var $app = {  
    $init:function(){  
        print('hello World');  
    },  
  
    sum : function(param){  
        var a = param.a?param.a:0;  
        var b = param.a?param.a:0;  
  
        return a+b;  
    },  
  
    appName : 'helloApp'  
}  

 

前端代码:

$scope.sum = function(){  
                    var datas = {  
                            a:1,  
                            b:2  
                    }  
                    $argos.sum(datas,function(resp){  
                        console.info(resp.data);  
                    });  
                }  

 

sum为服务端一个方法,直接返回param中两个值的和,此时控制台输出3,表明此时sum方法不需要任何变化,可以直接调用。

目前我们再继续配合AngularJS框架,利用框架更进一步简化代码,更优美,见下文!
html代码如下:
Html代码

<div>  
                    AppName:<input type="text" ng-model="$argos.appName" ></input>  
                    <a ng-click="updateAppName()">updateAppName</a>  
</div>  

 


对应Controller代码如下:

$scope.$argos = $argos;  
$scope.updateAppName = function(){  
    $argos.setAppName();  
}  

 

此时,当用户点击"updateAppName"时,程序自动会将用输在输入框输的内容提交到服务端的,服务端则会将值设置入$argos.appName中。这里一个很重要的地方则是将$argos对象设置入$scope中。
可以直接将$argos当成域其中的一个对象。然而在setAppName()方法的背后,会将appName的值设入
$argos.appName,此时通过双向绑定,将新值输出到页面中,如果是仅需要从服务端更新值到前端,则可以直接调手$argos.getAppName()方法,不需要带回调方法,无论是否回调,都默认更新$argos.appName这一成员的值。

换句话说,在使用argos开发过程中,主要的精力在于通过$argos对象来实现业务逻辑的载体。
不需要太多考虑前后端之间的接口交互,argos会帮你将后端的对象模型与前端做一个映射,从逻辑上讲,前后端的业务模式与流程可以保持一致,除了调用的方法不太相同。

目前看来,这样实现业务效果的感觉非常好,两者之间的思维上基本是统一的,各种值的设置方法名基本一致,调用时轻快简约,不需要写太多ajax相关的方法,后端代码也是简明轻快,不需要搭建太繁杂的东西。配合上AngularJS后,两者的效果达到1+1>2的效果。

目前项目也是在前期开发阶段,现在只是小刀一试,在这个过程中,需要一些具体的项目去实践验证。
欢迎加我QQ(2918418143)或加群(533823007)讨论。

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics