Helix Principles Architecture: Part 2

How to setup your project for front-end developers.

Advertisements

In my last post, I have mentioned some thoughts on how to create a simple solution structure using Helix Principles. In this post, I would like to drill down a bit further. We will talk about where to store your CSS/JS for every feature and how to store them in your solution.

We are living in a totally different space where you have all the dedicated team around yourself to provide you the HTML/CSS/JS files. If you look at the Habitat site and solution structure, you will see that all of the assets are stored under Theming. Basically, Habitat provides us a single instance of the project to store all the required CSS/JS.

However, if you are working with a team of frontend developers, they will be checking out the whole solution along with Habitat.Theming project. They will be working daily on that project or at least setting up a gulp builds to create a main.css or any .css files.

HOW WE CAN BETTER DESIGN A SOLUTION FOR OUR FRONTDEVS?

There has to be a better way, right? After all, we are geeks. Our job is to make it better.

In my experience, I have created all the features under the website project under project folder. Something like this:

Helix-Frontend-Solution-Structure

As you can see that for the frontend developers, all they have to check-in the files in this project itself. They can focus on the features listed here and push all the HTML/CSS/JS in. In this way, they are focused on one project only. So, does for the fonts for common and for each website:

Helix-Font-Solution-Structure

Some of you might argue that why don’t we create a separate project for it? You can do it, but it will create another dependency on the project itself. For the website project, all the assets live at one place (even the default HTML file).

Let me know what will you change and how I make it better?

#sitecore #helix

Author: Raj

Sitecore Enthusiast

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 )

w

Connecting to %s