How To Architect Your First Umbraco Page

This post assumes that you know nothing of creating a page in Umbraco or MVC. By the end of this article, you will understand what a layout is, what a template is and what a partial view is. These are the fundamental concepts of creating your first page, that you can use in the real-world. In the beginning, there was HTML, a website was made-up for a load of static files that sat on a server. Each page contains a header, a menu, and some content. Suddenly, marketing decides they want to create a new page, this means a developer would have to copy an existing file and change the content. This leaves us with a second problem, the menu is now out of date and needs updating in every file. The developer now has to go back through the other pages and manually update the header on each one. This is one of the big issues with static sites.. most of the pages are made up of nearly identical duplicated code and in order to make a single change, we have to make changes to code in multiple places, which is bad! As you can imagine, using static HTML for a website with more than 10 pages doesn't scale, if your website had 100's of pages keeping the site consistent would be impossible, or a full-time job. A second problem is that only a technical person who understands HTML and CSS can make any text changes and upload them to the server. Most businesses won't want to pay developers to make content changes for them, as its a waste of money. Anyone running a personal project website won't want to hire a developer full time to update their websites for them, so we need a way to allow non-technical people to update the content of the website. Companies like Umbraco started developing CMS solutions to help tackle problems like these ones. When we architect an Umbraco website. This first thing you will need to do is identify the templates. Common examples of website templates are the home page, a content page, a landing page. Each template will represent a type of page that will have similar functionality. Understanding that your website will need several templates, won't solve the duplication issue, though.  IF you don't sort it out now, your project will very quickly turn into a maintenance nightmare!  To make your life as pain-free as possible, one of your main goals, is to strive for  no duplication of code. Following a strict no duplication ethos, will make maintenance infinitely easier throughout the project's lifetime, so how do we do this? As mentioned above on each web page we will have some form of menu or navigation. We don't want to repeat this on every page, so this component is a prime candidate for turning into a reusable component. In ASP.NET terms if we were working with web forms, we would create a new user control for the menu. If you have half a brain, you'll be building your website using MVC so you will be using a partial view instead. As your website grows in popularity, your fanbase will want more interactivity from your website... a menu and some content simply won't cut the mustard anymore... your site visitors expect to see copyright information and a handful of links on the bottom of every page! Following the process above, we would put the footer in a partial view. Adding the footer into a partial view will reduce some HTML duplication, although after you will still have to update every template to include the footer, which is tedious and becomes boring very quickly. Anytime you need to add something more than once, you're breaking the NO DUPLICATION rule. Before we start coding all f our templates, we will need to fix this duplication issue. I'm assuming as you are working on a new MVC build that you will be working with MVC. As it's 2017 and.NET CORE is out, only stupid idiots would consider using web forms in 2017. UPDATE: I actually had someone comment about my using web forms statement who seemed upset that my recommendation against my strong opinion about developers who favor web forms. MVC has been out for over 5 years and unless you have a very specific business case, or, you have to work on a legacy project... NEVER use web forms. Your code will be ugly, it's not unit testable and it results in horrible HTML. If you need any further proof... use this thing called Google... When we work with MVC, you will need to create a master layout that will contain the header and footer includes. Each one of page templates will then inherit from this master layout, removing the need for you to add a reference to the header and footer on each template. So now I'm hoping you understand what we need in order to create our first Umbraco web page. We need a master layout that will be the first thing that gets loaded when our page is loaded. On the master layout, we will add the things that are the same on all our different pages, specifically the header and footer. We will also need to create the template that will be used to display the unique contents of our page. So to recap, we need a master layer, a header and footer view and a homepage template. In the next post, I'm going to create the master template.


Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge


Back to top