How Magento Front-end is Going from Zero to Hero - Magento Imagine 2017

2. How Magento
front-end is going
from zero to hero

3. Alex Somerville
Front-end Practice Lead of Demac Media
Bartek Igielski
Lead Front-end Developer at Snowdog

4. What change over a year
in Magento 2 front-end?

5. In core code
No significant changes
In community
Few interesting projects
and lots of talks

6. How about changing Magento core?
Backward compatibility
vs
Radical changes

7. Solution partners and big budgets
vs
Smaller merchants needs
How about changing Magento core?

8. The community

9. I’m looking to get involved in the
Magento FE community, but your name
seems to be the one I ever see online!
Jake Stubbs from Ampersand

10. Awww… that’s nice!

11. But… We are terrified too.

12. Moving from LESS to SASS

13. 0
25
50
75
100
125
2012 2013 2014 2015 2016 2017
SASS LESS
Source: Google Trends

14. Market share
2015 2016
Sass
64.0%
Less
15.2%
Stylus
3.8%
No Preprocessor
15.0%
Other
2.1%
Sass
63.39%Less
10.14%
Stylus
2.91%
PostCSS
8.31%
Other
1.55%
No
Preprocessor
13.64%
Rework
0.06%
Source: The State of Front-End Tooling -

15. 5% decrease to 2015 in LESS preprocessor usage
Only 35% of voters feel comfortable using LESS
71% of voters feel comfortable using SASS

16. LESS drawbacks

17. Variables are lazy loaded and do not
have to be declared before being
used
// LESS Code
@variable: red;
body { color: @variable; }
@variable: blue;
// CSS Output
body { color: blue; }

18. Ability to chain mixins
// LESS Code
.mixin() { /* 1 */ }
.mixin() { /* 2 */ }
.mixin() { /* 3 */ }
body { .mixin(); }
// CSS Output
body {
/* 1 + 2 + 3 */
}

19. Weird conditional statements
.mixin() when (condition) { … }
selector when (condition) { … }
selector {
& when (condition) {
…
}
}

20. SASS advantages

21. Performance
Styles compilation
LESS SASS + Autoprefixer

22. Execution order like in structural programing
Strict use cases = less magic in code

23. if / for / each / while
@if $var == first {}
@else if $var == second { } @else { }
@for $i from 1 through 3 { }
@each $item in $map { }
@while $i > 0 { }

24. Moving from Grunt to Gulp

25. 0
25
50
75
100
125
2012 2013 2014 2015 2016 2017
Grunt Gulp
Source: Google Trends

26. Market share
2015 2016
Gulp
38.4%
Grunt
24.2%
NPM
2.8%
Broccoli
13.2%
Other
4.3%
Don't use any
17%
Gulp
43.69%
Grunt
11.75%
NPM
25.94%
Other
4.54%
GUI App
1.97%
Don't use one
10.97%
Make
1.15%
Source: The State of Front-End Tooling -

27. Styles compilation
It’s not just SASS to CSS

28. Child themes and modules
Reusable code and higher modularity

29. Code linting
Static analysis of source code

30. PostCSS
Autoprefixer
CSSNano
and 250+ plugins more

31. Hot reload

32. ES6 support via Babel
Modern Javascript syntax

33. Frontools roadmap
• Bower / JSPM / NPM / Yarn modules support
• Better JS linting
• Full replacement of setup:static-content:deploy
• Integration with PHP Code Sniffer

34. What’s next?

35. BEMify current Blank theme
Possibly simplest option, but still extremely
time consuming and doesn’t guarantee great
success or bright future.

36. New theme created from
scratch on top of UI
components
High modularity, reusable code, with external
documentation.

37. Go headless and use Magento only
as API service
It’s like adding a wall, moat and dragon
between Magento and your front-end code.
You can easily follow bleeding edge front-end
technologies.

38. Community power
Are open source projects our future?

39. Meanbee
Magento 2.x
• CSS Preload
• SVG Helper
• Web App Manifest
• Service Worker
Magento 1.x
• Progressive Web
Application
• SVG Helper
• Theme Skeleton
• Boilerplate Front-end Build
Tools

40. Snowdog
Frontools
• 16 000+ downloads
• 170+ stars on Github
• 398 commits
• 52 releases
SASS port „Blank” theme
• 11 000+ downloads
• 160+ stars on Github
• 424 commits
• 21 releases

41. How to get involved?

42. Everything about Magento
#realmagento
Magento Front-end
#magefront

43. Magento 2 Github
github.com/magento/magento2

44. Magento Community Forum
community.magento.com
Magento StackOverflow
magento.stackexchange.com

45. Frontools
github.com/SnowdogApps/magento2-frontools
SASS „Blank” Theme
github.com/SnowdogApps/magento2-theme-blank-sass

46. Q & A