Find a post...

DNN-Connect Blogs

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 Input
like edit-dialogs for your data

Use

  1. Simple HTML-forms or client SPAs (Single-Page-Applications)...
  2. ...based on AngularJS (or knockoutJS if need be)...
  3. ...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 Editing
In-Content Editing Dialogs

Use

  1. This is mostly done in JavaScript (jQuery or AngularJS)...
  2. ...simple editable DIVs and form-elements
  3. ...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 Views
like a login-control or contact-form

Use

  1. You will often need some custome HTML, so use C# Razor for the HTML-generation
  2. Use jQuery for the front-end logic (like input-field validation) 
  3. ...and a JSON/WebAPI interface for processing the data. 

Avoid 

  • All WebForms- & Telerik-Controls, Postbacks and ViewState

Interactive Module Front-End Views
like galleries, charts, image-rotators

These usually consist of an initial HTML fragment containing some data (like DIVs containing images) and a feature rich script. Use: 

  1. The script are made with AngularJS, jQuery or specific third party JS libraries like TimelineJS
  2. To deliver html-data (usually list of something) you will need C# Razor or DNN-Tokens
  3. for any kind of JSON feed either use a standard WebAPI or a module specific JSON-feed
  4. Module-instance configuration (usually just 1 record containing animation speed etc.) is usually delivered in the HTML as inline JSON to avoid unnecessary extra requests.

Avoid

  • All WebForms- & Telerik-Controls, Postbacks and ViewState

Content-Element Output
like images, videos, simple text/image combinations, addresses, product-details etc.

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

  1. The ideal solution is C# Razor or DNN-Tokens
  2. Token-templates offer a security benefit since they contain no code but are not flexible
  3. C# Razor templates are power-edition
  4. 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:

  1. C# Razor to ensure that you can also apply some custom formatting, hide some items based on rules etc. 
  2. 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 Output
like 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:

  1. C# Razor to ensure that you can also apply some custom formatting, hide some items based on rules etc. 
  2. 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: 

  1. create them client-side using AngularJS and similar
  2. Deliver the data throughWebAPI or custom JSON
  3. To ensure SEO, use Hashbangs for application state...
  4. ...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 XMod and Form&List are 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:

  1. Razor-Basics and advanced Razor-stuff (like grouping using LINQ) - this will need a series...
  2. For module developers: How to integrate Razor as your View-Engine while you're still hooked on WebForms
  3. AngularJS basics - another series (anybody want to write this one - post in the comments)
  4. JSON and WebAPI basics - also a series (anybody want to do this - post in the comments)

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.

 

PS: Want to get started before the entire Razor-series is out? For the impatient, try the DNN-Razor Host Module and watch this video  or try packaged code apps by installing 2sxc and some of the Razor Apps like the Razor Basic TutorialsList-Tutorials or the SQL and Peta-Poco Tutorials

 

Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.
Comment(s)

Hosting liberally provided by

Philipp Becker 6012 7
Geoff Barlow 547 4
DNN-Connect 431 6
Peter Donker 5059 30
Christopher Hammond 681 2
Olivier Jooris 419 1
Daniel Mettler 12009 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 327 2
Will Strohl 1546 27
Ernst Peter Tamminga 437 4
Barry Waluszko 2807 2
Declan Ward 453 1
Gifford Watkins 722 9
Torsten Weggen 2697 3