What is Sitecore SPEAK?

By talking to people, I realize there were a lot of misunderstandings about Sitecore SPEAK and I will try to clarify them. Please note everything you read in this post is unofficial and written under my own name.

SPEAK, what does it mean?

  • S Sitecore
  • P Process
  • E Enable
  • and
  • A Accelarator
  • K Kit

Mhh quite enigmatic so far, so here is my definition:

SPEAK is a component based framework leveraging the Sitecore Rendering Engine.

What SPEAK is not?

SPEAK is not a javascript framework. Even if it relies a lot on Javascript, SPEAK is a framework to write Full-Stack Components. The javascript part is just a part of the component definition.

SPEAK is not dedicated to build public website for now

What is a Component in SPEAK?

When you build a large website, for the sake of consistency, you always try to re-use the same elements over and over again inside your pages. A menu, a logo, a layout structure, a button,...

We can even go further by saying, if you build more then one website, you always try to re-use the same "elements". It clearly reduces over time the "design", the development time and the cost of building websites or a web applications.

"Because", at the end, all which really matters for a client will be the website's look and feel (the correct use of its branding) and the "tasks" the website/web application performs.

Taking this into account, it clearly means a Component needs to be:

  • re-usable: consistent behaviours accross pages
  • isolated: should not rely on other components
  • generic: in order to be re-used in different contexts.

Ok, that's cool but what is it in a sitecore point of view ?

In SPEAK, a component is defined by:

An Item (a View Rendering)

It must contain:

  • A name
  • A path to a Razor File
  • A link pointing to its parameters template.

A Parameters template

Used to define the parameters of your Component.

eg. For a simple DIV component, a property "isVisible" could say if the DIV should be visible or not in the page.

A Razor File

This is where you write your HTML markup you want to be generated in the page. This generation could, of course, depend on the parameters set in the Component.

and optionnally

A Javascript File

There is no way you could possibly create a RICH client interface without the use of Javascript.

A CSS File

To define the style of your component.

NOTE It is a good practice to style your components as generic as possible. If you define a "tooltip" component, I would advise you to let it as "blank" as possible. The style defined in your component should be enough clear to let the users "understand" the tasks he is trying to perform.

By doing so, you would allow the end-user the possibility to apply his own style later. How many time I end up not using a javascript plugin because the "style" was way too much opinionated. I guess you do not want your components to give this impression.

Can Component talks together?

Of course, otherwise SPEAK would be meaningless.

How?

2 possibilities.

1. Bindings

Each parameter can be "bound" to another component parameter.

2. PageCode

A PageCode can be seen as a Component manager for your page. In SPEAK, you will have a server PageCode and a client PageCode.

As you can imagine, both of these points would need their own blog post to explain what you can achieve with them. For now, just remember you will use the Bindings and the PageCode to glue all your components together in order to create your UI Logic.

And that's all

Yes, that's it. SPEAK is "just" a Component Based Framework for Sitecore. Obviously, if you have already installed Sitecore 7.1, you know they are a bit more to cover and I will address this step by step in other blog posts.

comments powered by Disqus