I changed my mind on the subject see: Why not use jQuery for your SPA-s
I started this post as a forum post on a member-only site but I’d like to share it with you too so here it is, posted on my blog!
The vibe of the forum thread was something like: “Angular2 is hard to learn because it has a ton of things in it – components, data flow, services, TypeScript etc.” And here are some thoughts about it…
AngularJS is not meant to be used by you
It’s meant to be used by Google developers.
React is not meant to be used by you
It’s meant to be used by Facebook developers.
Don’t get me wrong. Angular, React and a bunch of other libraries are great. But those are not the only way to build single page applications (SPAs).
The truth is
You don’t need Angular, React or another library to build a great and complex SPA.
Here is some proof:
The thing is, as I said before, that we web developers have no idea how apps are built in the desktop world.
I shot the video on the client’s demo website. You can find a demo and the code below. Since the client’s company shall remain unknown I have modified the code a little to show the still functioning app without the need to have it running on his host.
But how are desktop/mobile apps built?
Apps are built in two main ways: Using the MVVM (Model View ViewModel) or using the MVP (Model View Presenter) architecture.
Those two approaches are perfectly valid and both of them are used to build applications today in Windows, Android, iOS or whatever OS you can point your finger to. The thing is MVVM and MVP are different philosophies in their code and all current libraries being marketed so hard only display at most 50% of the possible solutions to building SPAs.
MVVM is based on the idea that we bind our data a.k.a model (think simple JSON data) to our view think html. And when the data changes, the view will be changed magically to display the change in the data without interaction on our part. This sounds awesome. It’s called declarative approach since we only declare what end result we expect (<li ng-repeat=”…”></li> will display a repeating li element based on the data bound to it). It all happens magically.
- You don’t have to go render your data by writing code that does rendering. You only declare the expected result
- Someone else has writtien the code that does the databinding for you
- You have to learn a new architecture (MVVM)
- You have to learn the framework/librarie’s API
- You might have to learn TypeScript and/or ECMAScript6
- Applications in MVVM are complex and hard to design
- The biggest con of them all: You (and me) are being presented with MVVM like it’s the only sane option of writing top-notch-cutting-edge-state-of-the-art SPAs and this is simply not true.
MVP consists of Models, Views and Presenters. The Model is your data in JSON format but here the Presenter does the hard work. It is the one to operate on the view (change it’s DOM elements, listen for click events from it and do stuff when the events occur). The View is a simple HTML template.
- Write logic for how your app works
- Write logic for how displaying your data works
- Write logic for events
- Simple architecture similar to MVC (and you probably already know about MVC)
- Possible hierarchical structure if there is too much to handle (much like HMVC)
- You have to write all the code yourself
- You have to learn a new architecture, be it similar to other things like MVC it’s still something to spend a few hours on.
- Imperative approach – you write code like you always did telling things where and when to happen.
Long story short I turned my sight on MVP because of a friend of mine who is already 20+ years into desktop programming.
the SPA live demo (using only html and JS, so weeks, dishes and children won’t change)
Here is the SPA’s git repository so you can take a look at the code
P.S. I intend to possibly improve the code and shoot some videos and write some posts on how it’s actually done and speak about the thought process behind the code.