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
