Many frontend changes have been introduced in Magento 2. Those changes are changing the way developers think, plan and work during their development process. In this speech, Nenad talks about new files structure in M2, Javascript libraries and functionalities, CSS preprocessing and much more.

2. ● Built on HTML5 and CSS3 technologies
● jQuery out of the box (w jQuery UI)
● Preprocessing language
● LESS based Magento UI Library
● Out of the box Compiling engines
Hello, Magento 2!

3. Structure
Module files
app/code/Magento/<module_name>/view/frontend/
Theme files
app/design/frontend/<vendor>/<theme_dir>/Magento_<Module_name>/layout
”Layouts” / “Templates” / “Web”

7. Static files
Pub/static
Excluded from fallback mechanism
Files served from cache only
After new module has been installed, you need to clear “pub/static” folder
lib/web
Part of the Magento Framework
Contains LESS UI library and Javascript files

8. Magento Modes
Default
NOT optimized for production, static view files are cached
Developer
Static view files are not cached; they are written to the pub/static directory every
time they’re called
Production
Static files are cached and served from cache only

9. Theme
● Responsive Default theme
● No more “skin” folder
● Infinite fallback mechanism
● Few files required for theme to work
● Visual design editor

10. Create your theme
/app/design/frontend/<vendor>/<Theme_name>

11. Declare your theme
/app/design/frontend/<vendor>/<Theme_name>/theme.xml

12. Register your theme
/app/design/frontend/<vendor>/<Theme_name>/registration.php

13. Configure images
/app/design/frontend/<vendor>/<Theme_name>/view.xml
Create directories for static files
(just like you did in “skin” folder in M1)
/app/design/frontend/<vendor>/<Theme_name>/web/

15. Working with templates
●Root.phtml as root template for all pages in
application
app/code/Magento/Theme/view/base/templates/root.phtml
●E-mail templates inside Sales module
app/code/Magento/Sales/view/frontend/email

16. Overriding
code/Magento/Checkout/view/frontend/templates/cart.phtml
to
desing/frontend/<vendor>/<theme>/Magento_Checkout/templates/cart.phtml

17. Layouts
●What was once called “handle”, is now separated
layout file
●<container> , <referenceContainer>,
<referenceBlock>

18. <container name="container_name">...</container>
<referenceBlock name="block_name">...</referenceBlock>
<referenceContainer name="name">...</referenceContainer>

20. Extending vs overriding layouts
code/Magento/Checkout/view/frontend/layout/file.xml
to
<theme>/Magento_Checkout/layout/file.xml
vs
code/Magento/Checkout/view/frontend/layout/file.xml
to
<theme>/Magento_Checkout/layout/overide/<theme>/file.xml

21. CSS
● LESS Preprocessor
● LESS UI Library
● 2 compilation modes

22. Server-side Compilation
● Default compilation mode
● ONLY option in production mode
● Compilation is performed on the server, using LESS PHP Library

23. Client-side Compilation
● Available in Default and developer modes
● Files are compiled in browser, using LESS.js

24. //@Magento_import
● Magento-specific LESS directive
● files with the same name, from different locations can be
included
● Must be commented out with two slashes //

25. Questions?

26. Thank you! :)