We have all worked on Javascript applications that have been written using any number of the latest frameworks in the last few years. Whether it is Angular, Backbone, or jQuery. We have all encountered the mess seems to naturally form as the app grows in complexity. Until one day adding a new feature is a massive uphill battle. There is another force at play at well. We all want to use the latest framework so we can put it on our CV but that would constitute a complete rewrite as most of our app is just API calls to the previous framework. So the rewrite comes and goes and a few years later we find ourselves in the same position. How can we change this cycle? How can we create an app that is timeless and able to change presentation frameworks without being rewritten? There is a way!
If we write our apps in such a way that third-party frameworks are just a “plugin” as Uncle Bob puts it, we can simply swap out the framework and use the latest one. But who has seen such a thing? No production system I have ever seen demonstrates such qualities, less any open source code. What does it look like then if there isn’t an example I can point you to? Well I’m going to write one.
I am going to write the standard Todo app example in such a way that it will not depend directly on any framework. I will then demonstrate how I go about adding the popular UI frameworks such as Backbone, Angular and jQuery; blogging the entire way about my thoughts and changes in the design. At the end we will have an example of how to structure our code to prevent massive rewrites.