which JavaScript MV* Framework? Why I chose Durandal...
in the world of JavaScript dev, there are many many MV* frameworks to choose from, to help you build a good client side architecture.
TODOMVC is a site which helps you see how different MV* frameworks can be used to build the same application (a TODO list):
http://todomvc.com
Below are a few notes on why I recommended using the Durandal framework on a recent project.
The project is a complex real-time application involving fully configurable dashboards, with lots of plots and gauges.
Perhaps it may be of use to you ...
MV* frameworks considered:
We had time constraints, so only looked at these frameworks:
angularjs - https://angularjs.org/
emberjs - http://emberjs.com/
durandal - http://durandaljs.com/
Summary of findings:
angularjs:
Angular JS is incredibly popular. However, just because something is popular, does not mean it's always the best choice.
In particular, Angular JS:
- is a 'one stop shop' for pretty much everything, even 2-way binding and DOM wrapping
- seems to be best suited for simple SPAs, not complex apps
built with angular js:
https://builtwith.angularjs.org/
emberjs:
for me, emberjs was 90% great and 10% too fragile (example: minor HTML errors can cause obscure JavaScript errors that are difficult and time consuming to diagnose).
It seems to me that a year ago emberjs was looking really promising, but somehow did not fully take off? Particularly worrying is that the data layer is still in beta, which for serious production sites is just not an option ...
built with ember js:
http://emberjs.com/ember-users/
durandal:
In the end, we decided to use durandal for our complex app.
Main reasons:
built with durandal js:
http://durandaljs.com/showcase.html
Further Details:
Below is a table that provides further details.
It originally came from an Excel workbook - so hopefully you can still read it.
Details have been modified to protect confidentiality.
in the world of JavaScript dev, there are many many MV* frameworks to choose from, to help you build a good client side architecture.
TODOMVC is a site which helps you see how different MV* frameworks can be used to build the same application (a TODO list):
http://todomvc.com
Below are a few notes on why I recommended using the Durandal framework on a recent project.
The project is a complex real-time application involving fully configurable dashboards, with lots of plots and gauges.
Perhaps it may be of use to you ...
MV* frameworks considered:
We had time constraints, so only looked at these frameworks:
angularjs - https://angularjs.org/
emberjs - http://emberjs.com/
durandal - http://durandaljs.com/
Summary of findings:
angularjs:
Angular JS is incredibly popular. However, just because something is popular, does not mean it's always the best choice.
In particular, Angular JS:
- is a 'one stop shop' for pretty much everything, even 2-way binding and DOM wrapping
- seems to be best suited for simple SPAs, not complex apps
built with angular js:
https://builtwith.angularjs.org/
emberjs:
for me, emberjs was 90% great and 10% too fragile (example: minor HTML errors can cause obscure JavaScript errors that are difficult and time consuming to diagnose).
It seems to me that a year ago emberjs was looking really promising, but somehow did not fully take off? Particularly worrying is that the data layer is still in beta, which for serious production sites is just not an option ...
built with ember js:
http://emberjs.com/ember-users/
durandal:
In the end, we decided to use durandal for our complex app.
Main reasons:
- better architecture
- file structure
- view and viewmodels are clearly separated out into separate JavaScript files
- familiar to anyone who has used classic MVC pattern
- based on the MV* XAML framework Caliburn Micro
- is testable (unit tests: Karma & Jasmine, end to end: Protractor)
- is specialized (does not providing everything in one box)
- framework itself is smaller & simpler than Angular js
- can still use other libraries when needed
- sample applications are sophisticated
- works well with kendo-ui
- Life cycle:
- Today: take advantage of Durandal’s strong architecture
- Future: we have the option to migrate to Angular 2 which will be more similar to Durandal
- even if you opt for AngularJS today, then with Angular 2 you will need to make major changes to your app...
built with durandal js:
http://durandaljs.com/showcase.html
Further Details:
Below is a table that provides further details.
It originally came from an Excel workbook - so hopefully you can still read it.
Details have been modified to protect confidentiality.
| Framework | angular | durandal | emberjs |
| sample applications | simple SPAs | more complex apps | samples are mostly from startups? |
| sample applications - ref | https://builtwith.angularjs.org/ | http://durandaljs.com/showcase.html | http://emberjs.com/ember-users/ |
| sample applications - ref2 | http://www.biztalk360.com/tour/ | ||
| sample applications - ref3 | https://durandalspa.codeplex.com/ | ||
| Functionality: - Advantages | +powerful f/w, +single solution, +testability out of the box (unit tests, end to end), +kendoui integration | +powerful f/w, +strong architecture , + devs have a lot of freedom to add libraries | +powerful f/w, +single solution, +good architecture, +testability, +clear MVC structure, +component oriented |
| Functionality: Disadvantages | - devs do not have much freedom, -abstract concepts like directives, - for dependency management, still needs require.js or similar | - not a single solution. Typically depends on knockout for UI updates, and on require.js for dependency management. | - not clear how to integrate with kendoui, - uses bower not nuget, - ember data component is in beta, -fragile (breaks with minor HTML errors), -difficult to diagnose errors |
| Common features | 2-way binding, script loading (Require JS) | 2-way binding, script loading (Require JS) | 2-way binding, script loading (Require JS) |
| integration with kendo-ui | supported by kendo-ui, but not many examples or tutorials | not an issue | not clear how to integrate with kendoui |
| testability | highly testable out of the box, although requires node + git | highly testable, but needs some setup. [unit tests: Jasmine + karma], [e2e: protractor] | highly testable, but needs some setup. Another but is that emberjs seems very fragile. |
| Architecture | -App structure seems less clearly MV*, -Abstract ideas such as directives, -VM seems to be part of the HTML view, which seems messy, -large number of files | +app structure is better than angular. e.g. angular has VM embedded in HTML view, whereas durandal has clear separate VM code. +Durandal has clear MVC structure, +better fit with TypeScript? (modular code via AMD), +Less obtrusive than angular, +smaller number of files | good clean architecture |
| Architecture - reference | http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript, http://todomvc.com, https://github.com/angular/angular-seed | http://todomvc.com/, http://durandaljs.com/get-started.html | http://todomvc.com/ |
| Simplicity (ease of use) | -a lot to learn - large API, +integrate with kendo ui, -testability requires node, npm, git. + more tutorials etc than Durandal | -a lot to learn. -Testability requires some discipline, not out of box. | -steep learning curve!, '+markup is simpler than angularjs, +views easier to use than directives, +clear MVC structure, - fragile, - difficult to diagnose errors |
| Future support | very popular, but 2.0 is a rewrite and timeline is uncertain. Is backed by Google (but Google have dropped technologies in the past...) | not as popular, main architect has moved to Angular 2, future of Durandal is Angular | popular, but angularjs is 33 times more popular, - ember data component is stuck in beta |
| License | MIT [ok] | MIT [ok] | MIT [ok] |
Comments
Post a Comment