JScentric
My approach to javascript is different because I want to develop apps that are largely built on javascript, and not in the traditional website way: lots of html, lots of css and little javascript. I just want an index.html and lots of javascript. And forget styles.css - why noy styles.js!
When I say an app I mean a HTML5 app which runs locally. So I’m really talking about an alternative to Adobe Air with the added bonus of deployment to platforms like the iPhone, Android and webOS as well as the desktop. Although the techniques I discuss can be applied to online websites. The main contraint (for now) is webkit browsers.
My own view is that HTML 5 applications should largely be built (if not solely) on javascript because:
- it can do everything that html and css can do
- it can do for more than html and css on the client browser side
- it’s a server language too - check out nodejs and commonjs
As such my philosophy to HTML 5 is do as much as you can in javascript so you can deliver the very best applications, and to interface with the development of your apps with just one technology - javascript.
I say: Be javascript-centric in your development of HTML5 apps and even websites.
If you want to stick with CSS, XHMTL, HTML, etc then the jsCentric approach is probably not for you. If you want to learn javascript or love javascript or are coming from a coding background then the jsCentric way is probably for you.
But just read on and hope you enjoy my series of HTML 5 tutorials at jsCentric.
Tutorial
So let’s do a good, old hello world app.
First thing is that we need a directory structure:
www -> index.html
-> js -> start.js
Open up index.html in your editor (I like notepad++ for windows and textmate for mac) and type:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.6.1/jquery.min.js"
type="text/javascript">
</script>
</head>
<body id="stage">
<script
src="js/start.js"
type="text/javascript">
</script>
</body>
Note above how we source the jquery library from google servers in the cloud. Pretty cool!
Now create a new file in your js directory and type:
// Setup the hello element
$('<div/>',{id: 'hello'}).appendTo('#stage');
//See note(1)
//Style the hello element
$('#hello').css({
background:'red',
top:'10px',
left:'10px',
width:'150px',
height:'50px',
color:'white',
fontSize:'12px',
textAlign:'center',
lineHeight:'4em'
});
//See note(2)
//Add event listener to the hello element
$('#hello').bind('click',
function(){
$('#hello').css({
background:'dodgerblue'
});
$('#hello').text('Hello World');
}
);
//See note(3)
//Activate the hello element
$('#hello').text('Click Me');
What we did?
- We inserted a div called ‘hello’ into the body of the document which we called ‘stage’.
- We added some style to ‘hello’ to give a red background, position, width, height and text color.
- We bound a function to the ‘hello’ element that will be triggered when we click on it. The function will change the background to blue and change the text.
Now let’s see it in action
Conclusions
This is a very simple tutorial but it’s important to take notice of the approach.
- Use div elements as much as possible. Keep it simple for yourself.
- Use javascript as much as possible. Javascript is alot more powerful than css or html. You are going to need it to develop real applications. So use it as much as possible so you really get to know it.
- Notice the general scaffold that I built the app around: setup elements, style elements, add event listeners and activate element. This scaffold helps organise and structure our javascript. I will develop this scaffold more as we proceed.
You should also take note of how javascript sees functions. Javascript can see functions as variables. For example:
var myFunction = function() {
alert('hello u')
};
This is a very cool and powerful feature of javascript that is not present in alot of languages. We used this feature above to pass a function as an argument to the bind function above. Sounds confusing, but in js you can pass a function as an argument to another function!
I will develop my ideas further in my next tutorials.
Webkit Transitions
We should really build up to Webkit transitions further on in this series but they’re great fun. Good transitions are critical to developing a beautiful app. I would nearly say as important as graphic design.
Remember what I said about the scaffolding of the application. We setup elements, style elements, add event listeners to elements and then activate them.
Because transitions are really about making your app look good they fall into the style step. They also fall into the event listener step and/or activate step because they are always triggered by some event - a user click, a user touch or the web page loading.
So let’s do a simple webkit transition. Update the css style part start.js file from the last tutorial so it looks like this:
// Setup the hello element
$('<div/>',{id: 'hello'}).appendTo('#stage');
//Style the hello element
$('#hello').css({
background:'red',
top:'10px',
left:'10px',
width:'150px',
height:'50px',
color:'white',
webkitTransition:'all 2000ms linear'
fontSize:'12px',
textAlign:'center',
lineHeight:'4em'
});
//See note(1)
//Add event listener to the hello element
$('#hello').bind('click',
function(){
$('#hello').css({
background:'dodgerblue',
webkitTranslate:'transform(200px, 0px)'
});
$('#hello').text('Hello World');
});
//See note(2)
//Activate the hello element
$('#hello').text('Click Me');
What we did?
- We configured the style of the transition. ‘all 2000ms linear’ means that any transition (ie change of state) call on the element will give the element 2 seconds to change state from state A to state B at a steady linear rate.
- When the element is clicked it will now move 200 pixels to the left and change color from red to blue at a linear rate over a 2 second period.
Now let’s see it in action:
And finally here is a nice little twist. Just amend the event listener bind call as follows:
//Add event listener to the hello element
$('#hello').bind('click', function(){
$('#hello').css({
background:'dodgerblue',
webkitTranslate:'transform(200px, 0px) rotate3d(1,0,0,180deg)'
});
Now let’s run the code:
We just did a 180deg flip in 3d space. See how we can see the ‘Hello World’ lettering as if we were standing behind the div.
And that’s just a simple example.
A perspective
I’ve said it before and I’ll keep saying it. The basic scaffold for an app is:
- Set up elements/divs
- Style elements/divs
- Add event listener to elements/divs
- Activate elements/divs
Well it’s not strictly that simple. The above is about half the story. The scaffold I describe above is really for a scene in an app. A scene might also be called a card or page in other parlance. So it’s important I talk about my take on the overall architecture of an app. Let’s take a step back.
An app is a container for one to many scenes. Scenes are containers for one to many elements which may be buttons, forms, images, other containers, game objects etc. My basic approach to is to load up all scenes at launch, hide them and then show them as required using event listeners. That’s it. That’s the big idea. It’s very simple.
Also we’ll build out the scene scaffolding a little more. The following scaffolding will really cover us off for alot of eventualities:
- Set up elements/divs
- Style elements/divs
- Add event listener to elements/divs
- Activate elements/divs
- Deactivate elements/divs
- Remove event listeners from elements/divs
- Clear scene
I am simply saying above that a scene should have the ability to set itself up as well as shut itself down gracefully.
I have developed a little opensource library so the application can manage scenes and so scenes are properly encapsulated in a convenient scaffolding. I call it mofo and it is available here at github. mofo is heavily influenced by the Palm/HP Mojo framework. However it is alot more flexible, portable and simple. Whilst it is easy to understand it is not feature rich but that’s ok because alot of Palm/HP’s mojo framework contains js handles to native Palm/HP device specific features. Therefore it is not a portable framework. Plus Mojo is proprietary whilst mofo is completely open source.
I have used mofo to port my game to the Palm Pre, Palm Pixi, iPhone, Android, HP Touchpad (simulator) and iPad (simulator).
So let’s see mofo in action. You’ll need to download it first.
Let’s look at index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta
name="viewport"
content="width=320; user-scalable=no"
/>
<meta
http-equiv="Content-type"
content="text/html; charset=utf-8"
>
<title>App Name</title>
<script
type="text/javascript"
charset="utf-8"
src="js/phonegap.js">
</script>
<script type="text/javascript">
touchMove = function(event) {
event.preventDefault();
}
touchStart = function(event) {
event.preventDefault();
}
touchEnd = function(event) {
event.preventDefault();
}
</script>
<script
type="text/javascript"
src="js/prototype.js">
</script>
<link
href="stylesheets/testgame.css"
media="screen"
rel="stylesheet"
type="text/css"
/>
</head>
<body
id="stage"
ontouchmove="touchMove(event)">
<script
type="text/javascript"
src="js/start.js">
</script>
</body>
</html>
