Blog / Development

Building a Single Page Application without a Framework Using Kentico Cloud

by Rui Wang

May 23, 2017

One of the challenges you might face when trying to learn a new software product is finding the right project to test it out on. Building a website with a headless CMS like Kentico Cloud poses a lot of questions. Which framework do you use? Do you have the environment to run the site? And, most importantly, is the website project a good choice and not just a long page with blocks of data that you could do directly with HTML?

Starting with Kentico Cloud Headless CMS

When I started learning how to work with Kentico Cloud, the first project I did was a sample blog website using content from my personal blog. I used the Kentico Cloud sample .NET MVC web application as the foundation for that project, which worked fine.

Afterwards, I wondered if someone could do this with WordPress, why would they do it with Kentico Cloud and MVC? Unless you specifically want to use one or both of those technologies, it’s little bit overkill for a blog website.

Building a Single Page Application Using jQuery

What if someone wanted to make a website without using a fancy framework like MVC, Node.js, or AngularJS? Could someone build a simple website with structured data managed by a headless CMS with a simple display layer that didn’t require the developer to know or learn a framework?

With that in mind, I set out to build a single page application (SPA) using only jQuery and HTML for the front-end display, utilizing Kentico Cloud to supply the data. Of course, to save some time and not to write everything from scratch, I Googled to see if someone had built a page using a similar concept before and found a great tutorial, Making a Single Page App without a Framework, by Danny Markov.

The article provides instructions for preparing a nice, client-side JS SPA with all the functionality I was looking for—list view, single item view, and a filter function. All I needed to do was generate the data from Kentico Cloud and update the JS to pull the right data.

I used the café data from the Kentico Cloud sample site for my project. For the output, I listed all of the café locations with a detailed information display when selected, and I also added a filter to filter the locations by region. In Kentico Cloud, I used the content type that was defined for cafés and used the sitemap to organize the cafés by regions.

The only challenge I had with this project was understanding the JSON generated from Kentico Cloud, as it’s more complex than the sample project from Danny. Other than that, there wasn’t much extra work I had to do. Within a day, my sample SPA for Café Locations was live. It consists of an HTML page with reference to jQuery, a JS file, and a CSS file. That’s it, the SPA without a Framework.

What Projects Is SPA a Good Fit For?

This kind of single page application is suitable for a simple site that doesn’t have too much data to load, because the data is loaded once, and all the actions are performed client-side. If you have hundreds of items, this won't be ideal, and you should retrieve additional data separately based on the requests.

What would be a really good use for this kind of SPA? The type of project that comes to my mind is a conference or event microsite or landing page.

For example, a conference has sessions in three tracks. As a developer, you could define the session as a content type in Kentico Cloud, allowing event organizers and content editors to manage and update the sessions as it gets closer to the event date. 

Next, you could define a sitemap or taxonomy to manage the relationship between each session and the tracks. It would be really easy for event organizers to learn how to manage this in Kentico Cloud. As for the developer, you could likely finish the front-end display, including some design elements, within a couple of days. But for now, you’d have to handle the event registration outside of Kentico Cloud.

Parting Thoughts

Building a single page application without a framework using Kentico Cloud headless CMS for an event microsite or landing page, which you may not need after the event, is a great solution for both developers and content editors.

As I demonstrated with my single page application, developers can quickly prepare everything necessary with minimal effort, forgoing the usual roadblocks due to learning or working with complex frameworks. Moreover, business users can still easily edit the content without needing to involve a developer.