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