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 .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

DNN Hangout Special Episode - October 2015 - Building Modules Using the DNN 8 SPA Pattern

DNN 8 SPA Module Development Pattern

Every now and then, we throw in a special episode of DNN Hangout.  These special episodes are normally by request of you or another viewer in our audience.  This time, we didn’t need to wait for a prompt…  With the announcement of the DNN 8 module development contest, we already knew that people would be more than eager to get started… but before you can get started, you probably need a primer on just how to do that.  That’s the sole purpose of this hangout.

Next EpisodeBuilding modules using the DNN 8 MVC pattern

Side Note:  If you talk to, meet, or otherwise run into Ian Robinson, please thank him for creating dnndev.me.  The little bit of time that everyone in the community saves with this contribution is pretty awesome!

Show Notes

This blog entry is cross-posted from my personal blog site.


Tony Henrich
Thanks for the demo. I would have preferred if the demos would use the least common denominator for third party frameworks. For example most web developers know jQuery but not Knockout or Angular or React. I don't know Knockout so something like [ModuleAction:...] looked foreign to me and I didn't get what its equivalent in Javascript/html is. I have to find out.
Tony Henrich Saturday, October 10, 2015 4:15 AM (link)
Joe Brinkman
Tony - [ModuleAction: ] is not from knockout or any other SPA framework - that is a DNN Token used for injecting DNN information into the HTML page. Tokens are processed server side before the HTML is rendered. As far as least common denominator - I would consider Knockout to be that least common denominator. It is a simple lightweight library for two-way databinding that has been included and used in DNN since DNN 6.2 released in 2012. We have several blogs showing you how to use Knockout - http://www.dnnsoftware.com/community-blog/cid/134710/an-introduction-to-knockoutjs-ndash-part-1 The site Knockoutjs.com is a great resource for learning Knockout.
Joe Brinkman Saturday, October 10, 2015 6:55 AM (link)
Tony Henrich
I don't know any web developer among the ones I work with who knows Knockout. They are either using jQuery or learning/using Angular because it's becoming very popular. A few use React. So I am not sure I would say Knockout is the least common denominator. Among DNN module developers because it's included in DNN? Maybe. I don't know Knockout and I am not sure I want to learn it. I would go for Angular for the simple self serving reason that, in my area, it seems every web development job is looking for people who know it. But I do believe any technology can be learned if there's a need to.
Tony Henrich Saturday, October 10, 2015 1:08 PM (link)
Will Strohl
@Tony: All are good options, and with the exception of React, they each allow you to use an MVVM approach to binding to the front end. React is more of a rendering engine and can be used with both Angular and Knockout. I'm personally moving to Angular because it's more of a full solution. Knockout is purely binding, but Angular allows you to do both, and works seamlessly with bootstrap, but in a native and integrated way.

I guess the main point here is this... Whether you choose to use Knockout or Angular (or another binding framework like it), they're all implemented in a similar way. So yes, I'd have to agree with Joe here - but we glossed over this a bit too much in the broadcast. These are the kind of things I was supposed to catch, so it's my fault. :(
Will Strohl Saturday, October 10, 2015 2:53 PM (link)
Mark McAvoy
I have tried in the past to create a SPA using AngularJS on the 7.x platform. I used my own code to inject razor templates into the module which contained the html/js.
It all worked great then I hit a brick wall, namely DNN has a lot of user controls (file picker, WYSIWYG editor etc) that simply don't work outside of a webform and server side code.

So fast forward to the DNN 8 CTP6, what I didn't see in the video is how a developer would create a SPA module that has a DNN WYSIWYG edit content editor using just a html page?

On a separate note, I have to agree with Tony, AngularJS should be the preferred/recommend framework for DNN SPA modules. AngularJS has a lot more scope for developers, routing, many third party modules (http://ngmodules.org/) and more help/articles.
That is just my take on it.
Mark McAvoy Wednesday, October 14, 2015 6:44 AM (link)
Joe Brinkman
@Mark - We are currently working on building out controls for file picker, wysiwyg provider and others as part of our Dynamic Content Creator work. All of those controls will be available for use in a SPA module.

As for Angular, I don't believe we should be designating a preferred/recommended framework in DNN. JavaScript frameworks comes and go. There is no guarantee that Angular will continue to be the go to platform once Angular 2.0 is released. React is growing fast and it is quite possible that this time next year could see yet another framework like Aurelia or Meteor become the king of the roost. DNN does not need to pick a winner but continue to make sure that it can work with any of the major frameworks.
Joe Brinkman Thursday, October 15, 2015 12:03 AM (link)
Mark McAvoy
I do understand your point on the SPA framework. It will be interesting to see how the community and module developers create their SPA modules and what libraries are used and if any patterns appear.

When do you think native js/html controls will be available for SPA module development? With the competition at the moment I have a number of ideas which would require WYSIWYG.
Secondly will the SPA version of the controls be first class controls? I noticed that in the Dynamic Content Viewer that the serverside WYSIWYG on the edit content screen doesn't have the same image selector as a standard module, its missing the "browse server" button to locate images to insert.
Mark McAvoy Thursday, October 15, 2015 5:34 AM (link)
Isa Iminov
@Joe - Its good to read that DNN team is making progress with Dynamic Content Create work. I also had a few issues with file pickers and wysiwyg editor for some of the things that we do within DNN 7.3.x. What I ended up doing is a bit of a custom file picker controls and no wysiwyg editors.

Love the point that DNN is not sticking to or strongly recommending one specific JavaScript framework. While I prefer Angular over Knockout or jQuery myself I do believe that a much better approach is to allow developers to use whatever framework they are more comfortable with.

Can't wait for the long awaited DNN 8.
Isa Iminov Thursday, October 15, 2015 7:53 AM (link)
Will Strohl
@Joe: Some might say that DNN Corp has already chosen a preferred/recommended framework with KnockoutJS being included as a native framework and used in core features.

Keeping that in mind... It might then make sense to have the other most popular options available as registered, core, first class citizens as well to help prevent conflicts between developers. They don't need to be in use in the core, but at least we wouldn't each be doing it a different way and stepping on each others toes.
Will Strohl Thursday, October 15, 2015 12:11 PM (link)
Tony Henrich
@Joe By your argument then Knockout shouldn't be the least common denominator. Next year Knockout could be dying or irrelevant. The least common denominator is ideally a project without any Javascript framework. I mentioned jQuery because it is sooo popular, a ton more than Knockout. jQuery is progressing smoothly. There's a foundation behind it. It doesn't suffer from a one person in charge of the framework like Knockout (maybe not so recently) or a complete rewrite, probably not backward compatible with previous version like Angular 2.0 in relation to 1.0.

I don't want to turn this discussion into which framework is the best one. I am saying I would prefer I do not see future DNN tutorials dependent on KnockOut. I don't know it and I don't want to spend time learning it. A DNN module developer doesn't need to know it to develop modules. Let the developer choose the framework they are comfortable with the most.
Tony Henrich Thursday, October 15, 2015 2:39 PM (link)
Mark McAvoy
@Will I do think you have a point, DNN can't possible have every JS lib but without adding the standard/popular ones for SPA it means each module will attempt to load its own. A bit like what happened before jQuery was bundled with DNN.

@Joe When do you think the html/javascript implementations of the DNN user controls will be ready for SPA? I have a couple of ideas for modules to enter into the DNN8 Competition and they need WYSIWYG editors. Will there be another CTP release before the end of the competition date?
Also I noticed on the Dynamic Content View when you load the WYSIWYG that its not the same control as used on the standard HTML module for example the image picker is missing the "browse server" feature. Will the html/js version of the WYSIWYG have the "browse server" feature? I guess I'm asking will the html/js version be first class controls within DNN or will they be cut down versions compared to the server implementation?

I'm really excited by the changes being made to DNN to allow developers to use MVC and SPA so please don't think I'm being critical.
Mark McAvoy Thursday, October 15, 2015 3:34 PM (link)
Dan McDonald
Joe - Thanks for the demo. When do you think the template will be available. You indicated that is was nearly complete.

Dan McDonald Friday, October 16, 2015 10:32 AM (link)
Mark McAvoy
@Joe when do you think the SPA module development pattern will have js/html controls (WYSIWYG) available? Will this be before the end of the DNN8 Module Competition?

Also I noticed that the MVC implementation used on the dynamic content viewer, the WYSIWYG editor doesn't appear to have the browse server feature when selecting an an image to use. Will the MVC/SPA versions of the DNN user controls be first class controls and have the same functionality as the webform server side versions?
Mark McAvoy Tuesday, October 20, 2015 5:25 AM (link)
Joe Brinkman
@Tony - I use Knockout in my demos, not because I think it is the best SPA framework, but because it is already widely used in the core platform. I could write my own data-binding code, but it would take a lot more time and make my samples significantly more complex. To me, two-way data-binding is a baseline feature offered by almost all SPA frameworks. As a result, I think Knockout provides a nice simple implementation that shows people the concept without being overly complex.
Joe Brinkman Monday, October 26, 2015 10:38 AM (link)
Joe Brinkman
@Mark - We are still working on having a provider implementation for the RichTextEditor for client side use (MVC module, SPA module). I would suggest you use a simple HTML editor approach in your module, like we use in the current DCC implementation. It should be fairly simple to swap this out once we finalize our core platform approach.
Joe Brinkman Monday, October 26, 2015 10:46 AM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (28)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (29)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (146)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (2)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (272)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (53)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (39)
Will Strohl (164)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out