JSConf 2010

一年一度的JSConf大会又召开,这是2010的官网:http://2010.jsconf.us/

JSConf 2010

其中的Sliders请看这里:http://devthought.com/2010/05/03/jsconf-2010-slides

Chris Williams 和 Iterative Designs 创立了JSConf,这是JavaScript开发者的第一个专业会议。09年其实还有Mix09、Velocity09、YUIConf2009等会议引人耳目。

来看看JConf2010都提到了哪些东西?

Google Chrome Frame是一个Google浏览器的内嵌框架,大致是一个运行在客户端浏览器上面的插件,允许使用一些基于开放技术的新功能。http://www.google.com/chromeframe 不过目前好像也就支持IE6以上的版本而已。

使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中。它将使用Chrome的WebKit 引擎处理网页,另外也支持IE所没有的HTML5等其他open web技术。

当你要使用 Chrome Frame 时,可以在地址前加 cf: ,就可以用 WebKit 核心浏览页面。对于开发者来说,如果想要浏览器使用Chrome Frame渲染你的网页,只需要在页面代码的加入 这么一行即可让安装了Frame的IE启用Frame。

在64位Vista平台上分别选取IE7、IE8、安装Chrome Frame后的IE7和IE8、Chrome 3进行了Sunspider JavaScript基准测试,根据测试结果,安装Chrome Frame后的IE7速度提升了近40倍,安装该插件的IE8速度提升了10倍,两者在JavaScript处理速度上基本和Google Chrome持平。

GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。

相比CVS/SVN,Git 的优势:
- 支持离线开发,离线Repository
- 强大的分支功能,适合多个独立开发者协作
- 速度块
更多的细节参见 http://mgcore.com/viewthread.php?tid=15556
Git使用指南 http://www.linuxgem.org/user_files/linuxgem/Image/git-tutor.pdf

模式编程(programming to the patterns)

JS的通用库最基本的目的是给你解决浏览器兼容性差异,Prototype和JQuery是做得最好的两个库。

JQuery对Dom的DSL化封装,还有对method chain的大量使用,几乎让你感觉在声明行为,所以它让非常多的对啰嗦的Dom编程厌烦的前端程序员迅速“上瘾”。但是,我们知道DSL化的JQuery还不够,因为它很好的解决了可读,但是并不一定容易维护(尤其是过度使用method chaning)。

其实Javascript的各种Widget库(如ExtJS、Dojo和YUI的widget库)都做到更好的复用。缺点是目前的widget库中的高级控件都严重的绑架了Dom结构,造成自己修改Dom结构比较麻烦。而没有使用Micro Format这样的基于标准的弱耦合,这是一个很大的问题。

MicroFormat(微格式)是什么,WikiPedia上面有描述:

A Microformat (sometimes abbreviated μF or uF) is a way of adding simple semantic meaning to human-readable content which is otherwise, from a machine’s point of view, just plain text. They allow data items such as events, contact details or locations, on HTML (or XHTML) web pages, to be meaningfully detected and the information in them to be extracted by software, and indexed, searched for, saved or cross-referenced, so that it can be reused or combined.

Both Firefox 3 and Internet Explorer 8 will support micro formats natively. If you cannot wait for the next version of Firefox or IE, then you can download the Operator micro format extension for Firefox and start testing your site.

这是一个最简单的从POSH(Plain Old Semantic HTML)变成hCard Micro Format的方法:

JSConf 2010

这样一来,这些本来含义难以使用爬虫和机器猜测的片段都有了具体含义。

MooToolshttp://mootools.net/)是一个简洁,模块化,面向对象的开源JavaScript web应用框架。 它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

MooTools的优点:

  • 1.灵活,模块化的框架,用户可以选择自己需要的组件。
  • 2.MooTools符合OO的思想,使代码更强壮,有力,有效。
  • 3.高效的组件机制,可以和flash进行更好的交互。
  • 4.对于DOM的扩展增强,使开发者更好的利用document。

给出一个MooTools的实例:

var Animal = new Class({
    initialize: function(name){
        this.name = name;
    }
});

var Cat = new Class({
    Extends: Animal,
    talk: function(){
        return 'Meow!';
    }
});

var Dog = new Class({
    Extends: Animal,
    talk: function(){
        return 'Arf! Arf';
    }
});

var Animals = {
    a: new Cat('Missy'),
    b: new Cat('Mr. Bojangles'),
    c: new Dog('Lassie')
};

for(var animal in Animals)
    alert(animal.name + ': ' + animal.talk());

// alerts the following:
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

介绍Raphaël,就得先说说SVG,可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性

语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

SVG图形格式优点:

  • 1. 图像文件可读,易于修改和编辑
  • 2. 与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格的说应该是ECMAScript)脚本来控制SVG对象
  • 3. SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索
  • 4. SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
  • 5. SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户

还有一个概念叫VML,VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。

Raphaël正是将VML和SVG结合起来的JavaScript库,看如下的网页,你能想象这些图像加起来只有20K么?

JSConf 2010

http://raphaeljs.com/上面有好多DEMO,体验一下吧。

Frontend Performance 指的是页面展示性能,在Best of Steve的slider中有此介绍:

YSlow(分析网页,并提出如何提高其性能的基础上一套规则)最有效的途径包括:

  • 使用CSS sprites(CSS精灵,把一些散开的小图片合并成一张大图片)
  • CDN(Content Delivery Network,即内容分发网络,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容)
  • 配置ETags(实体标签是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制,如果ETag匹配,会返回HTTP304)
  • 使用AJAX GET请求
  • 减少DOM中#数量
  • 减少404页面
  • 尽量避免使用image filter,这个东西运行时会锁死浏览器
  • 优化收藏夹图标(favicon)
  • 加速页面的有效途径包括:
  • 延迟JS加载
  • 去除无用CSS
  • 使用有效的CSS选择器
  • 优化图片
  • 优化CSS和JS的顺序
  • 使用代理缓存

详见 http://www.slideshare.net/souders/jsconf-us-2010

JSConf2010的重要议题之一:node.js

服务器端JavaScript不是个新概念。其实老早就有了,从九六年Netscape普及JavaScript的时候,服务器端和客户端都是考虑到了的,只不过只有客户端健壮发展起来了,服务端的故事直到现在才被慢慢提起。

最大的优势,不过是统一了服务端和客户端的开发语言,真正可以看到客户端服务端一起开发和一统天下的格局,兴许对开发人员的要求能降低?可以真正看到服务端的代码到了客户端一样重用。不仅仅是数据模型,也保证了一些业务逻辑可以同样地被执行。

JavaScript引擎的发展,性能上看Chrome似乎是目前最好的。

JavaScript可以和UQL的创意结合起来,通过简单的代码,开发快速丰富的互联网应用。另外,现在已经有JavaScript库来调用C++代码了,即调用本地代码。

看看基于事件的node.js吧。

顺便提一下事件模型和线程模型。事件模型比如Apache,对每一个请求分配到一个合适的线程中去处理,对于一些占用线程时间较长的应用,长连接的应用,扩展性就不足了。

安装:

./configure   
make   
make install  

一个Hello, World服务端演示(example.js):

include("/utils.js");   
include("/http.js");   
createServer(function (req, res) {   
    setTimeout(function () {   
        res.sendHeader(200, {"Content-Type": "text/plain"});   
        res.sendBody("Hello World");   
        res.finish();   
    }, 2000);   
}).listen(8000);   
puts("Server running at http://127.0.0.1:8000/");

然后执行:

/usr/local/bin/node example.js  

服务端就部署好了。

详细教程请参见:http://www.grati.org/?p=181

官网 http://nodejs.org/

这个是个聊天工具的例子,服务端和客户端都是同质的JavaScript:http://chat.nodejs.org/

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接《四火的唠叨》

分享到:

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Preview on Feedage: