Angular, React and what Google and Facebook did not tell us

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).

But here comes a bold statement: We web developers have no idea how to build applications. We know how to construct websites that communicate with APIs, register users, work with sessions, send emails and display pages and tons of other valuable stuff but we have no clue how real time applications like desktop and native mobile apps. We do know buttons and forms and a bit of JavaScript, maybe a ton of JavaScript, but not much more. When it comes to desktop apps it’s a whole another universe!

The truth is

You don’t need Angular, React or another library to build a great and complex SPA.

Anyone can build a relatively big webapp with a simple library like jQuery or even without jQuery if they know their way around with JavaScript.

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.

MVVM Pros:

  • 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

MVVM Cons:

  • 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
  • Dataflow problems (Ever heard of Flux or Redux? The guys there are actually trying to solve problems that existed in MVVM long before MVVM was ported into the JavaScript world)
  • 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.

MVP Pros:

  • Write logic for how your app works
  • Write logic for how displaying your data works
  • Write logic for events
  • Use plain JavaScript and jQuery (use jQuery only if you feel like it). No need to learn a new API.
  • 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)

MVP Cons:

  • 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.

Why MVP?

Long story short I turned my sight on MVP because of a friend of mine who is already 20+ years into desktop programming.

 

Demo

the SPA live demo (using only html and JS, so weeks, dishes and children won’t change)

Git repo

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.

  • Johnny Driesen

    Hi Yavor,

    3 words…
    Cool, cool, cool !
    A really nice, neat and clean application !
    All written in less than 350 , very understandable and maintainable lines of code.
    Wow !

    Keep on doing the good work, and have a talk with your boss 🙂

    Now, a little word about using frameworks. (great article, btw …)

    I do not 100% agree with your line:
    <>

    It’s all about the word ‘complex’…
    Currently, I’m working on an “multilingual, apoointment / reservation system for a chain of wellness studios”.
    “Complex business logic ?” … No… not at all…
    “A lot of business logic ?” … Yeah … hell yeah ….
    The database has around 70 tables…

    And that’s the moment I’m happy I’m using a framework…

    Regards,
    Johnny Driesen (via InsiderClub)

    • developermode

      Hey Johnny,
      thanks for reading and replying! Your comments are very encouraging and I will take them to heart.

      That app you talk of seems interesting, mind sharing more about it?

      On the line/word you don’t like: Complexity can be managed in MVP with *presenters* for each of your app’s *views*, also advanced business logic will be preferably abstracted out of MVP trough services (js objects) who provide the needed logical checks and estimations. Example services could calculate prices, filter results etc.

      I also read you were happier to use Angular 1.5… I’d expect that since 2 is a brand new rewrite and pretty much only the brand name is the same. Older technologies tend to be more polished. Maybe with all the A2 hype others like me were on the wrong track and it’s just not useful yet to have A2 in a project.

      P.S. Please do tell more about your app if possible!

      • Johnny

        Hi Yavor,

        If evrt went well, you should have received an email with some more details about the APP I’m working on.

        Grtz,
        Johnny

        • developermode

          Hi Johnny, thanks for stopping by!

          I responded by email 🙂

  • Pingback: Why not use jQuery for your SPA-s – Developer Mode()