Tips for frontenders: Dynamicweb Razor templates

The CMS system I use at work, Dynamicweb CMS, is a .NET based system which allows you to layout your site using .

The Templates can be based on:

  1. HTML Templates using custom tags

  2. XSLT templates based on XML delivered by

  3. based templates where you can choose between VB.NET or .Net

The HTML option is where you could retrieve the page id like this <!--@Global:Page.ID--> is the oldest method.

You can also use XSLT which most front-end developers apparently did not understand (I did :–)).

The Razor templates is much more back-end developer sort of style. You really need Microsoft Visual Studio and you are tied down not only to Dynamicweb data and methods, but can freely build your own say C# code and do practically anything. This is very powerful and brings great options to the developer.

Old school front-end developer

Most front-end developers will agree that they know (very well) things like HTML, CSS and .

With the introduction of .NET Razor based templates the front-end developer needs to start building competances within a new domain: Microsoft .NET coding.

I see it as a opportunity to build more powerful solutions as more complex options are at hand as you in the Dynamicweb back-end can work with response much more.

You are not tied down to what Dynamicweb CMS found a valid piece of information, you can build and manipulate the data your self.

Razor lets you do in back-end what you used to do in front-end

Looking at many of the websites I have been working on, much of the work have been doing as a front-end developer were “doing things” with content delivered by back-end through templates.

With the Razor template option you can do the data manipulation of data even before it is sent to the HTML on the webpage.

How many days to event?

Like if the backend had a event data and I needed to show how many days till the event date was here.

A HTML/Javascript version

See the Pen f5d4d24b307c8697499a7af373b43117 by Sten Hougaard (@netsi1964) on CodePen.

It is not pretty: You need to do a lot of coding to get the result and it has all the issues with rendering content using javascript in the browser. That is another story!

A C# Razor version

See the Pen Dynamicweb Razor template by Sten Hougaard (@netsi1964) on CodePen.

The result will be the same for the visitor of the page, but it is a much more clean solution. No javascript needed, the HTML content contains is ready when served from Dynamicweb, which for instance has the positive effect that web crawlers “understands” the content better.

Challenges: A whole new scope

The change from coding and thinking in front-end paths to coding and thinking in C# and .NET scope is not an easy one.

Many front-end developers are more biased towards the creative (design) part of a webpage, and will not all be able to master coding logic, sql, linq and .NET classes.

My suggestion are:

  1. Go slow

  2. Be inspired by examples shared here on the web.

  3. Work on local solutions or dev servers

  4. Ask, ask, ask… If your company have a back-end developer ask her/him.

  5. Use the Dynamicweb Forum – it has many great solved cases

  6. Many pieces of Razor code can be found on the Dynamicweb Razor Github Wiki

US

Leave a Reply