Nov 13, 2020 · by Archana Atara

Frontend Developer’s Guide to Leveraging Sitecore – Part 1

Get started with Sitecore

After having worked with several content management systems (CMS) as a frontend developer, I was introduced to Sitecore CMS a few years back.  In part one of this two-part blog series, discover how frontend developers can get started with Sitecore and make the most of its robust features.

Key features of Sitecore:

  • As developed on the Microsoft .NET platform, Sitecore is easy to use, develop and maintain
  • Helps test, optimize, personalize and automate content
  • Apart from usability and scalability, it offers easy integration of services, such as SharePoint, CRM and Google Analytics that help boost productivity
  • Helps update rich, dynamic content easily

Sitecore is a web content management and marketing platform built on Microsoft .NET and SQL Server. It is a robust and powerful framework that enables businesses to build extensive, flexible, quick and scalable enterprise solutions. 

Sitecore, like any other CMS, consists of the back end to manage content and the front end to present the content.

Role of Frontend Developers in Sitecore 

Traditionally, frontend developers create HTML/CSS from designs and hand them over to backend developers, who then integrate the markup into CMS frameworks.  With Sitecore, backend and frontend can work parallelly. When Sitecore introduced the Sitecore Experience Accelerator (SXA), it further opened a whole new world of opportunities for frontend developers. The crux is there is a creative approach to the development process for frontend developers working with Sitecore. 

Let us look at how frontenders can confidently navigate the CMS platform to help build reliable websites that deliver consistent and memorable user experience. 

Installation 

Sitecore development process is preceded by a typical installation process and setup. 

  1. Sitecore installation
  2. Dev environment or visual studio setup
  3. Creation of a sample page and other important structures like controllers, renderings and views (MVC layout) which is a backend process

Sitecore installation is a tedious and extensive process, but let’s simplify to only the general requirements and steps to install Sitecore:

  1. Download the Sitecore package; extract zip and license.xml file
  2. Solr installation is another detailed process
  3. Install SIF to manage and create Sitecore instances
  4. Modify or update config files
  5. Install all prerequisites and check the system requirements
  6. Install Sitecore

 

Depending on the project complexity and requirements, the following platforms can help install, manage and set up Sitecore instances.

  • SIF: There are various tools and processes available for Sitecore on-premises installation, depending on its versions. One of the best and easy-to-use tools is the Sitecore Installation Framework (SIF). SIF is a PowerShell module that helps install and configure Sitecore instances including web instances, Windows services, databases, search engine configuration and certificates. We can also use SIF as a configuration management tool for handling custom tasks. Sitecore 10.0 installation is also similar to this process.
  • Azure: With the progress on Cloud Services support, Sitecore can also be installed on Microsoft Azure using Azure Marketplace.
  • Docker: Docker is open source “platforms as a service” software that allows developers to pack, ship and run applications in packages called containers. It can be used effectively for virtualization of Sitecore environments that will eliminate many cross-platform issues faced by development teams. 

Once the installation is complete, we can login into Sitecore admin as an Admin and the first interface would look like the image below.

The red logo of Sitecore in the bottom left corner serves as a start button of Windows in the taskbar. The next step is to navigate to the content editor from this menu.

Databases

A few databases will be installed along with Sitecore for its internal functionality. Though we will not delve into all these databases now, it helps to remember three important databases:

Core: Core database is the core of Sitecore where all the CMS configuration related data is saved.

Master: Multiple versions of data are maintained by this database.

Web: Any live or published version of data is stored here and hence it serves as a subset of the master database.

Understanding workflow

Let us investigate the initial steps to consider in the workflow focused on front end development.

Usually, a page contains several sections such as header, body, footer and so on. These are the same HTML, CSS or JavaScript development for frontend developers, but the key is to have a different modular approach when designing HTML components. This helps ensure that these components can be stitched together to form pages.

Folder structure

Folder structure can be similar to any other development projects but never forget to communicate with your team to be consistent regarding initial assets hierarchy.

Structuring the Layout

Layout is an overall container for the page including placeholders. Typically, there is only one main layout for the website, but it ultimately depends on project requirements.

Here, frontend developers must remember a key best practice to follow while leveraging Sitecore. Do not use page specific CSS classes or JavaScript code in the layout. 

X <body class=”service-page” id=”servicePage”> 

Avoid any ID, class on layout elements. As mentioned, the main template will be the same for all pages, hence it is not a good practice to provide any class at page level.  A layout with basic components would look like this:

If this is our main template/Home page, the folder structure could be as below:

Home.cshtml & Biography.cshtml are two different layouts in our site.

The site can have multiple layouts as base structures which may include same or different placeholders.

Componentizing

The primary responsibility of a frontend developer is to amplify the concept of modularity in Sitecore. So, don’t start coding yet! Instead, execute the following steps with a keen understanding of key assets:

  • Analyze wireframes or prototypes
    Visualize the page and its different components such as header, footer, navigation, body content and carousel components.
  • Use graphics and optimization
    While working with a huge CMS like Sitecore, always count on image optimization to increase performance. Proper planning of implementing images is also imperative. For instance, understand if there will be background images and sprite images or if the images will be added via editor. Depending on these factors, design your markup and styles.
  • Distinguish common or global components and separate them from customized or page level components
    There might be page specific components, like a hero carousel, that are usually visible only for the home page. Therefore, layout your structure carefully. 
  • Take into account the Sitecore content structure
    This is another important criterion while designing the markup or styles for various components. As we decided in the workflow, naming methods and component structure or folder structure should be identical for backend and frontend.
  • Identify style guide or typography
    By defining a proper style guide, we can help both backend as well as frontend developers refer to the class names, fonts, headings and other components of frontend architecture. Even content editors can use it while adding content.
  • Think, create or sketch your layout plan
    Design self-contained, reusable components. Everything should be a component, which is nothing but modules. Break all your component assets into modules.

Self-contained means CSS and JS code should only scope to the structure of that component. As in the above instance, card component has its own separate files. 

For example, if we have card component, we can break it into assets as:

    • card.cshtml
    • _card.less/.scss
    • card.js (if required)

Breaking out component assets into separate modular files makes things easier to manage, update and package to different environments or even add to another solution to speed up the development process.

These components will be moved around to any page in the site. Therefore, any other CSS/JS or HTML code should not be affected in the site even if the component is deleted or modified.

HTML

Make a pattern to design component markup. For example, use the <section> tag as the container for all other components. Use <div> as inner containers. This will identify where a component starts and ends and will be easy to extract. Always focus on using semantic markup.

<section class=”cards”>
  <div class="card">   

<h2 class="card__title">Card Title</h2>

<div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

<a class="btn btn--primary">See this offer</a>

   </div>

</section>

CSS

Follow standard rules first irrespective of any platform you are working on.

  • Do not use IDs
  • Avoid inline CSS
  • Less nesting & specificity
  • Use a naming methodology such as B.E.M or any other of your choice

JavaScript

  • Do not hardcode things like message alerts in JavaScript
  • Always use a noConflict with your jQuery to prevent conflicts with Sitecore’s prototype JS library

Editor Centric

Just like the mobile first approach in responsive layout, follow the ‘Page editor/Experience editor’ first approach in Sitecore.

Sitecore Editors First Approach: Sitecore page editor is redefined as an experience editor in Sitecore 8. Sitecore offers two content editing tools – Experience Editor (EE) and Content Editor (CE) that authors can use to manage content effectively. 

For instance, if we need to create a Hero Carousel component, it will have its HTML, CSS and JS as in normal development. The challenge is not creating the hero slider and its features, but how the content editor can create, update and modify the hero component in the editor. 

Secondly, avoid adding custom classes in paragraphs or editing standard elements like <span> because this is hard to replicate by content editors. For example:

Whether it is CE or EE, it should be easy and quick to understand for content authors to add/modify/edit content in Sitecore. These authors are typically not technical experts, therefore code the components accordingly.

Let us examine a table as another example.

As seen in the image, table headings need to be styled differently than table rows. In such cases, do not generalize styles for <th> or <td> tags as these are the standard table tags used in Sitecore editor by default, like any other WYSIWYG editor. The CSS for the table headings should be specific with a CSS class name.

HTML:
<th class=”table-heading”></th>

CSS:

.table-heading {

    background: #F2F2F2;

    color: #2d2d2d;

    font-weight: 700;

    padding: 15px;

}

Hence, the above code will prevent global styling of the tables/th tags and when required, authors can add the specific class. This will also avoid any conflicts with existing CSS files or frameworks used.

Frontend developers should thus create modular markup or styles that can be used easily by content editors and adhere to the Sitecore rules.

In a Nutshell

Sitecore enables component-based development across teams that eventually leads to greater agility and significant improvement in the development lifecycle. With frontend developers finding an increasing role in the world of Sitecore, they can stay ahead of the game by understanding the nuances of the CMS platform. This will help them ultimately deliver robust websites and applications with unique user experiences. 

Stay tuned for more insights on Sitecore for Frontenders. 

Archana Atara

Archana Atara

Full Stack Web Developer
Archana Atara

Latest posts by Archana Atara

Share This Article

Post A Comment