DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact [email protected].

JavaScript MVC 1.2 - Why AngularJS beats the **** out of knockoutJS

This is part 2 of my
short series about JavaScript MVC Frameworks. It will explain why of all the existing frameworks, you should really focus on AngularJS.

Choosing the right JS MVC Framework

If you're just
starting with JavaScript MVC-Frameworks you'll feel the need to use "the
right tool" so that the time use is well invested. This post should help
you choose AngularJS - and only AngularJS - and feel good about it.

The Really Relevant Criteria

Let's skip the
religious parts of the discussion for now and decide what should determine the
ideal solution:

We want a solution that's
simple enough to start with

…but that still works when
things get complex as the customers wishes accumulate

We want a solution that has
wide adoption - thereby ensuring thousands of examples and answers online,
and ensuring that we'll find employees and consultants that can help us
when we need help

We want a solution that will
still exist and be popular and updated - in five years' time

We want a solution that is so
widespread, that many helpers/plugins exist

…ideally it would be
something of an industry standard

…and work well with other
industry standards like jQuery etc.

…and has reached the critical
mass of followers that is hard to beat

Some not so important criteria

Microsoft promoted it for a
while, so it must be good

It support IE6

I know a guy that likes it

I once heard that Google is
as evil as Microsoft…

I like the syntax of
something

It supports feature x a bit
better than the other one

What are the Options?

Basically, there are more than 25 JavaScript MVC frameworks. The most popular by far is AngularJS, with emberJS and a few others still developing strongly. The most popular in the Microsoft universe of communication is knockoutJS. We'll focus on these two, and I'll tell you more about it later.

Let's look at the score

knockoutJS

AngularJS

Simple to
start with

Yes

Yes

Scales to complex
solutions

No (see note)

Yes

Wide adoption

MS only

Yes

Contributions

Good

Great

General Interest,
searches in Google (to predict 5 years)

Low

High

Very widespread,
lots of 3rd-party plugins

No

Yes

Almost an industry
standard

No

Yes

Well integrated
with other standards

Yes

Yes

Critical mass

No

Yes

In case you have
some doubts about my answers above, here an additional note: knockoutJS is
basically just a templating engine. It doesn't even provide a real view
management, let alone route management or many other things you would need in
complex environments.The only reason most Microsofties know about knockoutJS is because it was made by an MS employee and promoted at many MS events.

Just for comparison: this is what knockout calls itself: Knockout is a JavaScript library that helps you to create rich,
responsive display and editor user interfaces with a clean underlying
data model.

Am I just promoting AngularJS because I'm biased?

Absolutely not! We (2sic) started with knockoutJS because we heard of it as Microsoft-events. We actually created some very complex solutions using knockoutJS - including a very powerfull help/faq system. But with time, we had to admit that it's very limited. Then AngularJS documentation finally got good. It was time for us to switch.

What about KendoUI or EmberJS?

Parts of KendoUI
were made open source by telerik - I guess to stay in the market. I believe
they are doing an amazing job, and they finally changed their communication to
be less Microsoft-focused. So in general, I do believe it has lots of potential
since it's a very good product, and it's great that it can be integrated into
AngularJS. But in terms of industry-wide-adoption it's too far behind. So if
you like it, use it as an AngularJS add-on.

EmberJS is also
gathering momentum - but nothing compared to AngularJS. I'm convinced it's
great - but Angulars Head-start is amazing. Since I have to focus my energies,
it's not an option.

And some Google-Trends

As you can see -
very, very clear.

The clear winner: AngularJS

You may have other
opinions based on specific needs - that's great. My focus is on making a living
based on my work - and this requires a clear future-focused strategy. The same
logic that made me chose DNN in 2003 - namely the core question of "what
will make it" also defines AngularJS as the one and only clear answer. So
even if another framework has some technical superiority - the sheer mass of
Angular-believers will ensure that this will be corrected.

Why not learn both knockoutJS and AngularJS?

This question popped
up once after a blog I wrote - and the answer again is simple if you look at
the big picture:

If you are working only by
yourself and you're good with programming, then your brain can easily
handle multiple tools and you may even feel joy in mastering diverse tools
and technologies. So you would do this for the heck-of it, not for
strategic reasons - go ahead.

If you are budget and success
focused, and need to work in a team, then multiple technologies mean that
every team member has to spend time learning each technology. Each member
will waste time making mistakes with each technology. You will also need
to standardize various ways to handle the same problem (based on
combinations of technologies already in use in a specific project). And
you will need to document a lot of things, because of these many toys in
use…

…which is simply not cost
effective, and will also cause lots of problems in the future, when you
finally decide to focus on one system, but still have lots of hybrid
solutions out there which you must maintain.

Next steps

In the next parts of
this series we we'll look into

What is it and why you need
it (done)

Comparing the currently most popular
frameworks AngularJS and knockoutJS (done)

A simple example how to use
such a framework

The entire setup with data-delivery from the server - ideally without server code

Discovering some sample Apps
for you to adapt to your needs

With love from Switzerland,
Daniel

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in
Switzerland and Liechtenstein, an 20-head web specialist with over 600
DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.

@Brad: I know what you mean. It's just that most developers do their baby-steps with 2-way data-binding, and then try to build on that. And on the other hand if you use angular for 2-way data-binding, there is no more reason to use knockout.

@Tony: Actually that's not quite correct. KendoUI has a core MVVM engine which in many ways would compete against Angular. If you mainly use Kendo, it's not really clear why you would add Angular - see for example http://docs.telerik.com/kendo-ui/framework/mvvm/overview

Developers/designers who choose KendoUI choose it for its UI widgets, not for the MVVM engine. The engine is like a bonus which comes with the package. AngularJS plugs the engine's limitations and holes.

Great article. We switched from Knockout to Angular about a year ago and haven't looked back since. We spend way less time custom coding like we did in knockout, and more time reviewing different directives to piece together the final product. Knockout is that custom CMS you loved that allowed you to do everything by hand but took ages to get anything done. Angular is more like DNN where you take on the role of more of an integrator. Not saying Angular is so easy you don't need to know how to be a developer, just stating it helps speed the process along greatly once you are over the learning curve.

Yes, Fragmentation will exist within the AngularJS community when 2.0 launches.Not everyone will be able to immediately move over to 2.0 and it will take time before 3rd party controls get ported.I hope it's worth it when it gets here, but large projects are not likely going to be able to port over to 2.0, at least not without a major effort. So, Angular 1.3 apps will be around for years to come.

& @Brad Bamford: I agree. We've all had similar experiences: if there is a real, relevant breaking change - there will be a long time of parallel running systems. I even know a web agency that still develops using classic ASP. I shudder every time I see it...

+ AngularJS 2 won't run on current browsers (http://angularjs.blogspot.ch/2014/03/angular-20.html). So basically it won't catch on for a while.

@JohnI don't know about the front-end of evoq 8 - but I did hear the knockout rumor.

Will DNN focus on knockout? Here's my guess: up until a few month ago, the entire microsoft-world tried to ignore the "dark-side" believing that it can be done in an MS-style. Knockout was heavily preached at all MS events while AngularJS was "ignored". So much of the MS-world focused on knockout because it does data-binding. And to be honest, we (2sic) too went that way for about a year - till we realized that data-binding is only a subset of the problems - and knockout doesn't have a solution for all the other problems.

So my guess is that the current UI was started 1-2 years ago - when MS was still preaching knockout. Is it final? about as final as anything online - so not final at all :).

We (2sic) created some very complex solutions in knockout and for a long time believed it would scale sufficiently. But in hindsight (always easy) it turns out we spent about half of our time inventing solutions for problems that AngularJS already solves :). My guess is that's the learning curve every organization goes through.

Interesting. Angular has certainly taken off hugely and is a very impressive tool. However, I would be wary of jumping on the bandwagon just because everyone else has. It's a human thing. See this: http://eisenbergeffect.bluespire.com/leaving-angular/

Knockout is a small library built for a specific need. I'd happily use it in a small project. Something huge and complex is a different beast which would require a different tool. I wouldn't try and colour a wall with a crayon.

@everybody please keep in mind that this post is from 2014, as is the link posted by gus about .../leaving-angular/ - so this is over 2 years old.

@gus the link you posted http://eisenbergeffect.bluespire.com/leaving-angular/ shows that Durandal (another JS framework) decided to do it's own thing and not refactor itself away (and become angular 2) in 2014. I believe from his point of view and for what the Durandal JS framework is trying to provide (basically knockoutJS++) this is a good idea, akin to continue creating bicycles instead of moving on to building motorcycles. Keep it simple for simple use cases.

And I do agree that simpler use cases can often be handled by simpler tools - and are often the easier way to get started.

So why do I still promote Angular - even for simple use cases? The reasoning is that we have limited learning/know-how resources, and managing multiple tools solving the same issues adds a burden to both individuals and organizations. Because of this I would still recommend people to try to seek a comprehensive tool and stick to that, instead of trying to juggle multiple tools and switching between them. Just my 2cents :)

These are times of huge transition. For now I am really loathe to throw myself into Angular 2. I guess because some time back when I wanted to get into it the docs were awful and I ended up giving it a miss. Ever since I've been looking for something else.

Aurelia looks really nice but I can't help but wonder why I should have to write piles of front end code as well as piles of back end code. And then there is that monkey on my back that keeps asking me; "do you really want to get heavily into javascript?" and "should you really have to?".

Just the other day I came across this: https://www.dotvvm.com/. Now here is something I can use. In short, it's a framework that does all the front end js for you using Knockout. All you have to do is build view models and markup files. All the binding and js is handled for you. It's very neat. Am just putting together a simple example app to get into it and so far the experience has been a joy.

@Tony As you are guessing things are always a bit more complex. So the short answer is: yes, we will migrate to Angular2. The longer answer is that large solutions (like 2sxc) have 2 large challenges 1) many dependencies like formly or angular-translate aren't migrated yet and 2) large solutions are much harder to migrate.

So our path is: first create smaller, low-risk solutions for customers based on angular 2 and provide an angular2 API for 2sxc apps. At the same time, refactor 2sxc to using Components which were back-introduced into angular 1.5, making us better prepared for the switch. Then we'll probably switch - timeline probably ca. 12 months.

But: at the same time we want to support developers who want to create 2sxc-apps using any of these techs - incl. React/Flux, Angular2, Aurelia etc. So at the 2sxc-app level, we want to be framework agnostic, the core issue is that we need people who help create the client side demos. So it's ongoing. What's your preference? Want to take over a client-side framework implementation?

@Gus Beare I don't know why I got a comment notification about your 11/15 comment today. I recommend you listen to this podcast: http://dotnetrocks.com/?show=1366. Ward Bell talks about his team building the docs for Angular 2. One interesting point he mentioned is that the examples in the docs use live code. This means if there's a new version of Angular2 with breaking changes and it breaks an example, the example won't run and someone will be notified. The docs are pretty good. They have an example on how to get started using Visual Studio 2015. A very useful one which I couldn't find anywhere else. So don't judge Angular 2 docs by Angular 1 docs. EVERYTHING is different about Angular 2, including the docs.

I am trying to force myself to learn and like Angular 2. As someone who doesn't know Angular 1, there's so much to learn. I am not particularly happy that I have to learn all the tools and dependencies that go into using Angular 2. Plus learning Typescript. It's a big jump from using plain vanilla JS and jQuery.

Personally I don't care about NG2. I can do SPA apps with some JS. I use DevExpress MVC controls and I create awesome SPA apps with them with even little Javascript in them. They have rich client API and their controls do all the heavy lifting and do inplace updates with Ajax. NG2 adds nothing to my apps. I am learning ng2 because employers expect developers who do front end development to know it. So I have to compete with other developers who know ng1 or ng2. I don't have my own development shop where I can use whatever I like. It's the same reason I don't use Aurelia and any less popular JS frameworks. They are not used at companies. It's Angular or React. They don't care about other frameworks regardless of what I personally prefer. I have to follow the herd and the current trend. I don't like this but that's life.

Content Layout

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.