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
- 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 Editing
In-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 Views
like a login-control or contact-form
|
Use
- You will often need some custome HTML, so use C# Razor for the HTML-generation
- Use jQuery for the front-end logic (like input-field validation)
- ...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:
- The script are made with AngularJS, jQuery or specific third party JS libraries like TimelineJS.
- To deliver html-data (usually list of something) you will need C# Razor or DNN-Tokens
- for any kind of JSON feed either use a standard WebAPI or a module specific JSON-feed
- 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
- 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 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:
- 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 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:
- 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 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 Tutorials, List-Tutorials or the SQL and Peta-Poco Tutorials.