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

The Future of DNN Speaks Razor - #6 - Mapping Needs to Technologies

I've written a few posts in my series The Future of DNN Speaks Razor explaining why many technologies are obsolete or going that way. I've also mentioned a few neat new things and as a kind of summary, I will recommend what HTML-creation technology to use for what part of each application.

What HTML5 Offers Today

Based on this (already old) graphic, you can easily see that the modern client supports just about anything you can dream of. So all we have to do is figure out what's left for the server to do.

Mapping Specific Types of Output to Recommended Technologies

Admin User Interfaces
like configuration dialogs

Content Inputlike edit-dialogs for your data

Use

Simple HTML-forms or client SPAs (Single-Page-Applications)...

...based on AngularJS (or knockoutJS if need be)...

...receiving and saving data through WebAPI (ideally the DNN-flavor with security-checks etc.).

Avoid

All WebForms-Controls (like Labels, Input-Boxes, etc.), especially the built in Telerik Controls (these are not updated any more)

Avoid Postbacks and ViewState at all cost, they are history.

In-Page Content EditingIn-Content Editing Dialogs

Use

This is mostly done in JavaScript (jQuery or AngularJS)...

...simple editable DIVs and form-elements

...receiving and saving data through WebAPI (ideally the DNN-flavor with security-checks etc.).

Avoid

All WebForms- & Telerik-Controls, Postbacks and ViewState

Don't compensate ViewState with Session-State - this will fail in the long run

Module Front-End Viewslike a login-control or contact-form

Use

You will often need some custome HTML, so use C# Razor for the HTML-generation

Most of these templates are simply responsive HTML-fragments with minimal logic. They must place the content-data inside the HTML for SEO-reasons and should be easy to customize. Use

The ideal solution is C# Razor or DNN-Tokens

Token-templates offer a security benefit since they contain no code but are not flexible

C# Razor templates are power-edition

Use Server-Side Image-Resizers to auto-resize/crop your images [todo]

Avoid

All WebForms- & Telerik-Controls, Postbacks and ViewState

...especially data-bound WebForms templates

XSLT - this is sometimes used, but most developers are very louse at it, so even though the technology is great, it's not good for this requirement. Also note that XSLT is almost dead in Web-Output - most CMSs that went for this approach have moved on, a bit like XML-Streams being replaced by JSON

Don't use you own invented "improved" engine. Your solution might be better than Tokens, but it's unlikely that you'll create anything better than Razor

Content-List Output
like lists of news, list of products and similar

These are usually designed/responsive table-like lists of things like news, downloadable files etc. Use:

C# Razor to ensure that you can also apply some custom formatting, hide some items based on rules etc.

DNN-Tokens might be used, but are usually too trivial for good lists

​Avoid

Everything you should also avoid in the list above...

...especially data-bound WebForms templates

Data-List Outputlike feeds from external sources, lists of data from a DB

These are usually designed/responsive table-like lists of things like news, downloadable files etc. Use:

C# Razor to ensure that you can also apply some custom formatting, hide some items based on rules etc.

DNN-Tokens are usually too trivial for good lists.

Avoid

Everything you should also avoid in the list above...

...especially data-bound WebForms templates

End-User SPAs
Single Page Applications meant to react quickly but still get indexed by Google.

These are currently the most challenging of solutions. In brief:

create them client-side using AngularJS and similar

Deliver the data throughWebAPI or custom JSON

To ensure SEO, use Hashbangs for application state...

...and create C# Razor fallback-views on the server (processing the _escaped_fragment_ URLs) to deliver search-engine HTML. Note: Most people don't understand what I just wrote here - I'll blog about it in detail one day.

Avoid

Don't create them with server-side rendering or any of the WebForms-solutions

Don't create complex solutions with jQuery only - this always works at first, but development time grows exponentially with complexity. So always use...

...a good client side MVC-Framework like AngularJS. Avoid knockoutJS, as it doesn't even offer real View-Management, so is too trivial for SPAs

Note to Module Developers

If you are a module-developer, make sure you support Razor as your templating-engine of choice. Ideally, make sure the templates are stored in the portal-folder and that your module can work with portal-specific templates. If possible, also add ways to publish your data as JSON to empower the web designer to create awesome alternate consumption paths like neat JS-lists or even crazy AngularJS SPAs (Single Page Applications).

Avoid ASP.net WebForms/WebControls and XSLT at all cost.

Also avoid VB Razor since it's not widespread.

A Note to Web Designers

If you are a web designer, make sure you choose content-management modules supporting Razor - because everything you customize in Razor will still be "the right way" in 5 years. Everything you do in XSLT or WebForms is a bad investment of your time and your customers money. When you want to create something cool - like an interactive list or chart - do it in JavaScript. Postbacks and Server-Rendering are soooo 2004. If possible, motivate your module-developers to support both Razor and JSON interfaces.

An Example how This Should be Done

Since we (2sic) are so keen on these technologies, our content-management module 2sxc supports exactly these setups, but I'm sure that many others do too.

Since 2sxc does almost everything including galleries, image-rotators, product lists/details, SPAs etc., I've stopped reviewing other modules, so I can't recommend any. I do believe that XModand Form&Listare going there, but are still focused on historically popular technologies like XSLT and WebForms. If you can recommend any further solution please mention it in the comments.

Summing Up

I hope I've inspired you and helped you see the web-world as it functions today. Of course, this leaves a lot o post about, including the following:

Razor-Basics and advanced Razor-stuff (like grouping using LINQ) - this will need a series...

For module developers: How to integrate Razor as your View-Engine while you're still hooked on WebForms

AngularJS basics - another series (anybody want to write this one - post in the comments)

JSON and WebAPI basics - also a series (anybody want to do this - post in the comments)

With love from SwitzerlandDaniel

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.

Comments

thanks daniel for the series. I read them all and agree whole heartedly with you. All sizes of business are even using these technologies to host a single business solution for their information in the cloud, without the in house server ( solving the complex need for keeping data consistent between in house and online data stores) and allows resources to be focuses in one place.

I like the idea of using angular for the more complex modules, but feel it might be a bit of over kill for the simple modules and like to use knockout when the data binding requirements are simple.

In addition, I can not emphasises enough how much I want DNN 8 to move this way. If DNN can remove the mark up bloat the exists around modules and leave the majority of the styling to frameworks like bootstrap and foundation through skins, then you have a truly modern CMS which builds upon the primary strengths of DNN, which IMHO are its flexibility and extensibility.

I look forward to the future of DNN and strongly believe it is the best CMS out there.

@Jordan: I understand that you see AngularJS as "too powerfull" for many scenarios.

The reason we are completely dumping knockoutJS ist standardization and Knowledge Management. We have 17 employees - and teaching each and every one the differences between the frameworks, the quicks, the bugs and the issues takes a lot of time. If you add the time you need for internal documentation and for additional problems which arise when people confuse the two technlogies then you have a very, very expensive system. Reducing it to 1 technology does increase the learning curve once for every employee - but it so much cheaper than maintaining 2 similar solutions for similar problems.

It's also a protection: simple solution tend to migrate into complexity and bam! you hit a wall. If you start in Angular this won't happen.

And third: once you learned angular, creating simple solutions doesn't take any longer than with knockoutJS.

@erikYou're welcome ;). I love a good competition - and it's wonderful that younger projects have more freedom to try things (and optionally mess up) - while more stable/mature solutions can benefit from lessons learned there. Umbraco tried to go MVC and failed big time after more than a years development - now I believe they are one a good track. And DNN is too - and the more we learn from each other, the better all will get.

Love from CH Daniel

PS: that's Switzerland for you: 4 languages, so the abbreviation CH doesn't make much sense in most of them

Content Layout

Subscribe to DNN Digest

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.