Architecture Design Simplified

The goal of applications are simple: Modify data, display data.

I dunno why applications are so hard to build for such simple purpose. We have a lot of tools here, libraries over there, hype everywhere. Then talk about "the right tool for the right job". I dunno about you people, we're just fiddling numbers and strings. Keep it simple!

The Basics

Anyways, to start off, applications are just software that fiddle data around and display the data. To visualize, you just have 2 very important layers - the data and the UI. And if you think about it, software is just a never ending cycle of "modify and display".

So we have here is Data and User Interface. I'm not specific, but I'll just talk in terms of the web. Data could be some storage library, but I prefer keeping them simple and use a combination of arrays and event emitters (like Reflux). The UI can be in plain HTML+CSS, or some templating language (Mustache or Jade) and CSS dialect (LESS, SASS).

 ________              ________________
|////////|  display   |////////////////|
|//Data//| ---------> |/User Interface/|
|////////|            |////////////////|
    ^                         |
    '-------------------------'
             modify

To save your ass the problem of writing all of this, you'd need a rendering library to turn the data into the necessary code that displays it in the UI. It could be a complete rendering library (like Ractive), or a mashup of templating (Mustache) and some event emitter for listening to data (Reflux) and DOM operations library (jQuery).

 ________        _______________        ________________
|////////|      |               |      |////////////////|
|//Data//| ---> | Rendering lib | ---> |/User Interface/|
|////////|      |_______________|      |////////////////|
    ^                                           |
    '-------------------------------------------'
                      modify

Now, you'd need to be able to modify the data so you turn to libraries again for capturing interaction and translate it to modification. Again, you can look for a complete solution (like Ractive) or probably a hacked up bunch of libs for DOM interaction (jQuery). This will then turn interaction to a bunch of logic that fiddles with the data.

 ________        _______________        ________________
|////////|      |               |      |////////////////|
|//Data//| ---> | Rendering lib | ---> |/User Interface/|
|////////|      |_______________|      |////////////////|
    ^            _____________________         |
    |           |                     |        |
    '---------- | Interaction capture |--------'
                |_____________________|

Then that's it! That's a simple application architecture right there. It's close to traditional MVC, which is the granddaddy of architectures. You only need like a handful of libraries to aid you and a few native APIs, and you're in business.

So yeah, what's the deal with all this library nonsense when you can home-bake your own architecture in as simple as 1-2-3? Libraries, sure they provide some abstraction, but in the long run, abstraction becomes your enemy. So keep things simple.