Since HTML5 is the hot thing these days, I figured I'd better get some hands on practice. However, let me first explain why I think HTML5 is a key technology. Browser-based technology is becoming more and more pervasive. We spend a significant portion of our time each day in browsers whether we are on our desktop, laptop, tablet or phone. However, there is still a fairly stark contrast between a browser-based application and a true native or 'rich' application. Browser applications typically have limitations such as only working when you are connected, having minimal video and graphics rendering support and also limited data storage options. Flash and other native additions to browsers have been built to try and compensate for these shortcomings but they are non-standard and usually closed systems that only cover a subset of browsers or operating systems. Oh yeah, and Steve Jobs appears to not like Flash...
Okay, you understand - browsers are the limiting factor today. However, the HTML5 specification changes all of that. Once browsers have full support for the various HTML5 components, you will be able to manage sql-like data storage, render complicated graphics (SVG, 2D / 3D drawing, and videos), operate off-line, and even provide context based information with geo-location. Browsers are quickly going to become our client application platforms.
So what do we need all this cloud stuff for then? Well, I agree that some of the traditional workload is going to shift from server to client given the new browser capabilities. However, I think there is also going to be a drastic shift in application development away from the 'native' approach. What's on your desktop today is going to be running in your browser tomorrow. Also, HTML5 isn't going to be the only driver in this movement. Native mobile apps are still very popular (given the limted computing power) and they are all going to depending on that same server infrastructure. In other words, I think the server side infrastructure supporting all these new applications is going to grow. And it's going to grow by a lot.
This is where the cloud and specifically Platform as a Service (PaaS) comes in. The cloud provides utility like resources on demand - a great way to quickly get all those servers you need. A Platform as a Service builds on that capability and further abstracts you from a lot of the traditional operational management you have to do. While far from a standardized service, a really good Platform as a Service should make you a really efficient at both developing and getting that code to production.
Have I convinced you? Well then let's get cookin! Before you get into all the whiz bang features of HTML5, is starts with the basics - markup and hosting. Since it's 2011, I'm going to use a PaaS for my hosting and even though I'm going to use all this newfangled markup for HTML5, I still need it to work in IE{6,7,8} and look decent. This leads me to HTML5 Boilerplate and OpenShift. HTML5 Boilerplate is going to make my next-gen development work in the browsers of today. OpenShift is going to be my PaaS. I'll use the OpenShift PHP runtime for this example but this blog is generally applicable to all the OpenShift runtimes (Perl, Ruby, Python, etc).
Step 1. Register on OpenShift
A free account on OpenShift will provide you with a free runtime environment for this demo. First, signup for a new account. You'll need to validate your email address after registering - just click the link in the email you get. Once your account is validated and you've gotten the note that you've been approved, you're off to the races - or more accurately, Step 2.
Step 2. Create your domain
A domain will be used in your url. I wanted http://<app>-nextgen.rhcloud.com so I ran:
rhc-create-domain -n nextgen -l <my-email>
Step 3. Create your application
I'll use PHP for this example and I wanted my URL to be http://html5-nextgen.rhcloud.com so I ran:
rhc-create-app -a html5 -t php-5.3
Step 4. Merge in HTML5 Boilerplate
Now I've got a html5 directory in my current directory. Time to pull in HTML5 Boilerplate. In short, this project has all the fanciness to get you off to the races with HTML5 included some chance of supporting older browsers as well. But... I want to pull in the latest from HTML5 Boilerplate into my 'php' directory which OpenShift sets up. Time for some git magic:
# Go into your app directory - mine is named 'html5'
cd html5
# Now get the HTML5 Boilerplate content
git remote add boilerplate git://github.com/paulirish/html5-boilerplate.git
git fetch boilerplate
git read-tree --prefix=php/ -u boilerplate/master
git commit -a -m "Merging in HTML5 Boilerplate"
Step 5. Switch over index.php
First, let's switch over to use the index.php file so we can use a php function for the example.
cd php
cp index.html index.php
git rm index.html
git commit -a -m "Switching over to use index.php"
Now, open up index.php and change the section after '<div id="main" role="main">' to add '<?php phpinfo(); ?>':
<div id="main" role="main">
<?php phpinfo(); ?>
</div>
Don't forget to commit:
git commit -a -m "Added some fancy php info"
Step 6. Publish
Now, let's see how easy publishing changes can be.
git push
Yep, that's it - open your browser to your URL. Not convinced it's working? Highlight something. Yep, hot pink :) You are officially a OpenShift / HTML5 Boilerplate user now.
Experiment some on your own while I write my next blog post. Next one will be about creating something a little more involved with this base setup.
Referenced Projects
No comments:
Post a Comment