开源技术架构 - Web App架构 | IT宅-帅旋的专业知识分享

每次谈到架构，都感觉有点远了，还不到时候谈论这个，但是看了豌豆荚web版的规划和技术架构的选取之后，确实挺有感触的。

好的框架可以提高开发效率，一个项目比较完整的架构，需要考虑到协同，代码管理，调试环境，开发框架，资源优化，部署等等。基于现有的架构之上做开发，并不只是简单地填充代码，而是在熟悉这套开发模式的基础之上，了解整体的架构，并与其他框架对比，必要时深入去研究下框架的实现和优缺点，积累更加全面的软件知识，才可以从整体上去考虑一个软件的设计。

在这个开源的世界里，做一个程序很多时候都可以找到很多不错的开源框架，从而更加快捷的搭建出自己的开发框架。J2EE开发框架的成熟度就不说了。而在web app或者web游戏这一块，框架也是百花齐放，但是如果我们不去仔细做调研对比，就不知道哪一个框架时我自己的。俗话说，不要重造轮子，但是很多时候，因为找不到合适的取代框架或者第三方类库，我们都会自己去开始为自己的project做一个框架，可是这样随着而来的问题是：项目的deadline已经不允许这样做了，而且很多时候，根据自己现有的水平，做出来的框架也不一定就是好用的。

看了豌豆荚web版的规划和技术架构的选取，确实感觉挺不错的。

1、首先提及了需要解决的事情：协同，代码管理，调试环境，开发框架，资源优化，部署。

2、然后是设计RESTful Data API，前后端可以并行工作。

3、开源了整个项目到GitHub，这点我非常喜欢。

4、选取AMD的理由：定义模块，自动化管理，CSS/HTML加载，灵活的Build工具

5、选取Sass & Compass的理由：可编程的CSS，自动合成Sprite

6、接下来需要考虑的就是工作流，脚本任务，类库管理：分别采用了YO，GRUNT，BOWER

7、接下来，就是根据这些框架类库搭建环境了，在熟悉了的情况下，在一台新的电脑下只要十分钟就可以搭建好开发环境了

8、接下来便是寻找一个合适的MVC框架，分别尝试了Backbone和Knockout，分别对比了其优缺点：

Backbone： 优势： 1、精致，抽象的数据同步模型 2、清晰的结构，易于扩展 缺陷： 1、Wiew层功能薄弱 2、缺乏常用功能

Knockout： 优势： 1、双向数据绑定，写View很方便 2、可以通过插件扩展功能 缺陷： 1、只有View层解决方案 2、基于事件的数据更新，不容易优化

最后选取的MVC框架是Angular，因为Angular的一些理念很好，也许可以用在大家的项目中

现在就来分析一下Model-View-ViewModel:

8.1、整体架构图如下：

[caption id=“attachment_2318” align=“aligncenter” width=“542”] web app的架构[/caption]

8.2、使用了angular的依赖注入：

angular.module(‘snappea’, [‘ng’])
.service(‘photos’, function($http){
this.fetch = function(){
return $http.get('http://snappea.com/photos'); }; }) .controller('galleryController', function($ scope, photos){
$scope.photos = [];
$scope.fetch = function(){
$scope.photos = Photos.fetch(); }; }) .directive('counter', function(){ return function($ scope, $element){
$element.on(‘click’, function(){
$scope.fetch();
});
$scope.$ watch(‘photos.length’, function(value){
$element.text(‘Total’ + value + ‘photos.’);
});
};
});