SUMMARY: This is my first step in figuring out what HTML5 is, and figuring out how I will learn how to write a web app.

A couple weeks ago I came to the conclusion that it was time for me to make a big investment in my next development platform. It’s time to make some software!

The last two development platforms I’d familiarized myself with were Actionscript 2.0 (2007) and C# with XNA (2009). I haven’t looked much at integrated development environments since then. For my next wave, I want to have a decent web application framework. I figure that will be HTML5 plus Javascript.

It’s kind of a daunting preposition because, as with many things, there are almost zero simple yet architecturally-complete starting frameworks available. Explanatory documentation is also rare; usually it’s an alphabetical reference with ambiguously-worded text that gives no sense of the underlying logic and metaphor.

So here, in the Code Journal, I’m going to try to describe the process of building a rock-solid reference starting kit.

The Big Questions

If all were right with the world, I’d just be able to download a great package that had everything I needed in it, with a 3-page sheet explaining how it fit together. The kit would work as a single-page app to a multi-page app, with the supporting subsystems (database connections, rendering, core logic, etc) clearly delineated. A distinction would be made between setup, runtime logic, and shutdown code.

Since I have not yet found anything like this, I’ll start by making a list of technologies that I want:

• HTML5. This is, at minimum, a simple web page fragment loaded with the necessary elements. It is also the starting point for program execution, and it’s the host for both the layout (as base HTML/CSS) and interactivity through javascript.

• Back End. This is the part that lives on the web server that saves data with user management. There is some kind of web service or data connection mechanism that save data and return results back to the application.

Now, I’m going to make a few arbitrary choices:

• I’m going to stick with jQuery and jQuery UI for the javascript side of things. This is a pretty popular, widely-discussed library.

• HTML5 means that I’m supporting only the newest browsers, specifically Chrome. That is OK with me.

• On the back end, I’m going to use PHP. I don’t know anything about frameworks, but I do know something about WordPress thanks to recent client work. Therefore, I am going to try to use WordPress as my backend, developing a custom theme that implements my web app. This will help me leverage existing WordPress elements (posts, pages, etc) for presentation purposes.

<

p>Now, let me outline what I think a basic application needs to do:

1. It has a starting/initialization phase. Where does that go?
2. It has the ability to handle multiple user sessions, each with their own data.
3. It has the ability to allow multiple user access lists and group access lists
4. It can handle actions that span multiple pages
5. It can remember state during the session, and display this state no matter what screen you are on
6. It does not break if the user connection is lost, or the transaction isn’t completed
7. It can be easily backed-up, duplicated, and deployed
8. Each instance of the installed application is uniquely identified, and capable of reporting to a central monitoring program
9. It has an intelligent, no-fuss way of defining views,
10. There is a centralized way of setting options and retrieving their settings
11. There is a way to export/import data
12. There is real-time counting and timers available
13. It is possible to animate over time and frames
14. There is a way to support “modes” of operation
15. It can operate asynchronously or synchronously
16. It can handle asynchronous threads
17. There is dashboard support
18. Non-interactive batch processing is available
19. Memory usage checks and execution profiling is somehow doable
20. Secure

This is a pretty good starting list for a noob like me to have. I’ll resort it later. In the meantime, let me get the development environment set up.

Development Server

I could install a virtual machine version of CentOS and run my development from there, but I think I’ll just designate a domain as a development server at davidseah.net, install WordPress, and then slap a theme on it.

For development, I’ll use Dreamweaver and Coda as my editor, with Subversion used for source code management. I’ll have to set up project credentials for all of these.

• DAVIDSEAH.NET – Install WordPress on subdirectory. Install WPReset plugin, which clears the database so I can start from scratch. Make sure PHP Error logging is enabled and filtered.
• WORDPRESS – create development theme based on TwentyEleven, which is an HTML5 theme
• SUBVERSION – set up repo on repo server. Create local working directory for the WordPress theme content (this is where all app development will occur)
• DREAMWEAVER – create login credentials and local site setup, save settings for propagation to all Dreamweaver installations
• BROWSERS – look into available javascript debugging methodologies in browsers. Will need to be able to inspect program execution and state.
• DATABASE – Some way of inspecting the database LIVE will be necessary.

Next, I have to identify a few things:

• Startup Logic: where do I put it?
• Event Handling: Where do I put handlers?
• Debug Messages: Where can I see them in real-time?
• State Inspection: How can I see the current state of the database as it changes?

For a Test Application, here’s what we’ll start with:

• Test Prototype: A simple sortable ToDo list with multiple stages.

The next stage is wireframing the test prototype, to see what other issues fall out of it.