手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:web

改变世界的Web前端开发

文章来自:cnbeta.com

原文链接:http://www.cnbeta.com/articles/74701.htm

新闻来源:岁月如歌
JavaScript游戏一段时间内将还只是开发者们的“玩物”,要真正转换为商业应用,可能还有一段漫长的路要走。但是,当Super Mario跳跃在Web网页上时,这昭示着JavaScript的时代已经到来了。JavaScript能做什么?2008年的答案是:JavaScript连游戏都能做!

乔布斯说:“活着就是为了改变世界,难道还有其它原因吗?” 2008年,在Web前端开发界,无论国外还是国内,都发生了不少事情,有哪些是改变世界或即将改变世界的大事件呢?

JavaScript游戏
2008年4月9日,Dion Almaer发现了一款非常经典的JavaScript游戏:Super Mario. 这款游戏由Jacob Seidelin开发,大小仅14k.

mario
(Super Mario JavaScript版本: http://jsmario.com.ar/)

不少Web开发者们大跌眼镜:这真的是用JavaScript开发出来的?答案是肯定的。这款游戏利用了Canvas元素(IE中用HTML模拟),图像 存储在加密的字符串中,还用base64存储了MIDI背景音乐。除了这些技巧,其它代码就是我们熟悉的HTML、CSS和JavaScript.

Super Mario JavaScript版本的横空出世(之前也出现过用JavaScript写的游戏,但没有像Super Mario一样引起大家的关注),激起了一股用JavaScript编写游戏的热潮:

许多经典的游戏都有了JavaScript版本:Pac-Man(经典的吃豆子游戏), Space Invaders(太空入侵者),Spacius(百玩不厌的雷电)等等。

甚至还出现了一些比较复杂的角色扮演游戏:Andrew Wooldridge创造的Tombs of Asciiroth 和 CanvasQuest,Pierre Chassaing创造的ProtoRPG等。

伴随JavaScript游戏的热潮,还出现了不少专门用于游戏开发的JavaScript库。最突出的是GameJS(基于Canvas的一个2D游戏开发库) 和 GameQuery(这是jQuery的一个插件)。

除了用Canvas构建2D游戏,用JavaScript还可以构建3D游戏,还出现了非常出色的Processing.js,以及JavaScript PlotTool绘图工具等等。

感慨:JavaScript游戏一段时间内将还只是开发者们的“玩物”,要真正转换为商业应用,可能还有一段漫长的路要走。但是,当Super Mario跳跃在Web网页上时,这昭示着JavaScript的时代已经到来了。JavaScript能做什么?2008年的答案是:JavaScript连游戏都能做!
大放异彩的jQuery
2008年,无论对于jQuery的作者John Resig还是jQuery库本身来说,都是非常棒的一年。jQuery首页上有一行很明显的加粗文字:


jQuery is designed to change the way that you write JavaScript.
jQuery设计成可以改变你书写JavaScript的方式。

jQuery用数据和事实证明了它的魅力。一定程度上,甚至可以毫不夸张地说:jQuery改变了Web前端开发界。下面是用Google Trends统计的常用JavaScript库在2008年的搜索量曲线图:
jslib_trend

2008年9月份,jQuery团队战绩斐然:Microsoft和Nokia正式将jQuery集成进他们的应用程序开发平台。此外,Google的部 分应用里,也早就采纳了jQuery. 从jQuery的首页上还可以看出,DELL, Bank of America, Digg, Technorati, Mozzila等站点都在使用jQuery.

当然,除了jQuery,其它JavaScript在2008年也都有可圈可点的发展。YUI3的Preview版本,是我见过的最具有发展潜力的框架。 ExtJS在国内的普及也非常迅猛,JavaEye社区里,ExtJS一定程度上成了Ajax的代名词,各种有关ExtJS的技术文章和书籍非常多(遗憾 的是书籍的质量不高)。Prototype不温不火。Mootools则在低调中用其优雅的代码吸引了不少忠实用户。

感慨:上面提到的每个JavaScript库都是非常优秀的,掌握任何一个,对于我们的日常工作来说,都绰绰有余了。 只是对于2008年来说,jQuery的表现太突出了,连我这个天天工作用YUI的人,在2008年,都不得不为jQuery鼓掌,为John Resig喝彩!各种JavaScript库的争奇斗艳,这是JavaScript时代已经到来的另一个标志。
蹒跚起步的网页工业化
2008年,如果你是一名Web前端开发工程师,却没有听说过“栅格”两个字,那你一定是工作太忙太专心了。2008年10月份,在淘宝UED博客,出现了一篇“960的秘密”,揭开了网页栅格系统在国内的研究小热潮。
grid

伴随着栅格系统的争论,国内的前端技术博客里还出现不少对CSS框架和布局的探讨。这一切,所要解决的是以下两个问题:
  1. 网页的规范性。随着站点的成长,页面会以几何级数的速度增加。面对成千上万个网页,如何保持风格的一致性是一个不小的挑战。
  2. 网页的工业化产出。在遵守规范和保证质量的基础上,如何让页面制作容易,如何让运营人员能批量制造页面,这是目前许多大型站点面临的另一个问题。

国内站点中,淘宝、百度有啊、网易等站点的已逐步采用栅格系统。淘宝的首页和频道目前已经全部栅格化,同时尝试性开发了TMS(模板管理系统)来解决网页的工业化产出问题。

感慨:网页的高质量工业化产出,在国内很多公司才刚起步。2009年,我相信工业化将依旧是Web前端开发界的关键词。
这些也很出色
  1. 渐进增强。2008年10月份,Aaron Gustafson在ALA网站上发表了一系列有关渐进增强的文章,探讨的核心问题是:JavaScript应该做什么以及Web前端开发的技术流程。 JavaScript游戏让我们看到了JavaScript的魔力,Aaron提醒我们不能滥用JavaScript,我们要仔细考虑 JavaScript的使用场景。可用性,无侵入性,可访问性等等,这些理念是每一个前端开发工程师需要好好思考的。
  2. D2(前端技术论坛)。 2008年,在北京和上海分别举办了两届D2,这是国内前端开发工程师们的两场盛会。前端工程师,这个新生的职位逐步被国内各大公司接受。D2的意义在于,我们聚集在一起,发出了自己的声音!
  3. Google Chrome的诞生。 2008年,Chrome, JS V8引擎,Google迫使各大浏览器厂商开始比拼JavaScript引擎速度,这是JavaScript时代已经到来的另一个标志。Google和 Mozzila的努力,在年末的时候带来鼓舞人心的统计结果:IE的使用率跌破70%. 万恶的IE6,早点灭亡吧。2009年,Google的号角和淘宝网即将掀起的 NO IE6 活动,将加速IE6的灭亡。

最后,用两句话来结束本文:

2008年,我们努力改变世界!
2009年,我们继续改变世界,同时世界将开始为我们而改变!

Tags: web, development, change

web工程师的web架构设计经验分享

原文作者:yizhu2000

链接:http://www.phpv.net/html/1663.html

本人作为一位web工程师,着眼最多之处莫过于性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些架构设计的心得,不敢独享,与众友分享,本文是这次参会与众同撩交流的心得.

架构设计的几个心得:


一,不要过设计:never over design

这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化 一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领域是个非常动态的过程,我们很难预测下个星期的变化,而又需要对变化做出最 快最有效的响应。。

ebay的工程师说过,他们的架构设计从来都不能满足系统的增长,所以他们的系统永远都在推翻重做。请注意,不是ebay架构师的能力有问题,他们 设计的架构总是建立旧版本的瓶颈上,希望通过新的架构带来突破,然而新架构带来的突破总是在很短的时间内就被新增需求淹没,于是他们不得不又使用新的架构
web开发,是个非常敏捷的过程,变化随时都在产生,用户需求千变万化,许多方面偶然性非常高,较之软件开发,希望用一个架构规划以后的所有设计,是不现实的

二,web架构生命周期:web architecture‘s life cycle


既然要杜绝过设计,又要保证一定的前瞻性,那么怎么才能找到其中的平衡呢?希望下面的web架构生命周期能够帮到你

大小: 5.12 K
尺寸: 500 x 165
浏览: 1905 次
点击打开新窗口浏览全图

所设计的架构需要在1-10倍的增长下,通过简单的增加硬件容量就能够胜任,而在5-10倍的增长期间,请着手下一个版本的架构设计,使之能承受下一个10倍间的增长

google之所以能够称霸,不完全是因为搜索技术和排序技术有多先进,其实包括baidu和yahoo,所使用的技术现在也已经大同小异,然而,google能在一个月内通过增加上万台服务器来达到足够系统容量的能力确是很难被复制的


三,缓存:Cache


空间换取时间,缓存永远计算机设计的重中之重,从cpu到io,到处都可以看到缓存的身影,web架构设计重,缓存设计必不可少,关于怎样设计合理的缓 存,jbosscache的创始人,淘宝的创始人是这样说的:其实设计web缓存和企业级缓存是非常不同的,企业级缓存偏重于逻辑,而web缓存,简单快 速为好。。

缓存带来的问题是什么?是程序的复杂度上升,因为数据散布在多个进程,所以同步就是一个麻烦的问题,加上集群,复杂度会进一步提高,在实际运用中,采用怎样的同步策略常常需要和业务绑定

老钱为搜狐设计的帖子设计了链表缓存,这样既可以满足灵活插入的需要,又能够快速阅读,而其他一些大型社区也经常采用类此的结构来优化帖子列表,memcache也是一个常常用到的工具

链接:钱宏武谈架构设计视频 http://211.100.26.82/CSDN_Live/140/qhw.flv

Cache的常用的策略是:让数据在内存中,而不是在比较耗时的磁盘上。从这个角度讲,mysql提供的heap引擎(存储方式)也是一个值得思考的方法,这种存储方法可以把数据存储在内存中,并且保留sql强大的查询能力,是不是一举两得呢?

我们这里只说到了读缓存,其实还有一种写缓存,在以内容为主的社区里比较少用到,因为这样的社区最主要需要解决的问题是读问题,但是在处理能力低于 请求能力时,或者单个希望请求先被缓存形成块,然后批量处理时,写缓存就出现了,在交互性很强的社区设计里我们很容易找到这样的缓存

四,核心模块一定要自己开发:DIY your core module


这点我们是深有体会,钱宏武和云风也都有谈到,我们经常倾向于使用一些开源模块,如果不涉及核心模块,确实是可以的,如果涉及,那么就要小心了,因为当访 问量达到一定的程度,这些模块往往都有这样那样的问题,当然我们可以把问题归结为对开源的模块不熟悉,但是不管怎样,核心出现问题的时候,不能完全掌握其 代码是非常可怕的


五,合理选择数据存储方式:reasonable data storage


我们一定要使用数据库吗,不一定,雷鸣告诉我们搜索不一定需要数据库,云风告诉我们,游戏不一定需要数据库,那么什么时候我们才需要数据库呢,为什么不干脆用文件来代替他呢?
首先我们需要先承认,数据库也是对文件进行操作。我们需要数据库,主要是使用下面这几个功能,一个是数据存储,一个是数据检索,在关系数据库中,我们其实非常在乎数据库的复杂搜索的能力,看看一个统计用的tsql就知道了(不用仔细读,扫一眼就可以了)

select   c.Class_name,d.Class_name_2,a.Creativity_Title,b.User_name,(select   count(Id)   from   review   where   Reviewid=a.Id)   as   countNum   from   Creativity   as   a,User_info   as   b,class   as   c,class2   as   d   where   a.user_id=b.id   and   a.Creativity_Class=c.Id   and   a.Creativity_Class_2=d.Id 


select   a.Id,max(c.Class_name),(max(d.Class_name_2),max(a.Creativity_Title),max(b.User_name),count(e.Id)   as   countNum   from   Creativity   as   a,User_info   as   b,class   as   c,class2   as   d,review   as   e   where   a.user_id=b.id   and   a.Creativity_Class=c.Id   and   a.Creativity_Class_2=d.Id   and   a.Id=e.Reviewid   group   by   a.Id ..............................................

我们可以看出需要数据库关联,排序的能力,这个能力在某些情况下非常重要,但是如果你的网站的常规操作,全是这样复杂的逻辑,那效率一定是非常低 的,所以我们常常在数据库里加入许多冗余字段,来减小简单查询时关联等操作带来的压力,我们看看下面这张图,可以看到数据库的设计重心,和网站(指内容型 社区)需要面对的问题实际是有一些偏差的

大小: 5.04 K
尺寸: 500 x 373
浏览: 1949 次
点击打开新窗口浏览全图

同样其他一些软件产品也遇到同样的问题所以具我了解,有许多特殊的运用都有自己设计的特殊数据存储结构与方法,比如有的大型服务程序采取树形数据存储结构,lucene使用文件来存储索引和文件

从另外一个角度上看,使用数据库,意味着数据和表现是完全分离的(这当然是经典的设计思路),也就是说当需要展示数据时,不得不需要一个转换的过 程,也可以说是绑定的过程,当网站具备一定规模的时候,数据库往往成为效率的瓶颈,所以许多网站也采用直接书写静态文件的方法来避免读取操作时的绑定

这并不是说我们从今天起就可以把我们亲爱的数据库打入冷宫,而是我们在设计数据的持久化时,需要根据实际情况来选择存储方式,而数据库不过是其中一个选项


六,搞清楚谁是最重要的人:who's the most important guy


在用例需求分析的时候常常讲到涉众,就是和你的设计息息相关的人,在web中我们一定以为最重要的涉众莫过于用户了。,在一个传统的互动社 区开发中,最重要的东西是内容,用户产生内容,所以用户就是上帝,至于内容挑选工具,不就是给坐我后面三排的妹妹们用的吗?凑或行了,实在有问题我就在数 据里手动帮你加得了。。这大概是眼下许多小型甚至中型网站技术人员的普遍想法。钱宏武在他的讲座里谈到了这个问题:实际上网站每天产生的内容非常的多,普 通人是不可能看完的,而编辑负责把精华的内容推荐到首页上,所以很多用户读到的内容其实都依赖于编辑的推荐,所以设计让编辑工作方便的工具也是非常重要, 有时甚至是最重要的。


七,不要执着于文档:don't be crazy about document


web开发的文档重要吗?什么文档最重要?我的看法是web开发中交流>文档,

现在大的软件公司比较流行的做法是:
注重产品设计文档,在这种方法里,产品文档非常详尽,并且没有歧义,开发人员基于设计文档开发,测试人员基于设计文档制定测试方案,任何新人都可以通过阅读产品设计文档来了解项目的概况

而web项目从概念到实现的时间是非常短的,而且越短越好,并且由于变化迅速,要想写出完整的产品和需求文档是几乎不可能的,大多数情况是等你写出 完备的文档,项目早就是另外一个样子,但是没有文档的问题是,如果团队发生变化,添加新成员怎样才能了解软件的结构和概念呢,一种是每个人都了解软件的整 个结构,除非你的团队整体消失,否则任何一个人都能够担当培养新人的责任,这种face2face交流比文档有效率很多。

于是就有了前office开发者,现任yahoo中国某产品开发负责人的刘振飞所感觉到的落差,他说,我们的项目是吵出来的,我听完会心一笑


八,团队:team


不要专家团队,而要外科手术式的团队,你的团队里一定要有清道夫,需要有弓箭手,让他们和项目一起成长,才是项目负责人的最大成就

 

总结:

架构是一种权衡

大小: 3.47 K
尺寸: 368 x 272
浏览: 1983 次
点击打开新窗口浏览全图

web开发的特点是是:没有太复杂的技术难点,一切在于迅速的把握需求,其实这正式敏捷开发的要旨所在,一切都可以非常快速的建立,非常快速的重构,我们的开发工具,底层库和框架,包括搜索引擎和web文档提供的帮助,都提我们供给了敏捷的能力。

此外,相应的,最有效率的交流方式必须留给web开发,那就是face2face(面对面),不要太担心你的设计不能被完备的文档所保留下来,他们会以交流,代码和小卡片的方式保存下来

人的因素会更加重要,无论是对用户的需求,还是开发人员的素质。

Tags: web, 分享, 架构, 经验

Web通信分析工具(ZZ)

身为一名WEB开发人员,对于WEB通信当然是非常关心的,对于每一个POST甚至都有可能要抓包 进行分析,但究竟怎么做,用什么做,如何去做,还是有点讲究的。我个人是习惯用fireBug和webdeveloper还有IE下的httpwatch等进行分析。看到这篇文章的介绍,也可以看看别人是怎么做,取别人的之长补自己之短才能有进步嘛。。

原文链接:http://tech.idv2.com/2008/12/30/web-comm-analyzer/

原文作者:charlee

内容如下:(图片下载到了本地了)

在抓虾上看到一篇Web开发分析工具的文章(链接就免了),怎么远没有我用的东西好用呢? 还是介绍介绍我用的吧。由于平常开发只用FireFox,完成后再去调试IE, 所以这些工具绝大部分是针对FireFox的。

如果把Web通信从上到下分为许多层——XMLHttpRequest层,HTTP层,TCP层, 那么这些工具可以分别抓取每个层的通信数据进行分析,结合使用极其强大。

2008/12/31:另外可以参考daniel同学的Web开发常用工具一文,相信会大有帮助哦。

 

XMLHttpRequest层:Firebug

适用范围 Ajax应用程序
优点 使用方便,数据截取完整
缺点 只能分析XMLHttpRequest请求,其他类型的请求无能为力

Firebug应该是尽人皆知了。 它的控制台能监视XMLHttpRequest请求,能看到完整的请求和应答的数据。 用它来调试Ajax程序是最好不过了。

大小: 11.65 K
尺寸: 500 x 230
浏览: 1772 次
点击打开新窗口浏览全图

HTTP层:Tamper Data

适用范围 普通网页,Ajax应用程序,Flash
优点 使用方便,适用范围广,任何HTTP请求都能截获
缺点 只能截获请求头、请求内容、应答头,得不到应答内容;涉及文件下载时效率大幅度降低

Tamper Data比Firebug进了一步, 只要是HTTP请求,它都能抓下来,可惜的是看不到应答内容。 适用于分析请求流程、请求参数、请求数据、重定向URL。 对于非Ajax程序如普通网页、Flash、ActiveX等程序,用Tamper Data来分析十分方便。

大小: 19.78 K
尺寸: 473 x 376
浏览: 1771 次
点击打开新窗口浏览全图

HTTP层:burpsuite

适用范围 普通网页,Ajax应用程序,Flash
优点 适用范围广,截取数据完整,不挑网卡
缺点 使用稍稍麻烦

burpsuite中的proxy功能用于分析Web通信十分好用。 它的原理是架设一个代理服务器,让浏览器通过代理来发送请求,代理就可以截获数据了。

大小: 18.76 K
尺寸: 283 x 376
浏览: 1815 次
点击打开新窗口浏览全图

使用方法为:

  1. 配置proxy,然后设置浏览器使用它的proxy
  2. 访问想要抓取的那个网页
  3. burp suite的proxy中就会看到请求内容,在这里即可详细地分析请求。
  4. 如果想继续分析应答,可以右键点击请求内容,选send to repeater
  5. 切换到repeater标签,点【go】按钮发送请求,在下方就可以看到应答

TCP层:wireshark

适用范围 任何网络程序
优点 适用范围广,截取数据完整
缺点 使用麻烦;不能使用loopback网卡

如果以上方法都不管用,就要祭出终极武器wireshark(原名ethereal)了。 它从网络的最底层入手,可以截获任何类型的网络通信,而不仅仅是HTTP协议。 比如要开发一个邮件程序,需要分析服务器端脚本与POP3服务器之间的通信, 那就非得wireshark出马不可了。

大小: 131.38 K
尺寸: 500 x 371
浏览: 1786 次
点击打开新窗口浏览全图

使用方法:

  1. 在wireshark中选择抓取物理网卡;
  2. 让应用程序发请求;
  3. 在wireshark中停止抓取;
  4. 从抓到的包一览中找出刚才应用程序发出的请求,右键点击选择 Follow TCP Stream,就能看到该请求的完整内容。

这个工具的不足之处是它不能抓取loopback的网卡,也就是说, 如果你的程序连接的是位于localhost或127.0.0.1的服务器, 那wireshark是抓不到的。解决方法是,让程序通过真实物理网卡去连别的机器, 或是使用虚拟机的虚拟网卡也行。

 

Tags: web, developer, analyzer, tools

Cookie常识

在制作 网页的时候,不可避免的会用到Cookie,无论是登录也好,保存状态也好,或多或少,你都会在使用Cookie这个小甜饼。

然而甜饼并不是这么好吃的,吃的过多也会有问题的,如果你的网站COOKIE数量过多,或许你的浏览器就直接打不开这个网页(这点好象是和SERVER端有关,apache接受客户端的COOKIE数量和长度也有限制)

对于用户来说,如果没有做限制的话,那么COOKIE过多会导致后一个新的COOKIE会覆盖掉前面的COOKIE。。

那么,究竟应该有多少COOKIE呢?

以下内容来自DBA Notes网站:

Cookie 是个很有趣的话题。根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了,对于 Cookie 最重要的就是,尽量控制 Cookie 的大小,不要塞入一些无用的信息。

所以,不要把你想知道的用户行为都采用COOKIE来保存,否则造成的后果恐怕是非常大。在一些大型网站,目前对于用户的行为已经开始逐步采用数据库来控制,这样可以记录用户的一些操作,对于用户的行为分析也能够达到的一定的效果,缺点是加大了数据库的压力。而且对于未登录网站的用户来说,他的行为将变得毫无意义

想象:将用户的一些普通行为采用Cookie保存,重要信息记录数据库。比如用户浏览过的网页记入cookie,而用户停留时间最长的网页则考虑记入数据库(当然,对于那种开着网页不关的人就无法对付了,但仍然可以通过客户端的document.scroll的高度来进行判断,再通过ajax提交 )意义不是特别大。对于一些象购物车之类的,确实可以考虑存入数据库,否则一旦网页误关闭了对于用户的体验可能并不是很好(给用户一个可选项:cookie或者数据库,但好象有点傻)。。。。。。

随便谈谈吧。。

Tags: php, web, cookie, rfc2109

JavaScript---Web流程定义工具

用javascript+vml来做工作流,确实是第一次看到,所以我在看到有这个新闻的时候,就觉得特别的吃惊。当年的TRS就是因为有一个activex版的工作流控件的CMS,导致他的价格非常的高,今天能够看到有javascript版的,惊讶是难免的。。。

只是并非所有的机器都支持VML,所以它的适用范围还是有限的,不过,话又说回来,activex也只支持IE,但仍然有那么多人在用。看来,只要是好东西,即使你不跨平台,照样有人用的起劲。

闲话不说了,附上原文网址和他的说明,原文:http://www.cssrain.cn/article.asp?id=1192

开发语言;javascript,html,vml,json,css
功能:
1.环节可用鼠标拖拽
鼠标选中环节后不释放,拖拽鼠标,环节将随鼠标移动,释放鼠标后,环节不再移动。
2.路径的两个端点可以通过鼠标拖拽,改变路径指向的环节
鼠标选中路径的端点后不释放,拖拽鼠标,路径被选中的端点将鼠标移动,在选中的环节释放鼠标后,路径被选中的端点将指向该选中的环节。
3.ctrl+a,全选。
4.按住ctrl,鼠标选中对象,可以多选。
5.delete,删除选中对象。
6.使用鼠标多选
鼠标点击空白处不释放,拖拽鼠标,会出现一个长方形虚框,虚框的范围随着鼠标移动而变化,虚框范围内的对象将被选中。
7.动态添加环节和路径的属性

大小: 38.19 K
尺寸: 458 x 376
浏览: 2088 次
点击打开新窗口浏览全图

由于对这个东西很吃惊,所以,把图片和附件保存到了本地。需要的朋友可以点上面那个网址或者点本文的附件进行下载

不好意思,刚发现附件有密码,我也不知道是什么密码,有破解软件的朋友只能辛苦一下了,或者去上面的cssrain.cn问站长去吧,我这里仅仅是作个备份

附件: i200812491011.rar (66.99 K, 下载次数:3146)

Tags: javascript, 工作流, web, vml

Records:14123