What to build?
This is always a tough thing to figure out. It seems like every time I want to try out a new framework or library, I struggle with discovering what I can build with it that will help gain the knowledge and take the least amount of time and effort. At the rate new technology comes out these days, you have to ration your time on the bleeding edge stuff or risk losing a lot of time to a fad.
I learn best trial by fire, so I decided that I couldn't build anything that closely resembles existing projects. The temptation to skip past important lessons for a quick result is too great. Sometimes, it is better to learn things the hard way.
I needed something that was simple enough to understand within a few minutes of reading it, but that was complex enough to discover pain points during development. Without any ideas, I decided to start with figuring out my requirements and go from there.
First and foremost, the application needs to be a Single Page Application. Using a server side renderer to do the more difficult template rendering would defeat the purpose of the exercise. I use this technique a lot for handling complicated cases for UIs. It takes the workload off of the browser and lends a lot of utility to problem solving, but it isn't appropriate for this project.
Building a backend to try out different frontends seems like a lot of extra work. A combination of laziness and not wanting a surprise bill from my hosting company gave me the second requirement: No server apis.
Perhaps the most important requirement is the third one. The application has to solve a real world problem. The problem doesn't need to be something that is solved a whole lot, but it must be real.
I was pretty stumped until I ordered a pizza.
There are a lot of opportunities for interaction when ordering a pizza. You have to choose how much cheese, the size of the pizza, whether or not it is a specialty pizza, and then if not, what toppings you want on it. It is small enough to be written with a new framework in a week or less, but large enough to get a true feeling for how things are done.
From a purely technical point of view, a pizza customization page requires model binding, nested views, a variety of different form controls, and some event handling. This should be enough to know what advantages or otherwise disadvantages it has.
I'm currently working an example of a pizza ordering page finished in KnockoutJS and am nearly finished. Stay tuned for more on that!