Story Telling

I am designing a simple web app that can possibly improve people’s productivity. Even though it’s supposed to be a fast, light-weight web app, it’s still going to be more complex than most projects I’ve done before. So to get a good start on it, I wanted to try out some PHP frameworks to get started and reuse some common features.

Some of the frameworks that came to my vision was CakePHP, Zend Framework, and Symfony, a PHP-Ajax framework that I came across last year. I chose to give CakePHP a try simply because its homepage looked cute. It’s probably not the best but my product is in prototype phase anyways. I don’t see the possibility of making my app available to general public in any recent future (ie. in 6 months or so, but 6 months is probably enough time to upgrade a small website like this onto a production environment).

MVC-The Essential Design

CakePHP follows MVC design pattern and this might be the design of other frameworks I considered too. It’s still one of the most popular and tangible design patterns among enterprise systems.

Model

One confusion I’ve had with the pattern was that I thought the database was the model, but it turns out that there’s another layer between controllers and database, ie. the models, that wrap up complex SQL into meaningful function calls. And this is where the framework comes in handy. Most basic database operations are implemented in a super class Model. Simply implementing this class will allow model objects to interact with database easily, as member functions such as add, del, and some other helper queries like findAll, and findId etc. I am not very precise on the names but the stuffs are there.

Controller

Classes that implements Controller usually contains handling functions. The framework maps actions extracted from url to functions in corresponding classes. The rule is like this: domain/model/action will map to function action in model_controller. “_controller” is the standard postfix that represents controller of model with name “model”. A typical use, adapted from CakePHP manual, domain/posts/add calls posts_controller->add to add new post.

View

In CakePHP, the view layer are partial html files with file extension .thtml. There’s a overload here between controller and view. For example, in the above section, we know domain/posts/add can handle POST/GET requests to store new post in database, but the url domain/posts/add is also used to access the add new post interface/form. I guess the framework detects POST/GET field in HTTP requests and handle actions before displaying the view.

*I need to check the above statement as I gain more knowledge of the framework.

SWFObject is a lightweight library for simplifying embedding flash in web pages. It was quite confusing to me at first that such a library was of any use since Flash is one of the most standardized program on the web, yet the web is so heterogeneous that even such proprietary programs are suffering from inconsistencies from browser to browser.

It took me sometime to figure out that the library in fact offers only one main feature (maybe there are others that I don’t know). Proving something is is probably harder than proving something is not. I was expecting some more fancy stuff such as calling ActionScript from web pages but there was not a clue of such functionality. Anyhow, now I finally understood its use, and this trivial lab is born.

The old story

I believe before everything messed up, we only needed a simple embed or object tag to add flash. Apparently this has changed and we need experienced people to set it up for us so we don’t need to re-invent the wheel.

How do they do it now?

Add two lines of JavaScript

<script type="text/javascript" src="jslib/swfobject/swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");</script>

Example

Example: lab006.html

I am looking for jobs, again, after two fulfilling years in my last job and school.

Graduation Date: June 2008

Desired Location: Boston, MA

Desired Job Level: Entry or intermediate

Desired Job Titles: Web/Java/.Net (Application) Developer

Resume: resume.pdf

Interests: I am specialized on front-end web development and it’s also what brings me the most enjoyment. I have gained sound understanding of JavaScript frameworks, especially Dojo, during my internship at IBM. I would evaluate my skills on it to be at least intermediate to advanced. However, I can also take on many other development tasks and would like to gain concrete experience on them.

Technical Skills:

• Proficiency in Java, C/C++, Python and C#.NET
• JavaScript, Ajax, Dojo framework, XHTML, CSS, SVG/VML
• PHP, JSP and Servlet, ASP.NET
• MySQL, DB2, database in general; certified for DB2 LUW8.1
• Graphics/Flash design and product prototyping; 3D Graphics, OpenGL
• Software Engineering: Requirement Engineering, Interaction Design, and Design Patterns
• Computation algorithms and complexity theories
• Linux, Windows

“… I am specialized on front-end web development …”

General Skills:

(These are probably too common and provide little insight, but I’ll put them here anyways, since I don’t have to worry about the length of a blog entry)

• Ability to work in teams or individually with minimum supervision
• Ability to pick up new technologies and concepts quickly
• Awareness of software development processes and models
• Awareness of latest technology trends and directions
• Good interpersonal communication skills, both written and verbal
• Interests in user experience design; ability to work with details

Bitten by a spider

My internship has saved my life. I was so confused about what to work on before it, now everything has been clear and unambiguous to me. I worked extensively on JavaScript, Ajax, advanced CSS, and complex JavaScript frameworks. Weird or not, after I came back to school, all those puzzling concepts I was frustrated at just solved themselves. Principles of operating system look so similar as those of JavaScript frameworks, and the reasons of design choices just became natural and making senses. It feels great and I feel I was bitten by the spider too, and I turned into a super hero over night.

The choices for me

With that confidence, overestimated or not, I would like to start digging deeper into Java or .NET. They would certainly stay popular for a longer time, if not always the most popular ones. The power and reliability of desktop applications are still way better than those of web applications. J2EE used to be one of the hottest technologies, now its extended language features and new graphic library can possibly bring it back to the competition of RIA again. On the other hand, the SilverLight, part of .NET 3.0 framework, is ambitious to rule out others. Although Microsoft has been criticized over the recent years for its “closeness”, Windows developers are nonetheless still highly desired by many mid-sized companies, for the unification and simplicity Windows platforms offering.

“… I feel I was bitten by the spider … and turned into a super hero over night.”

Work lying ahead

Picking up a new language quickly is nothing to brag about. Getting in-depth knowledge about the features of the frameworks and their advanced applications is the real catch. Although the frameworks share same philosophies in many aspects nowadays, I should at least be specialized in one of them and know the trade-offs made among similar components in other frameworks.

I guess I will go with Java first. C is a fun, flexible, and fast language, once I managed to figure out what are pointers and pointers to pointers, but it’s not that convenient to reuse existing code. C to the computer is so much like JavaScript to the browser, I enjoy working at lower level, but life is much easier to work with Dojo. C# is quite much like Java and Java5 is so much like C# too. An analogy here of the two could be the relationship between JavaScript and ActionScript, they share the same standard, but the DOM’s (Libraries) they operate on are different.

The goal of this tutorial is to explore dojo.rpc module. To my best understanding, this is a simplified way of calling servers asynchronously in Dojo. So now you can save a lot of hassle worrying about the types and versions of browsers.

Modify Interface

setting up a remote message

I created a file called lab005.service and put under dojolab/resource/

Later we will load message, asynchronously, from this file.

adding a output pane

The message in a file could be large, so it’s more appropriate to have an output box to display retrieved text.

Adding RPC function

changing the function name

Since when the button is pressed, it’s going to get some data, so a better name representing its function is preferred.

var getData = function(){
...
}

read url

Like in the last exercise, we will read from the TextBox. The value is set as the url to the file from which we will read. It’s also disabled to give you an idea of what it looks like.

<input id="input" name="string" size="50" type="text" value="resource/lab005.service" />

*With Firebug it’s possible to modify the value of the url so disabling it cannot really protect it from being changed.

create dojo.rpc.JsonService object

Require the module first.

dojo.require("dojo.rpc.JsonService");

Create a new JsonService object, passing it the url which it will call.

//msg was read from TextBox value;
var rpc = new dojo.rpc.JsonService({serviceUrl : msg});

bind and call

With the handle to the JsonService object, we will then bind it to handler functions.

rpc.bind(null, null,
{
callback: function(text){
console.debug("Message Retrieved.");
output.innerHTML = text;
}
},
null);

The third parameter of the bind function must be a object that contains at least a callback function. It may also contain another function to deal with cases when the retrieval fails.

The fourth parameter is the url, since we already specified url during JsonService object creation, it can be null.

The first and second are method and parameters, respectively. They are null because the file from which we will read is a plain text file and doesn’t ask for methods or parameters.

Screenshot

Example

Example: lab005.html
Source Code: lab005.txt