Building Isomorphic JavaScript Apps

Chapter 7. Architecting Our Application

Jason Strimpel

If you have been working as a frontend developer for long enough, you probably remember a time before the proliferation of the MV* libraries that now both complicate and improve web development. If you have been in the industry even longer, you can probably recall the days before jQuery. For me, those memories are colored by the frustration of attempting to debug a 4,000-line JavaScript file that was a comprised of miscellaneous functions and “classes,” which made references to other 4,000-line JavaScript files. Even if you cannot remember those days of yore, you have probably encountered similar difficult-to-follow, frustrating code.

Most often, the source of the frustration is a lack of form and structure, the building blocks of a good architecture. As James Coplien and Gertrud Bjørnvig put it in Lean Architecture: For Agile Software Development (Wiley), we can “think of form as being the essential shape or arrangement of a thing without regard to what it is made of, and of structure as the reification of form.” In our case an example of form is an Application class that accepts route definitions. An example of structure is the ES6 module format that uses export and import.

Another overly utilized component of architecture is abstraction. The key to properly utilizing abstraction is to use it only when necessary, because it hides details, which makes code more difficult to follow and read. Otherwise, you end up with numerous ...