Sitecore SPEAK 2.0 Component vs SPEAK 1.1

With Sitecore 8.1 we get access to a brand new version of SPEAK, the shiny SPEAK 2.0.

In this blog post we will look at creating a new SPEAK component using the 2.0 framework. We will compare the same SPEAK component built against version 1.0 and 2.0 to see the differences the new framework makes to development.

Its worth noting that SPEAK 1.1 can still be used within Sitecore 8.1. But a SPEAK application has to be fully built against a single SPEAK version, you can’t mix components of different versions.

Enabling SPEAK 2.0 in a SPEAK application

To use the new version of SPEAK, within the PageCode of your SPEAK application the SpeakCoreVersion property has to be set to Speak Core 2-0. This setting will load in the SPEAK core javascript files for SPEAK 2.0 into your application.

SPEAK 2.0 Page Code

All SPEAK 2.0 components within the version 2 folder in the Business Component Library and sit alongside the version 1 files. “sitecore\shell\client\Business Component Library\version 2\Layouts\Renderings”.

Within Sitecore Rocks, SPEAK 2.0 components can be identified by the SPEAK Core 2-0 tag in the add renderings dialog.

SPEAK 2.0 Components

Custom SPEAK components

So onto the main subject of this blog post, creating a new custom SPEAK component with SPEAK 2.0. The code samples below are of a Rich Text Editor component built against both SPEAK 1.1 and SPEAK 2.0.

SPEAK 1.1 Component

Cshtml File

This is when the HTML is defined and properties from our parameter template for component in Sitecore are mapped into attributes on our control.

In this example we are getting parameters such as the height from the parameter template in Sitecore using rendering.GetString(“Height“, “Height“, string.Empty); and setting the value into a data attribute rendering.Attributes[“data-sc-height“].

Javascript File

We firstly use Require.js to import our JavaScript dependencies.

After the standard SPEAK component framework mark-up, we initialize the model for the component, setting each of its properties to null.

In the view initialize function we need to set each model property from the data attribute we created in the cshtml.

SPEAK 2.0 Component

With SPEAK 2.0 much of the heavy lifting and plumbing code is handled by Sitecore SPEAK, we can concentrate more on our component logic.

Model

The biggest change between 1.1 and 2.0 is the inclusion of a server side model. This model represents our rendering parameters for our component. We inherit from the CollectionBaseRenderingModel base class and create a property for each of our rendering parameters, matching their name.

Within Sitecore Rocks for our component we can specific the class in the model field.

Cshtml File

As you can see in the Cshtml file it is much cleaner. Sitecore SPEAK is handling all the plumbing between our parameter template and our model.

We simply need to specify our @model to our model class. All properties will be populated by Sitecore at runtime.

We can require in our JavaScript for the component. Here I’m removing the standard location that Sitecore looks for my JavaScript, and re-adding the reference in a custom location. I do this not to clash with Sitecore default components.

JavaScript File

With the JavaScript code file the syntax has changed quite a bit. Again Sitecore SPEAK is handling a lot of the plumbing code for us. We no longer need to wire up each of the model properties ourselves. Sitecore will automatically populate each property for us.

The way properties are also accessed in a different way. In SPEAK 1.1 we had to access properties via the view model E.g. this.model.viewModel.height(). In SPEAK 2.0 this has been simplified to this.Height