Breaking It Down #1: Organizing Code with Model, View, and Octupus!

[YvesMuyaBenda]

I am using the study of @nelsonic implementation of the Elm architecture in Javascript to motiviate myself to back-fill, extend, organize, and apply knowledge about constructing GUIs in the browser environment using Javascript.

First question in looking at the material for me is: if the Elm architecture with its update, model, view organization is the answer, then what is the question? To that end, the Udacity course on patterns of organising the code for GUI javascript apps, provided much needed background context: Javascript Design Patterens. The course starts with restructuring a naive sphaghetti-code implementation of a simple app with a just-using-Javascript implementation/interpretation of model-view-controller, before looking at using Knockout.js. If someone has little time, then there is an excellent summary of the basic ideas/principles of code organisation with the video Universal Organizational Concepts.

Incidentally, just watching the videos means that a lot more dwyl tutorials make sense with a straight read through, which indicates that the material above is information I was very much needing to backfill. One of the basic mistakes beginner resources make along with the abscence of teaching specification and testing is there are no words about organization. Thus one of the primary benefits of learning Elm for a front-end developer might just be the benefits of working within its tight constraints as a way of disciplining the mind. About the only introductory Javascript book which discusses code organisation is Get Programming with Javascript which implements model-view-controller from scratch through chapters 14. 15. 16. Just watching the Udacity course means I can now get a lot more out of those chapters than my first glance-through many months ago!

Also Gordon Zhu's free course Practical Javascript teaches Javascript from the ground up using seperation of concerns. Too, if my memory serves me right Leo Verou in construcing a JS/HTML/CSS implementation of Conway's Game of Life also used proper structure from the beginning in the Pluralsight course Play by Play: HTML, CSS, and JavaScript with Lea Verou, starting out with data structures (model) in the console and later on adding HTML and CSS (view)!

[nelsonic]

@YvesMuyaBenda what were your findings from your knowledge quest? 😉

[YvesMuyaBenda]

@nelsonic Sincere apologies:, I have only just read your comment! Damn! I need to start writing stuff up from my knoweledge quests! Of course, I will make the writeups available. The main thing I was attempting to do in this issue, was to make the Elm Architecture tutorial more accesible by adding resources that fill in some of the background on Front End Architectures, like the MVC architecture that has its origins in Smalltalk OOP and Graphical User Interfaces. One of the biggest gaps in beginner JS materials is that not much conscious thought is given to the archiecture of one's app, but some architecture has to exist, there has to be some division of work! I am sorry for my severe delay in response!