2011
Feb 7
February 7, 2011 – 11:19 pm
In the last chapter, we have accomplished some skeleton of our app as well as the important model layer. In this chapter, I will guide you to complete the state management in this app and share some of my knowledge about state charts.
Statecharts
What are state charts? I got to know about state charts when learning about UML, unified modeling language. State chart is one of 23 classical diagrams. In fact, when you are creating model layer, chances are that you will already have used Class Diagram, which is another commonly used diagram of UML.
Of course, State charts exist prior to UML. It was invented by David Harel with his outstanding paper, A Visual Formalism for Complex Systems around 1986.
Sproutcore implements of statecharts inside. All views and event system are driven by it. So, it’s advisable to employ state charts to help us to organize app in case of complicated transitions of various views, concurrent status, etc.
There are three completely different statecharts frameworks for Sproutcore.
- SC.Responder and other related classes inside SC core
- Statecharts of Erich Ocean in the master
- Ki
Read More
2011
Feb 3
February 3, 2011 – 12:18 pm
Happy Chinese New Year! I hardly slept because of the all the cracks and fireworks outside.
Well, in this post, we will go through a lot of step to implement a simple flickr demo, which will take advantages of powerful HTML5 frameworks, Sproutcore.
If you just heard about Sproutcore in this post, you’d better check it out. I believe it’s the next big thing in the near future.
In addition, this tutorial is intended for intermediate users. In case you are unfamiliar to Sproutcore, better choice is that you practice the official TODO Demo.
Inside this demo, following important features will be mentioned:
- Controllers
- Statechart
- Datasource
- Routes
All code of this app can be found at Github: https://github.com/RobinQu/flickry
Code revisions and history is available on https://github.com/RobinQu/FlickrySteps. This repo will be updated with this tutorial.
Because of the scale of this tutorial, I decided to complete it in separate chapters. This is the first chapter of this tutorial.
Read More
2010
Dec 9
December 9, 2010 – 11:05 am
前端是目前互联网上最疯狂的领域之一。不仅仅是HTML5和CSS3，而是因为两者的产生激发了人们的无限想象。大家开始实用之前制作网页的方法来制作应用程序。程序逻辑和数据的问题可以交给Sencha Touch和Sproutcore之类的框架进行解决，而Look&Feel的问题，就只能由CSS3来解决了。
但是CSS是被设计来渲染页面的，而不是描述程序外观的。即使是CSS3，在如今应该也是不能满足这个要求的。虽然现在有大量的项目拥有上万行的CSS，但这样的项目对于开发者来说是一个非常巨大的考研。CSS没有变量、命名空间、包这些当今程序思想中最为基本的概念，开发者只能通过事先口头约定进行协同开发。即便是一个人维护CSS，你也不一定记得你几天前写的那些样式是否会和你今天写的有重复的ID，或是你是否在定义冗余的样式。 Read More
2010
Dec 9
December 9, 2010 – 10:09 am
Sencha的前身是Ext，而现在的Sencha Touch更是将几个著名的项目一起整合起来， 即Sencha Touch ＝ Ext JS + jQTouch + Raphael。Ext是老牌的JS框架，源自YUI，但跟YUI有着截然不容的发展方向，jQTouch是基于jQuery的UI组件库，Raphael则是非常成功的一个数据可视化的工具库。
简单的说，Sencha Touchi是将Ext强大的逻辑处理能力进行精简，然后提供了一套可用性和完成度都非常高的UI组件。这个和Sproutcore的方向极为相似。WebApp向CloudApp进化的过程必定是网页开发到应用程序开发的变化过程。在这个过程中，Sproutcore的思想过于超前，而Sencha Touch则是一个承上启下的框架，大多数前端工程师是可以进行无痛过渡的。
进一步说，Sencha Touch团队对于文档和社区的建设都比Sproutcore好上不少。又有一部分开发者对Ext本身就比较熟悉，可谓是驾轻就熟。 Read More
2010
Nov 18
November 18, 2010 – 3:32 pm
WebApp，甚至CloudApp的概念不断深入，是人们的浮躁还是web的最终归宿。全世界的厂商都瞄准了HTML5的强大功能。HTML5的日趋强大，也是用户对WebApp用户体验的需求提高。普通的Web程序，反应迟钝，无法随时保存用户记录，交互方式也很局限。但是HTML5正慢慢的给出解决方案，无论是LocalStorage、IndexedDB，还是Drag’n'Drop API，都让开发者看到了曙光。
但是假若HTML5程序真的如同桌面程序那样复杂，现有的JS体系是无法应对的。准确来说，JS的一些现有的开发框架和开发模式充其量只能开发出GMail和Flickr这样的“WebApp”，如果不直接引入桌面程序的开发模式，它们永远都只能展现出一种“浏览器里的WebApp”的感觉。 Read More
2010
Oct 30
October 30, 2010 – 7:52 pm
有时候在想，前端的核心技术完全由浏览器厂商做主，开发人员做事情总是收到各种限制真是不爽。就算到了HTMLx(x>5)，也被局限于浏览器的框框。虽然现在WebOS的概念很棒，可惜PalmPre出师未捷身先死。老态龙钟的HP也干不出什么能和Google、Apple叫板的事情。总之，前端工程师们最多到手机上做做WebApp或者Air应用找找乐子。
好吧，抱怨完了之后，我们说说现在还有“玩头”的canvas。想必大家都已经看过N多canvas的例子，不管是canvas做的动画还是游戏，都显得十分理想。按下F12，你却发现这些例子的代码是十分的庞大的，证明要操控canvas做一些“有实用性”的事情，是很有难度的。
毕竟，Canvas的API只提供了画点、画线、画圆、画正方形之类的基本接口，简陋的让人难以接受。这个时候的Canvas跟Flash是完全没有可比性的，Flash的Tween、Sprite之类的类已经封装的非常完美，其暴露给开发者的API已经高于Canvas的那些API太多太多。
但另一方面，Canvas也给我们了“制作”Flash的机会。毕竟Flash的底层无非也就是画点、画线的方法。
在这里，我想介绍一下几个比较好的针对Canvas的脚本库。在实际工程中，是绝对救星。
Read More
