In this tutorial, you will learn about Umbraco CMS and its architecture. If you are looking for a free open-source CMS then Umbraco CMS is a great choice! This post assumes that you know nothing about Umbraco CMS or MVC. By the end of this article, you will understand more about the core components that make up a Umbraco page. We will start with a short history lesson 📜 📜 📜.

What Came First The Chicken Or The CMS?

In the beginning, there was HTML. HTML allowed us to create a web page. A single web page is pretty dull, so the concept of linking many pages together was a natural progression and the website was born 🍼 . Websites used to be comprised of a number of static HTML files that sat on a web server. The web server allowed people located on different computers to view the files. Each web page contained HTML code to tell a browser what to render. A page would contain code to render components like the header, the menu, the footer as well as the content of the page.

There is a limitation of using static files, change. Suddenly, someone in the marketing department decides they want to create a new page on the site to try and sell a new product. To get this new page 'live' the marketer sits with a developer and works with them until a new page has been created with the copy amends. If you only need to create a page once every few years this approach is OK. If you want to update your content many times a day, or, you work in a larger team this approach is very flawed.

Let's now say the marketer wants the new page to appear in the menu. As the HTML code to render the menu is duplicated within every static file, this creates an issue. The developer has to go through each web page and manually update the menu code. 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 update potentially hundreds of files. The chance of bugs and copy and paste issues are high. Not ideal.

As you can imagine, using static HTML for a website with 100 pages doesn't scale. Just maintaining the site's HTML, could be a full-time job. Developers are expensive. Content updates are also very boring, so it's a lose/lose situation for everyone. A second problem is that the only person who can update the website has to be technical. Most businesses won't want to pay developers to make content changes for them, as it's a waste of money. Anyone running a hobby website won't want to pay a developer anytime they want to make a change. This is where the CMS came into play. Most people have heard of WordPress. WordPress is the most widely known CMS in the world. One big issue with WordPress is the security aspect. WordPress sites are notorious for getting hacked. This is where Umbraco CMS comes in. If you want a great CMS that is free and very secure, Umbraco is a great choice. Umbraco uses .NET it comes with lots of properties and it allows you to build a website with a hierarchy, rather than a blog. Umbraco is open source, it's free. How do we get started using it?

How Do I Create A Website Using A CMS?

When architecting a Umbraco website, the first thing you will need to do is identify the different types of pages. Common examples of website page types include a homepage, content-us page, landing page or sitemap page. In most CMS systems, a page type is called a template, not so with Umbraco. In Umbraco, different types of pages are called document-types. A document type will represent the template that defines all the properties that a content editor can interact with. Document types make your life as pain-free as possible and CMS development easy!

All good developers should strive to follow the DRY principle Duplicate Code On Pain Of Death 💀💀💀. Having a duplication avoidance mindset will make for a cleaner codebase. The same rule should also be followed when building CMS components. Each document type you create will have a corresponding view file. The view file (also known as a template in Umbraco talk) will allow you to render the HTML for the page. If you had to add the HTML to render the header and the footer in each template, you have a lot of duplication going on 😭😭. A page template alone will not solve duplication issues, so what do we do?

To avoid duplicating HTML in the page views, we create layouts and re-usable components called partials. Partials can be re-used within multiple templates. Umbraco is built on top of the Microsoft ASP.NET technology stack. In 2016, the best way to build a .NET website is to use the MVC framework. This Umbraco naming inlines with MVC naming. In MVC you also have partial views. These two concepts are the same, simples 🏄

Using partials, we can avoid duplicating HTML in each template. The footer would be an ideal candidate to move into a partial. Each template can call the partial, eliminating the duplicate HTML within each view. One issue with just using partials alone is that the calls to the partials will still be duplicated in each view. This is why you will need to create a shared layout view that all pages can be associated with. You can add the link to the footer and header partial in the master layout view.

The concept of layouts in Umbraco is another concept borrowed from MVC. To follow good practice, you will need to create a master layout view for your website. Each page template will then inherit from the master layout, removing the need for you to add a reference to the header and footer on each template. On the master layout, you need to add the HTML elements that are shared between all the different pages. Think the head section HTML, the header, and the footer.

To recap on the fundamental building blocks used in Umbraco we have:

  • Layouts
  • Document-types
  • Partials
  • Templates (views)

I'm hoping you understand the basics of how a Umbraco page is structured and the reasons why a page is structured that way. The main driving factor was to allow marketers to update website content easily. Shared components exist to prevent code duplication, a common issue in static HTML sites. This post is very theory-heavy. If you care more about code then read the next post to learn how to build these components within Umbraco. Link below... Happy Coding 🤘