开源技术架构 – Web App架构
本文由发表于4年前 | Javascript | 评论数 2 |  被围观 8,127 views+
1、首先提及了需要解决的事情:协同,代码管理,调试环境,开发框架,资源优化,部署。2、然后是设计RESTful Data API,前后端可以并行工作。3、开源了整个项目到GitHub,这点我非常喜欢。4、选取AMD的理由:定义模块,自动化管理,CSS/HTML加载,灵活的Build工具5、选取Sass & Compass的理由:可编程的CSS,自动合成Sprite6、接下来需要考虑的就是工作流,脚本任务,类库管理:分别采用了YO,GRUNT,BOWER7、接下来,就是根据这些框架类库搭建环境了,在熟悉了的情况下,在一台新的电脑下只要十分钟就可以搭建好开发环境了8、接下来便是寻找一个合适的MVC框架,分别尝试了Backbone和Knockout,分别对比了其优缺点:8.1、整体架构图如下:8.2、使用了angular的依赖注入:8.3、基于DOM的模板8.4、基于dirty-check的数据更新机制8.5、最大的收益:控制UI变化的时机和节奏,优化渲染性能8.6、最后就是项目的部署了总结:

每次谈到架构,都感觉有点远了,还不到时候谈论这个,但是看了豌豆荚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、整体架构图如下:
web app的架构

web app的架构

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.');
            });
        };
    });

总结使用之后的优点:

1、MVC严格分层
2、依赖注入控制访问权限
3、良好的可测试性
良好的可测试性

良好的可测试性

8.3、基于DOM的模板
8.4、基于dirty-check的数据更新机制

事件缺少context,可能导致一系列问题:

难于debug和定位
事件泛滥,容易冲突,维护难度大
难于批量优化

dirty-check会循环的检查所有数据,直到不再有变化,最后一次性渲染,难点在于如何保证即时触发

可能导致数据变化的事件:DOM Event, Timeout XHR, Worker, etc...

8.5、最大的收益:控制UI变化的时机和节奏,优化渲染性能
8.6、最后就是项目的部署了

有时候我们觉得使用框架会很没意思,觉得自己像个机器人,做一些无用功,但是反过来思考,却可以更加快速的让你接触到更多的知识,如果在空闲之余对这些框架的原理进行研究并对比各种同类框架的优缺点,在这些基础之上,相信也有能力去编写一个自己想要却找不到的框架了,你的思考深度决定过了你的兴趣程度。

有了这些第三方的API作为架构之后,即使你是一个人在写项目,你也绝对不是一个人在战斗,因为你已经身处开源世界了。

总结:

对于急着使用的技术,快速入门,做一个简单demo,整体阅读API,前提是一定要弄清楚demo的每一行代码的作用

多使用第三方框架或者类库提高开发效率

在空余时间,多把握好,去阅读一下第三方框架或者类库的源代码,找到吸引你的地方,多联想思考,写写技术博文

基于上面一点的学习和总结,如果下一次你真的发现没有这样的可以被使用的轮子时,你就可以着手创建一个新的类库了

平时作为个人的练习,还是可以根据自己近期的收获,写一个简单的框架练习一下的。

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/open-source-technology-architecture-web-app-architecture.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 6/10
文章评论
    2条评论
  1. SaiBoDY 2013年06月12日22:12:58  #-49楼 回复 回复

    文章很好,很受教,拜读了,以后会常来。期待更新呀。

  2. 沧海月明 2013年06月28日10:26:41  #-48楼 回复 回复

    楼主,你好,你写的文章太棒了,很喜欢你的网站,能开放用户注册功能吗,这样的话就可以更好地观赏你的文章了。

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Linux下find,sed,tr,grep,cut,wc等常用命令的使用和相关实例解析 2011/6/10
2 VirtualBox安装windowsXP共享硬盘文件问题 2011/5/2
3 Java笔记 – 反射 动态代理 2013/12/25
4 扩展自jsoup的HTML XSS过滤程序 2015/3/9
5 ExtJS在树TreePanel之间拖放结点 2011/4/11
6 处理机调度与死锁-常用调度算法与银行家解决速锁问题 2011/6/29
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.