Wohoo the Wallberry clock submodule is finished! The time zone stuff wasn’t actually terrible to write. Probably because I wasn’t doing anything super complicated, but I feel lucky all the same!
A Wild Design Pattern Appears!
If you’ve ever worked with a project using the MVC (Model View Controller) design pattern you’ll feel right at home writing a MagicMirror2 module. If you haven’t played with MVC before have no worries because the idea is gloriously simple, it just means our code is organized into three neat components:
The Model (AKA Data Model)
The Data Model contains the code that describes the data our module will be using.
For a more complex module you might have entire data object classes that live in their own files (like the authors of this weather module did). However, my clock module here is so simple that it’s not even worth separating my little time and city data objects from the Controller code.
The Controller is what implements the lion’s share of our app logic. It takes the Data Model objects, does whatever calculations need to be done on them, then hands the results off to the View to be displayed.
In our case the main module file (“WB-clock.js”, also displayed in the first screenshot up above) is our Controller. You can see how it’s responsible for assembling the city and timezone data objects and returning them for our View’s template:
The View is the code is responsible for constructing and displaying what the user sees.
MM2 includes the Nunjucks templating engine, so my View code is going to take the form of .njk template file. You’ll recognize the syntax immediately if you’ve ever written templates for a Django web server or used Jinja templates, but for the most part it just looks like fancy HTML:
Those {{ variable }} things are where the templating engine will put the data from the Controller, then the whole thing will be displayed to the user like you saw in the first screen shot!
MVC is such a popular design pattern (seriously, once you learn it you’ll see it EVERYWHERE in web development) because it helps us write much, MUCH more maintainable code.
Having our Controller separate from our View means that we can change our app’s logic WITHOUT having to touch the code that’s responsible for displaying it. This becomes especially useful when you’re working with a team of people; now your interface designer can write the CSS and template code at the same time another dev writes the logic code that will provide the data.
Also, just to give you nightmares, imagine being the person who comes in to re-theme or maintain a project where all of your View and Controller code is mixed together and all of the app’s HTML is constructed through a spaghetti bowl of various javascript if-statements and functions:
Yeah that’s not fun. MVC FTW.
Also I want to say I’m not dunking on the person who had to write the code above (for MM2′s default clock.js), it was written before MM2 had Nunjucks support and you gotta do what you gotta do wildwildwest.mp3.
I can’t decide if I’m going to work on the weather module next or clean things up a bit and port my CSS and font assets into my theme module. We’ll see :D
