8

Does anyone have a Frontend development/prototyping process/workflow that has proven to be effective and efficient?

I have multiple sites running on Sitecore. We are also MVC based.

As a Frontend developer, we use a Frontend toolkit that is used to Prototype the HTML, CSS, and JavaScript. This is built using Grunt Server and Node.js. This was built for us by a vendor.

I'm having two issues with this toolkit.

  1. Every time we brand the project, the FE Tool Kit needs to be reinstalled. It can’t be just copied over because the file paths are too long. The install is problematic because the NPM does not consistently get and install the same module versions. So there is often, hours of troubleshooting Grunt server and build errors.

  2. The development workflow is difficult in regards to how we work with the BackEnd developers. Currently, the flow is like this: Front End makes the HTML, CSS, Javascript. Hand off to BackEnd. BackEnd adds in all Sitecore functionality in the project (outside the FE Tool Kit). This is a problem because if the BackEnd developers make an HTML change to a file, it is not reflected back in the FE Tool Kit. Likewise, if a Front End Developer needs to make a simple change, it must be done in the FE Tool Kit then communicated to the BackEnd developer who must then integrate it with the current .cshtml files. It’s a clunky process!

Does anyone have a Frontend development/prototyping process/workflow that has proven to be effective and efficient?

Improve this question
2
  • Depends very much on what you already have, and what you find to be the shortcomings on your current setup. I have worked with a setup that tried to better ecompass FE and BE development flows - I blogged about it here (but in little detail). For now, this link is the best answer I can give you. intothecore.cassidy.dk/2016/07/…
    – Mark Cassidy ♦
    Mar 14 '17 at 0:10
  • I would suggest looking into the Technical Preview of JSS - jss.sitecore.net it could become a viable option very soon.
    – David Walker
    Oct 23 '17 at 17:12
3

I'll outline what we do as it's working quite well for us:

  1. Create a Style Guide which is a simple page in Sitecore that lists all components available to content editors.

  2. Use Gulp with Yarn (avoids issues with versions you get with NPM) SASS (BEM Style), JavaScript and then HTML in our components (MVC views). Gulp handles pre-processing of the SASS and minifies the CSS and JS before deployment, plus a bunch of other things such as creating sprites from individual images.

The Style guide allows developers and content editors to see how components look and if changes are needed they can be made in the SASS files or MVC views and then seen on this page quickly.

We don't build a front-end only version of the Site and then move this into Sitecore. In my experience this is asking for trouble as back-end and front-end developers need to work together to implement Sitecore compatible solutions to building the Site. Although we use MVC and you have a lot of control over the HTML and CSS/Js there are always some considerations/changes needed when working within a CMS.

All the front-end code sits within the Solution in Visual Studio, organised on a per-site basis. We have created a build script that builds the site and front-end developers can run it without them needing to open up Visual Studio.

We also separate the deployment of the CSS/JS/Image files out into it's own Octopus package so we can deploy it separately to the code to our environments.

Hopefully this gives you some ideas on a different approach.

Improve this answer
3
  • How does Front end test the changes (i.e. do they need to install sitecore)?
    – Nil Pun
    Oct 19 '17 at 2:58
  • Yes they need to install and run Sitecore locally in order to see their changes applied but they can just run gulp to create a new version of their css/js/images. With the new headless and jss/react approach in 9 this wouldn’t be required though.
    – Adam Seabridge
    Oct 19 '17 at 7:24
  • 1
    If you don't want to worry about front-end team running Sitcore, or maybe they are running Mac and do not want to use VMs - you might want to look into Feydra by Hedgehog: teamdevelopmentforsitecore.com/Feydra
    – jammykam ♦
    Oct 25 '17 at 2:47
0

I would suggest you to have a look at Sitecore Experience Accelerator.

"SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example: the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates"

This does help different teams to work in parallel. I would suggest you to review this link with further information

Improve this answer
1
  • just make sure you reply back whether this or other answers helped you
    – Diego
    Mar 13 '17 at 21:58
0

I would try and port the front end tool kit into a Visual Studio solution so it can sit along side your backend code. This way you won't have the disconnect between the two ways of working.

The only thing is you'll have to get your front enders using Visual Studio -the front end guys I work with don't have a problem with it.

You can easily set up the grunt tasks to run in Visual studio to compile or your assets and publish them out to your Sitecore website. If take a look at Habitat - there's already some examples there-https://github.com/Sitecore/Habitat

Also take a look at this blog on front end development with Sitecore -might be something useful to help with your work flow.

https://mattneil.co.uk/2016/02/29/sitecore-frontend-approach-quick-start-guide/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.