This document discusses improving the front-end of the Magento 2 e-commerce platform. It describes refactoring the code of the Magento contact form to follow best practices like BEM naming conventions and separating concerns. The contact form code is simplified by reducing elements, standardizing class names, and improving formatting and readability. Roadmaps are proposed for rebuilding the blank theme using new UI components and improving front-end tools. Attendees are asked to provide specific feedback on pain points in Magento 2 to help prioritize projects.

1. COMMER CE & MOBILE SOLUTIONS
Magento 2 Community Project
Improving state of M2 front-end
BARTEK IGIELSKI
LEAD FRONT-END DEVELOPER

2. „Front-end devs should
make front-end using
front-end oriented tools”
…
Yeah, that’s my „wisdom”

3. LESS to SASS

4. LESS to SASS
Enno Stuurman @SpaarneTweet

5. • How to simplify code and refactoring?
• How to get self-documenting code?
• How to start reusing code without letting
components influence each other?

6. Frontend Development Methodology
Naming convention + Styles achitecture

7. BEM
Block + Element + Modifier

8. What is BEM?
Component-based approach to web
development. The idea behind it is to divide the
user interface into independent blocks.

9. BEM naming convention
.block-name
.block-name__element-name
.block-name--block-modifier
.block-name__element-name--element-modifier

10. Block

11. Element

12. Modifier

13. Independent positioning

14. <ul>
<li>
<a>
<span></span>
</a>
</li>
</ul>
.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
<ul class="menu">
<li class="menu__item">
<a class="menu__link">
<span class="menu__text"></span>
</a>
</li>
</ul>
.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
Typical code BEMed code

15. Real life example
Yey, more code!

16. https://goo.gl/BFJwHR
magento/module-contact/view/frontend/templates/form.phtml
Our patient:

17. <form class="form contact"
action="<?php echo $block->escapeUrl($block->getFormAction()); ?>"
id="contact-form"
method="post"
data-hasrequired="<?php echo $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?php echo $block->escapeHtml(__('Write Us')) ?></span></legend><br />
<div class="field note no-label"><?php echo $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?></div>
<div class="field name required">
<label class="label" for="name"><span><?php echo $block->escapeHtml(__('Name')) ?></span></label>
<div class="control">
<input name="name" id="name" title="<?php echo $block->escapeHtmlAttr(__('Name')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('MagentoContactHelperData')->getPostValue('name') ?: $this->hel
HelperData')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
</div>
</div>
<div class="field email required">
<label class="label" for="email"><span><?php echo $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="email" id="email" title="<?php echo $block->escapeHtmlAttr(__('Email')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('MagentoContactHelperData')->getPostValue('email') ?: $this-
ContactHelperData')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
</div>
</div>
<div class="field telephone">
<label class="label" for="telephone"><span><?php echo $block->escapeHtml(__('Phone Number')) ?></span></label>
<div class="control">
<input name="telephone" id="telephone" title="<?php echo $block->escapeHtmlAttr(__('Phone Number')) ?>" value="<?php echo $block->escapeHtmlAttr($this->helper('MagentoContactHelperData')->getPostValue('te
class="input-text" type="text" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment"><span><?php echo $block->escapeHtml(__('What’s on your mind?')) ?></span></label>
<div class="control">
<textarea name="comment" id="comment" title="<?php echo $block->escapeHtmlAttr(__('What’s on your mind?')) ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?php echo $block->escapeHt
>helper('MagentoContactHelperData')->getPostValue('comment')) ?></textarea>
</div>
</div>
<?php echo $block->getChildHtml('form.additional.info'); ?>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button type="submit" title="<?php echo $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary">
<span><?php echo $block->escapeHtml(__('Submit')) ?></span>
</button>
</div>
</div>
</form>
Source

18. <?php
$_helper = $this->helper('MagentoContactHelperData');
?>
<form class="form"
id="contact-form"
action="<?= $block->escapeUrl($block->getFormAction()); ?>"
method="post"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{ "validation":{} }'
>
<h2 class="form__header">
<?= $block->escapeHtml(__('Write Us')) ?>
</h2>
<p class="form__description">
<?= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?>
</p>
<div class="form__field field">
<label class="field__label" for="name">
<?= $block->escapeHtml(__('Name')) ?>
</label>
<input class="field__input"
name="name"
id="name"
title="<?= $block->escapeHtmlAttr(__('Name')) ?>"
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('name') ?: $_helper->getUserName()) ?>"
type="text"
data-validate="{ required:true }"
>
</div>
<div class="form__field field">
<label class="field__label" for="email">
<?= $block->escapeHtml(__('Email')) ?>
</label>
<input class="field__input"
id="email"
type="email"
name="email"
title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('email') ?: $_helper->getUserEmail()) ?>"
data-validate="{ required:true, 'validate-email':true }"
>
</div>
Refactored + formatted + BEM
<div class="form__field field">
<label class="field__label" for="telephone">
<?= $block->escapeHtml(__('Phone Number')) ?>
</label>
<input class="field__input"
name="telephone"
id="telephone"
title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('telephone')) ?>"
type="text"
>
</div>
<div class="form__field field">
<label class="field__label" for="comment">
<?= $block->escapeHtml(__('What’s on your mind?')) ?>
</label>
<textarea class="field__input field__input--textarea"
id="comment"
name="comment"
title="<?= $block->escapeHtmlAttr(__('What’s on your mind?')) ?>"
cols="5"
rows="3"
data-validate="{ required:true }"
><?= $block->escapeHtml($_helper->getPostValue('comment')) ?></textarea>
</div>
<?= $block->getChildHtml('form.additional.info'); ?>
<div class="form__actions actions-toolbar">
<div class="actions-toolbar__primary">
<input class="form__hidden"
type="hidden"
name="hideit"
value=""
>
<button class="actions-toolbar__button button"
title="<?= $block->escapeHtmlAttr(__('Submit')) ?>"
type="submit"
>
<?= $block->escapeHtml(__('Submit')) ?>
</button>
</div>
</div>
</form>

19. Source - Refactored
HTML elements count
31 - 19
CSS Class count
36 (20 unique) - 27 (15 unique)

20. <form class="form contact">
<fieldset class="fieldset">
<legend class="legend">
<span></span>
</legend>
<br />
<div class="field note no-label"></div>
<div class="field name required">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text"/>
</div>
</div>
<div class="field email required">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text"/>
</div>
</div>
<div class="field telephone">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment">
<span></span>
</label>
<div class="control">
<textarea class="input-text"></textarea>
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input />
<button class="action submit primary">
<span></span>
</button>
</div>
</div>
</form>
<form class="form">
<h2 class="form__header"></h2>
<p class="form__description"></p>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<textarea class="field__input field__input--textarea"></textarea>
</div>
<div class="form__actions actions-toolbar">
<div class="actions-toolbar__primary">
<input class="form__hidden">
<button class="actions-toolbar__button button"></button>
</div>
</div>
</form>

21. <form class="form contact">
<fieldset class="fieldset">
<legend class="legend">
<span></span>
</legend>
<br />
<div class="field note no-label"></div>
<div class="field name required">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text"/>
</div>
</div>
<div class="field email required">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text"/>
</div>
</div>

22. <div class="field telephone">
<label class="label">
<span></span>
</label>
<div class="control">
<input class="input-text" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment">
<span></span>
</label>
<div class="control">
<textarea class="input-text"></textarea>
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input />
<button class="action submit primary">
<span></span>
</button>
</div>
</div>
</form>

23. <form class="form">
<h2 class="form__header"></h2>
<p class="form__description"></p>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<input class="field__input">
</div>
<div class="form__field field">
<label class="field__label"></label>
<textarea class="field__input field__input--textarea"></textarea>
</div>
<div class="form__actions actions-toolbar">
<div class="actions-toolbar__primary">
<input class="form__hidden">
<button class="actions-toolbar__button button"></button>
</div>
</div>
</form>

24. Sort of…
Roadmap

25. Magento UI
It should to provide ready to use
components, not only set of (little bit
overcomplicated) mixins.

26. Rebuild „Blank” theme
Using Magento UI and our
development methodology

27. Improve Frontools
100% replacement of CLI methods
related to front-end work

28. Estimated release time…

30. We need some help!
Specify 3 points of pain in M2
and send them at
bartek.igielski@snow.dog
Plase be specifyc! I.e. saying just
„lack of documentation” sucks.
Specify what part of app need
(better) docs.

31. How to stay updated?
Twitter
@Igloczek <- it’s me :)
@SnowdogApps <- Snowdog (you don’t say!)
GitHub
https://github.com/SnowdogApps/magento2-theme-blank-sass
https://github.com/SnowdogApps/magento2-frontools
Magento Forums
https://community.magento.com/t5/Less-to-Sass-Community-Project/bd-p/less-to-sass

32. Q & A Time!
Let’s stay in touch:
Twitter: @igloczek
Blog: iglo.tech
bartek.igielski@snow.dog