7 Elements of a Demandware Front-End Development Code Review
By Shane Soifert, Technical Lead
I’ve already discussed five focus areas for back-end development code review in Demandware, so now I’d like to discuss front-end development code review.
Front-end code reviews play an important role in the development of eCommerce sites. Code review ensures that the user experience design is implemented properly. And, because page components are frequently re-used through the site, identifying code issues saves a lot of development time and money.
To help you conduct better code reviews, I’ve laid out seven areas to focus on that I’ve found useful as a front-end Demandware developer.
As mentioned in my previous post, when conducting a code review, I advise breaking code apart into sub-sections. Because reviews become less effective as the inspector loses focus, a good rule of thumb is no more than 500 lines in an hour, not including pipeline line coordinates.
Comprehensive Layouts
The first focus area to consider doesn’t even deal with the code. Before looking at the code, you need to make sure the page styling matches the approved comprehensive layouts (i.e. comps). It’s also a good strategy to check a few different test cases as styling and logic can be broken in certain cases.
Style Guide
Another crucial task is to compare a developer’s styling with the style guide. The styling guide must be followed so code can be easily maintained. Styling areas to review include color hex values, fonts and sizes, headings, link colors and sizes, form elements and layout, tooltip and modal UI elements, image dimensions, and dropdowns. For many of these styling rules, mixins and static re-usable code should be used.
SASS/CSS
Check for anything “strange” or “hackish”. This is crucial for clean, reusable, performance-driven code. Use linters such as CSS Lint in a manual or automatic fashion (e.g. Gulp integration) to find anything that’s incorrect. The Demandware style guide has quite a few tips for developing code that reviewers should follow. If you use SASS, best practice calls for making sure developers are building partial SASS files for large section(s) that require specific styling changes. A few examples include:
- Browser specific hacks (unless necessary)
- Consistency of style reusability
- Clear naming convention for classes and IDs
- Documentation for styling sections
Duplication of Styles
If the project uses only CSS, make sure styles aren’t being duplicated. Colors, fonts, and sizes need to be consistent, but you also need to make sure generic styling rules can be applied to other elements using the same styles. If the project uses SASS, it’s easy to maintain rules across all styling sheets. SASS incorporates the use of mixins and variables that set the same styling rule across the site.
Specificity
Developers need to check for classes that have the same styling rules to see if they can be re-used. IDs should only be used for specific, single-use styling blocks. Also the use of “!important” should be analyzed to see if another Javascript is overwriting the style sheet rules, causing the “not important value” to be added.
Template Structure
ISML template structure should be reviewed since developers often add or remove elements. Reviewers should look for improper nesting, usage of legacy elements (e.g. <b> elements), over-usage of elements (e.g. multiple nested <p> elements for padding instead of using styling padding), etc.
Javascript
Javascript best practices are quite extensive. A handy rule to follow is to use linters such as JSHint so you can find syntactical errors across Javascript files. Here are a few items to look for:
- Is the Javascript page specific code external to the template?
- If using partials, has the code be added to the correct partial file?
- Proper JS syntax (use linters as stated before).
- The performance of Javascript during page loads (e.g. page element stacking).
Closing Thoughts
These seven focus areas for a front-end code review in Demandware are where you should start. They provide a solid base for a reviewer to catch styling and errors, prevent complex styling rules and duplication of styles, as well as fix poor design practices.
If you have any questions about how development best practices can enhance a website project, please contact LYONSCG.
Shane Soifert is a Technical Lead on the LYONSCG implementation team and has been building Demandware websites since 2011. He loves nothing more than enjoying the ocean in the summer and skiing or snowmobiling in the winter.
