As many Sitecore developers know, the annual Sitecore hackathon approached and developers all over the world spent 24 hours creating all kinds of wonderful things. This year I decided to ask a few of my close friends and work colleagues if they would like to form a team and take part in the Sitecore hackathon; they accepted the challenge.

This blog post is about the module we built as a team and the experience taking part in my first Sitecore hackathon.

Choosing what to build

Every year the organisers at Sitecore send out an email just before the start of the hackathon. This year the options were:-

  • Azure Paas Module
  • Sitecore Experience Accelerator
  • Habitat
  • Data Exchange Framework

Each option had a brief description of the expected outcome.

We looked at the options and had to consider which would be best suited for our team considering the combined skillset which consisted of a back-end and two front-end developers.

With this in mind we thought the best option for our team would be Sitecore Experience Accelerator (SXA) and our objective was: “With its components based architecture SXA is the ideal candidate for a module. Give you creativity a boost and try to develop a module that can be used in conjunction with SXA.”

Planning

To get started with the task at hand, we grouped around a whiteboard and started writing down some of our ideas and what could we achieve within the next 24 hours.

After bouncing ideas off each other we decided to revisit a hotspot gallery component that we created for a client in a previous project but this time we wanted to use different technology and change our approach.

Functional Requirements

We wanted the component to be as user friendly from a content editor’s perspective as possible, using the Experience Editor and the user experience on the front-end. To achieve this we set out a few simple goals:

  1. Content editors can add the component to the page in Experience Editor mode
  2. The content could be updated in Experience Editor view
  3. Adding a hotspot to the image could be enabled and disabled
  4. Clicking on the image would add a hotspot to the location the user had clicked on
  5. The component has to render quickly to the page

To achieve these functions we had to figure out the best approach and what technology would best suit our requirements.

Technologies Used

The last time we built the hotspot gallery we had a restriction of using older technology ASP.NET Web Forms and ES5. With our functional requirements in mind we decided on the best technology we could use to meet our goals. The technologies used were:

  • MVC
  • Restful API
  • ES6
  • Babel

With our planning in place, functional requirements gathered and our technology stack in place this allowed us to focus on our approach.

Approach and Build

With only 24 hours to complete and submit our SXA component we needed to focus our efforts on a few key areas.

SXA Sitecore Set up

Before we could start doing anything in Sitecore we had to have a crash course in SXA and familiarise ourselves with the object architecture and how we could add our component into the mix.

So we could work more efficiently and get as much ground work done as possible, we decided to dedicate this task to Lea one of the front-end developers on the team. Lea would do all the Sitecore object setup we needed and document everything into the component guidelines; this would feed directly into our document submission later on.
A brief example of our Sitecore template setup:

Hotspot sitecore object

Hotspot Sitecore field types

Front-End Build

Our approach to the front-end build was to split a number of tasks between myself and Lea. Our task list looked a little something like this:

  • Setup solution
    • Front-End folder structure
    • Automated task runner
    • Babel transpiler
  • HTML the component
  • Style the component using B.E.M
  • Add JavaScript functionality
  • Enable and disable hotspot functional in Experience Editor
  • Post data to the API to plot x and y position back to Sitecore

We cherry picked items from our task list which would have the least impact or block the front-end build. I took the solution setup and JavaScript functionality (this was a quick local setup), Lea focused on the HTML and styling and worked in a codePen until the solution was ready to drop the code in and run our task runner.

Posting data back to the API had to take a back seat so we did do some blind coding with the hope it would just work.

Back-End Build

The back-end approach was covered by Jon. Jon created a task list similar to the front-end. The back-end task list looked a little something like this:

  • Create cshtml files
  • Bind component data
  • Create Restful API to enable the front-end to post coordinates
  • Dynamically create a Sitecore content item with data that the front-end provided

Clean-up

After many hours of development, eating mountains of popcorn, trying to stay awake, fight off illness and trying to figure out what Meat Loaf wouldn’t do for love we got to our clean-up phase. This was mainly for front-end because the back-end section of work was a little out of our skillset (we’re learning slowly).

We reviewed each other’s code and corrected code smells and tried to tidy things up a bit as best we could given we didn’t have a great deal of time remaining and we still hadn’t completed our documentation.

Documentation

The final part of the build was to create our documentation and video ready for submission. Luckily we already had this task in mind when carrying out our others so wrote our documentation as we went through the build steps.

We collated our documentation together and structured it ready for submission. We created the demonstration video and submitted it to my YouTube account.

Final Production

After many many hours of hard graft, trying to fight man flu and staying awake we managed to complete our objectives and submit our hackathon module to the Sitecore dropbox.

You can see how the module works from the YouTube video I uploaded. There isn’t any voice over as I sounded like death that day. There are however some random sounds because I didn’t realise the microphone was recording… Duh!

You can find the full codebase on the GitHub repo.

Here’s a few screenshot of the final production.

Contributors

Matthew Neil – https://github.com/Phoen1x84 (Front-End Developer)
Jonathan Robbins – https://github.com/islaytitans (Back-End Developer)
Lea Bialachowski – https://github.com/leaski (Front-End Developer and Logo Designer)

A massive thank you to Jonathan for doing the back-end work and Lea for helping out with the front-end and designing our team logo :).

To the rest of you, thanks for reading and happy coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s