I am starting out another HTML5 app called DayTrader. It is my first attempt using the canvas tag. It is a simple game to buy and sell stocks to make as much as you can. I will do another post when its ready and post everything on github.

For DayTrader, I am doing a different approach than I did with the Flashcard app.

The flashcard app I tried to be as MVC as possible:

All the HTML was put into index.html, even without any JS it looks like the flashcard app. All of the events in index.html call methods in controller.js. From there, controller.js modifies instances and updates the view in index.html. The controller here is the glue between the HTML and the objects. The objects here know nothing about what the HTML looks like or how to update it, controller does all of that.

DayTrader on the other-hand has a very simple index.html file. In fact, index.html doesn’t “know” anything about the DayTrader app.

In this case, controller.js is replaced with a simple init function to create object instances with an id reference of where to put itself. The main object (a Market) creates all of it’s HTML dynamically in the container it was initialized with.

Cons with this approach

• Breaks MVC and cuts out the ‘C’.
• Harder to test the layout since all HTML is dynamic

Pros

• Easier to embed on a page, just initialize and tell where to put itself, objects do the rest
• Easier to make multiple instances. With the flashcard app, if I wanted multiple instances on one page (for some reason) I would need to duplicate the HTML in index.html and update the controller to be aware. But this way the objects bring their own HTML.