Brian McKeiver's Blog

Kentico 12 Beta 2: Chasing the Raptor


Introduction

In case you were not aware, the second beta release of Kentico Raptor dropped last week ("Raptor" is the code name for the Kentico 12.0 beta releases). I have been keeping my eye on the first two releases of Raptor for one main reason, and that reason is the proclamation that Kentico made  earlier this year that announced ASP.NET MVC would be the main development model supported in Kentico 12 and later. This announcement was music to my ears as my team and I at BizStream have been pushing MVC in Kentico for the past two years.

Since we are such big fans of the MVC development style in Kentico getting the installation of Kentico Raptor up and running was the second highest priority of the week for me (sorry Kentico, coffee is always, and will always be the highest priority for me). And actually one of the newest features of the Kentico platform in version 12 is the updated installer that allows you to seamlessly install an ASP.NET MVC based solution and project type on your development machine. But that is not the most interesting part of the story here. The biggest star of the show in Kentico 12 is the new MVC Page Builder that allows content authors to use a drag and drop method of building content pages on MVC sites. Trust me this feature does not disappoint. It comes with many abilities including the long awaited MVC widgets that most developers have wanted for a while now. 

 

The Features of Raptor

Please remember, below is my opinion and unofficial commentary only for what I have seen in the Kentico Raptor betas. All of this is subject to change before the full Kentico 12.0 gold release at the end of 2018. But here goes for the my review of the features released so far.

 

MVC Installer

Please remember that this a beta installation, and the project that Raptor installs should not be used for any production level project. This is very true because there is no way to upgrade a beta release of Kentico 12. You would be stuck here if you tried to use this in production. But using the new Quick Installation (MVC) option in the installer gives you everything you need to start evaluating how to do MVC from a basic getting started standpoint.

 

Kentico 12 beta 2 installer

 

Pro tip: Make sure you uninstall Kentico 12 Beta 1 if you had it installed already.

 

Once the installer runs, which is quicker than before, you have everything you need to run both the Kentico 12 admin interface as well as a new Dancing Goat MVC based site. This includes a SQL Database and two C# projects, once for the Admin tool (CMSApp) and one for the MVC "live" site (DancingGoatMVC). If you are not familiar for why you need two different projects for MVC development style, check out my 8 things developers should know about Kentico MVC blog post for why. Below is a screen shot of the result of the installation:

 

Kentico 12 Beta 2 Installation Directory

 

Having this all created for you with one button saves about 30 mins of time of having to spin up a normal MVC "live" site connected to a previous version of Kentico, so this new installation option is kind of nice. One piece of feedback I would have for Kentico is that it would still be nice to specify an installation path in the quick installation option. I try to keep my inetpub/wwwroot folder clean most of the time, but I can deal with moving it…hesitantly. 

Interestingly enough, the quick installation targets the .Net framework 4.6.1 out of the box for both the admin tool and the MVC live site. I would recommend that if you want to test out the full level of performance that you swap out the framework to .Net 4.7 right after the install for the admin tool. Might as well use the latest bits from Microsoft right? If you want to switch it for the MVC live site you would need to worry about some Nuget package dependencies, so I don't know if it is worth it there. If it was me, I would not spend time on it (for now).

 

The MVC Page Builder

This is creme de la creme of Raptor. The Kentico MVC engine in 12 includes, for the first time, a full working implementation of MVC Widgets, Sections, and Editable Areas. They are totally worth the wait that it has been since earlier versions.

As much as everyone would love Kentico to just flip a switch and have the entire product converted to MVC from Web Forms, that just isn't technically possible. For that reason Kentico is taking a stepped approach to converting parts of the system at a time to MVC. The major focus of version 12 is to convert the drag and drop system for designing page content that Kentico has always had to be supported on a MVC site. And with this beta release Kentico is showcasing how far they come to achieving that goal.

 

Click to enlarge for Kentico 12 Page Builder

 

This feature is known as the Page Builder for MVC. The Page Builder allows developers to connect the admin tool edit and preview capabilities to the MVC live site. The way this works is that it allows developers to specify Editable Areas (along with two dependencies to some styles and JavaScript) at specific locations in their Views. Once the 3 lines of code are injected into the View, when the admin tool loads up a specific page inside of Kentico it presents the content author with the ability to define Sections of content, on a page in the tree, in the new Page tab for MVC. Once Sections are defined, content authors can then add Widgets in any way they like to a page. This is a powerful system that can easily be used to create full width column based content layouts, or two column, or x column based layouts without having to touch any code or any developer effort. 

The code you need to add to your view's is rather simple to enable this feature:

 

 

This probably sounds slightly complicated, but honestly it is not. I was able to play around with the system and easily add two or three sections that to a page in literally a few seconds. The above Editable Area layout results in a page rendering like so:

 

Kentico12 Page Builder Results

 

The key is that you can easily create multiple column layout (that should be responsive out of the box, if done right) with any code changes throughout the life cycle of a site.

 

Kentico 12 Page Builder Sections

 

Sections are again tied to partial views where you can totally control the html markup and end layout of your containers for placing widgets. You can have as many of these as you like.

 

Kentico 12 Sections Code

 

Now as far as Widgets go, there a few very basic ones included in the box (so far). Let's talk about that next.

 

MVC Widgets

Widgets are really the star of the show in the Page Builder in Kentico 12. They really translate to small snippets of partial views that can be added just about anywhere in your site.

 

Kentico 12 MVC Widgets

 

One of the big benefits of the second beta release of Raptor is that you can now have content governance around the placement of these widgets. Previously a widget could be and would always be available on every page of the site that had the Page Builder. This has changed in in beta 2.

 

MVC Widget Property Inline Editors

Below is an illustration of the first MVC Widget property editor, which Kentico has termed an Inline Editor in nomenclature and in code.

 

Kentico 12 MVC Widget Properties

 

What that means is that on the Page tab, these editors directly manipulate the content that the content author is showing/working with on the View (the controls that appear in the above image to change from 5 articles to 4 to 3 and so on...). This is done by placing a snippet of code on your full or partial View ahead of time on your MVC Live site. Then when the application loads inside of the Kentico admin tool, the Page Builder code fires, finds these Inline Editors and executes them. This can happen because all of the code required to run the editor is actually in your MVC live site (the partial view (with some required JavaScript), the view model, the model, and the controller). This is quite a drastic shift from previous Kentico functionality. Before the admin tool just had this type of property editor inside of the box. Now, developers will have to create their own Inline Editor's if they want to do something specific or custom for the widget (very basic editors will be included still). 

At first this really threw me because it is different than creating the custom form controls or portal style in-line widgets in the old world. So I decided to give it a shot to come up with my own. The process was not the most simple one in the world, but after about 2 hours I was able to come up with my own custom Inline Editor.

 

Kentico 12 Custom MVC Widget Property Editor

 

Pro Tip: If you are creating your own custom Inline Editor and the Page Builder does not appear at all in the Page tab of the admin tool. Open the console in your browser and look for a JavaScript error, it will show you what the problem is.

 

Kentico is also spending some extensive effort to document how these widgets and inline editors are created that should developers out a ton to understand the pattern and implement their own like I have. I'll try to post my code in a different blog post after this one, because there are multiple snippets required to make it all work. It's too big to place in this post (for now).

 

 

NuGet Packages

Remember when I mentioned above that the Raptor release was not suitable for production sites yet, well here is some proof. The updated K12 NuGet packages show as pre-release builds. To be fair, this was a change that is fundamental in version 12 overall, and is also part of the first beta.

 

Kentico 12 beta 2 NuGet Package list

 

You can take notice here that the Raptor build of Kentico is changing how some of the core MVC apis and libraries are shaping up. There is a simplification and unification going on by the platform team. Gone are the multiple Kentico.* packages to get your site functionality like Search, Membership, and others. The Kentico Libraries package now mostly replaces all of these. I like the change because it keeps the process simple. This a benefit to new developers to the Kentico platform who are familiar with MVC, but not yet Kentico.

 

Conclusion

That's all for now, as this post is already becoming longer than I originally envisioned. However, I really hope that you can see that Kentico Raptor is going to provide first class status for ASP.NET MVC development in Kentico. The new Page Builder feature will truly allow content admins to have drag and drop control over their editable areas where needed.

However, remember with great power comes great responsibility, you do not want to over use this functionality. The power of Kentico really rests in the structured content that the CMS offers. Having structured page content with content only page types is still my full recommendation (remember my opinion only, so take it for what it is worth). Page types allow you to enter content once, and re-use it across many Views (or pages). Widget based content is not really that re-useable, again this is by design and even true in the portal engine world.

I am excited about Raptor, and I hope that I have shown that it is a better box office success than Jurassic World: Fallen Kingdom. I think it will be.