Improving state of M2 front-end - Magento 2 Community Project

C O M M E R C E & M O B I L E S O LU T I O N S

Magento 2 Community Project Improving state of M2 front-end

BARTEK IGIELSKILEAD FRONT-END DEVELOPER

„Front-end devs should make front-end using

front-end oriented tools” …

Yeah, that’s my „wisdom”

LESS to SASS

LESS to SASS

Enno Stuurman @SpaarneTweet

• How to simplify code and refactoring? • How to get self-documenting code? • How to start reusing code without letting

components influence each other?

Frontend Development Methodology Naming convention + Styles achitecture

BEM Block + Element + Modifier

What is BEM? Component-based approach to web

development. The idea behind it is to divide the user interface into independent blocks.

BEM naming convention .block-name

.block-name__element-name .block-name--block-modifier

.block-name__element-name--element-modifier

Element

Modifier

Independent positioning

<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

Real life example Yey, more code!

https://goo.gl/BFJwHRmagento/module-contact/view/frontend/templates/form.phtml

Our patient:

<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('Magento\Contact\Helper\Data')->getPostValue('name') ?: $this->helper('Magento\Contact\Helper\Data')->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('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->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('Magento\Contact\Helper\Data')->getPostValue('telephone')) ?>" 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->escapeHtml($this->helper('Magento\Contact\Helper\Data')->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

<?php $_helper = $this->helper('Magento\Contact\Helper\Data');?>

<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>

Source - Refactored HTML elements count

31 - 19 CSS Class count

36 (20 unique) - 27 (15 unique)

Sort of… Roadmap

Magento UIIt should to provide ready to use

components, not only set of (little bit overcomplicated) mixins.

Rebuild „Blank” themeUsing Magento UI and our development methodology

Improve Frontools 100% replacement of CLI methods

related to front-end work

Estimated release time…

We need some help!Specify 3 points of pain in M2

and send them at [email protected]

Plase be specifyc! I.e. saying just „lack of documentation” sucks. Specify what part of app need

(better) docs.

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

Q & A Time!Let’s stay in touch: Twitter: @igloczek Blog: iglo.tech

[email protected]

Improving state of M2 front-end - Magento 2 Community Project

Technology

Transcript of Improving state of M2 front-end - Magento 2 Community Project