Filed under Web Development …

Jan 17 2012
Leave a comment
javascript, UI

玩了下SproutCore

照着文档做了个hello world，运行起来后发现这货完全是浏览器本地运行，压根儿没有服务器的请求。嗯，这下是标准的HTML5了吧。

一个静态的本地应用有什么用呢？有人也有这种疑惑：没有服务器段那如何和数据库打交道呢？如果还是要调用Rails，那表明这个框架只能算上半个。

所以把这东西当作一个C-S的框架比如Swing来看就容易明白了。或者更直接点：它就是为手机上的移动web应用准备的，这个应用可以是http的web应用，也可以是本地的js+css应用。

作为一个C-S框架，比web应用要更关注界面中组件之间的交互，事件绑定和数据绑定是要优先考虑的，而这也是SproutCore的强处。

如果用它通过REST直接连CouchDB之类的文档数据库，倒是一个好的组合。

另外由于HTML5已经足够强大，比如图形和拖放，所以完全可以用javascript来写些“本地”应用。你可能说Swing和Gtk之流已经很成熟了呀？但答案是：HTML5是标准。

所以我关心的一点是SproutCore的模版语言仿佛走上了java JSTL的老路子：

{{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController"}}}
   {{view Todos.MarkDoneView}}
{{/collection}}

又是XML，极端难看啊。如果页面要微调，肿么半呢？

May 29 2011
1 Comment
Mobile, Web Development

webOS程序的调试

对于web开发，Firebug之类的工具必不可少。webOS的SDK里面自带了Palm Inspector的调试程序，不过我反复尝试都没有调试成功，一直提示“Disconnected. If you get disconnected as soon as you start Palm Inspector, make sure that the app is ready for inspection.”。可是我已经通过命令”palm-launch -i com.mycompany.palm1″使app运行在inspector的模式了，奇怪的很。

Google一下，发现有种新的调试模式：Emulator Host Mode，可以直接用桌面Chrome来运行app，文档上说的是用PuTTY，我摸索了下，配置如下：

这样，ssh到localhost:5522，帐号：root/[enter]，然后在Chrome访问http://localhost:5580/。如下：

可以使用Chrome的Developer Tool来查看dom对象，Cool! 看来webOS系统本身有个web server运行在8080端口上，而UI则是用webkit访问这个server的结果，这个web服务是自给自足啊！不过一些本地功能，比如“打电话”，在Chrome中显然使用不了，所以这个工具只是用来调整UI用的。

新的框架Enyo好像独立出来了，可以直接在本地开发。

May 25 2011
Leave a comment
Web Development

Some practices on web developing

1. Firebug: an UI debuger, is necessary as tool for web UI developer. 2 features: javascript debuger; css&DOM inspector.(why Swing and iOS didn’t need this?)

2. you can see all HTML codes of other site. It is good for HTML learning. code is best document.

3. the coolest thing of Dojo: encapsulation(using MVC): combine js and html in one place.

4. for the restriction of HTML(and browser compatibility), web design should keep simple.

5. the CSS layout syntax and DOM model of HTML are powerful(precise and flexible. why iOS didn’t need this?).

6. so, HTML render engine is more powerful and robust than most of UI engine.

7. HTML standard and render engine is very loose to UI related code.

8. Even at some basic operation on css & dom, Firefox and IE are different. Use framework like Dojo.

9. JavaScript is a kind of weak type language is suited for UI programming(closure is important for event handling).

10. For HTML UI, a new feature often means a lot of details should be handled(especially you use one window for all, as Gmail).

Nov 03 2010
2 Comments
javascript

Dijit和jQuery UI Widget对比

一直以为Dojo的Widget模型虽然先进，但是过于庞大，很难说是“非侵入式”。比如widget的声明：

<button dojoType=”dijit.form.Button” id=”searchButton”>
Search
</button>

这里的dojoType就是非HTML标准的，难免让人反感。Dojo是模块化的，一个widget由template和js组成，分别为view和controller（一般json为model）。与此不同的是jQuery UI Widget采用了简单的方法：view和controller都可以嵌入到HTML主页面，view是标准的HTML，然后js会对这个element做后期处理，比如绑定事件、处理CSS和定义接口。

具体参考这里的一篇文章。这是篇信息量很大文章，值得一读。比如$(‘.target’).green3()是在target element上面创建widget，感觉是在普通的DOM对象上面附上一个定制的JavaScript对象，然后$(‘.target’).green3(‘darker’)是调用JS对象上的darker方法。

可以看到，jQuery的做法更贴切toolkit的名字：只是一个工具，不对已有模式做大变化，相比DOJO就可以称的上一个框架了。（jQuery倾向于函数式编程，而Dojo则走的是OOP的路子。）我一直顾虑Dojo的效率，考虑到复杂的依赖关系，冗长的加载时间，如果没有对其进行定制或者对其不了解，很难做到轻量级的开发模型。（定制是必须的，Dojo也在这上面花了不少功夫）

如果Dojo或Dijit能分离出一个类似Ext core的东西就好了！只保留一个紧凑的组件模型。可能已经有，而我还不知道。（有个dojo mobile的东西，好像有点参考价值。）

我想象中的一种开发场景为：页面得到json reponse，通过template将其转化为html，然后使用一种绑定机制对该HTML段落进行绑定。能否有一种方式简化这个过程？这个过程需要有一致性，简洁、明了。。。

← Older posts