Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Less & RequireJS - Frontend Development in Magento 2

1,157 views

Published on

During my lightning talk at the Magento 2 Seminar in Utrecht, Netherlands, I talked about the benefits of Less and RequireJS inn Magento 2.

Published in: Internet
  • Be the first to comment

Less & RequireJS - Frontend Development in Magento 2

  1. 1. Frontend Development in Magento 2
  2. 2. Arjen Miedema twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
  3. 3. Magento 2 Arrived!
  4. 4. Arjen Miedema twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
  5. 5. - Ever used Magento’s RWD theme? Then you met SASS - SASS !== LESS - Requires NodeJS, easy to install - Use variables, nested styles, functions, etc. - Watch usefull tutorials online on YouTube Less
  6. 6. nav { margin: 50px auto 0; width: 750px; ul { padding: 0; margin: 0; li { display: inline-block; &:hover { background-color: #5e5b56; } } } } Less
  7. 7. nav { margin: 50px auto 0; width: 750px; height: 45px; } nav ul { padding: 0; margin: 0; } nav ul li { display: inline-block; } nav ul li:hover { background-color: #5e5b56; } Less
  8. 8. // // Primary button // --------------------------------------------- .action-primary { .lib-button-primary(); .lib-css(border-radius, @button__border-radius); } Less
  9. 9. .lib-button-primary( @_button-line-height: @button-primary__line-height, @_button-width: @button-primary__width, @_button-margin: @button-primary__margin, @_button-padding: @button-primary__padding, (..) ) { .lib-button( @_button-line-height: @_button-line-height, @_button-width: @_button-width, @_button-margin: @_button-margin, @_button-padding: @_button-padding, (..) ); } Less
  10. 10. .lib-css( @_property, @_value, @_prefix: 0 ) when (@_prefix = 1) and not (@_value = '') and not (@_value = false) and not (extract(@_value, 1) = false) and not (extract(@_value, 2) = false) and not (extract(@_value, 3) = false) and not (extract(@_value, 4) = false) and not (extract(@_value, 5) = false) { -webkit-@{_property}: @_value; -moz-@{_property}: @_value; -ms-@{_property}: @_value; } Less
  11. 11. .example-button-4 { .lib-button-primary(@_button-margin: 3px); &:active { box-shadow: inset 0 3px 1px rgba(0,0,0,.29); } &.example-button-5 { .lib-button-s(); color: #fff; &:hover, &.active { color: #fff; } } } Less
  12. 12. RequireJS
  13. 13. RequireJS - Magento now uses AMD (Asynchronous Module Definitions) - Easily manage JavaScript dependencies - Asynchronous loading === faster page load - JavaScripts are not initialized via layout XML files Thanks to Filip Svetličić (Watch on YouTube)
  14. 14. RequireJS <html> <head> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script src="js/main.js" data-main="main"></script> </head> <body> <div class="wrapper"> (...) </div> </body> </html>
  15. 15. RequireJS require.config({ baseUrl: 'js/lib', paths: { // the left side is the module ID, // the right side is the path to // the jQuery file, relative to baseUrl. // Also, the path should NOT include // the '.js' file extension. This example // is using jQuery 1.9.0 located at // js/lib/jquery-1.9.0.js, relative to // the HTML page. jquery: 'jquery-1.9.0' } });
  16. 16. RequireJS require.config({ map : { '*' : { 'jquery': 'js/jquery-1.12.0' }, 'jquery-bxslider' : { 'jquery': 'js/jquery-1.9.1' } } });
  17. 17. RequireJS <input id="search" data-mage-init= '{"quickSearch":{ "formSelector":" #search_mini_form", "url":"http://magento2.dev/search/ajax/suggest/", "destinationSelector":"#search_autocomplete"} }' type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup= "false" aria-autocomplete= " both" autocomplete="off"/>
  18. 18. RequireJS { "quickSearch": { "formSelector":"#search_mini_form", "url":"http://magento2.dev/search/ajax/suggest/", "destinationSelector":"#search_autocomplete" } } var config = { map: { '*': { quickSearch: 'Magento_Search/form-mini' } } }; Loads file: vendor/magento/module-search/view/frontend/web/form-mini.js
  19. 19. RequireJS define([ 'jquery', 'underscore', 'mage/template', 'jquery/ui', 'mage/translate' ], function ($, _, mageTemplate) { 'use strict'; // Here is all JavaScript to handle the search autocomplete });
  20. 20. RequireJS <script type="text/x-magento-init"> { "*": { "mage/cookies": { "expires": null, "path": "/", "domain": ".www.mydomain.com", "secure": false, "lifetime": "3600" } } } </script>
  21. 21. RequireJS <script type="text/x-magento-init"> "#main-container": { "navigation": "{ navigation-json-configuration }", "accordion": "{ accordion-json-configuration }" }, "*": { "pageCache": "{ page-json-configuration }" } </script>
  22. 22. http://gruntjs.com/
  23. 23. http://knockoutjs.com/
  24. 24. More Information Magento 2 & Less: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css- preprocess.html Magento 2 & RequireJS: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js- resources.html http://devdocs.magento.com/guides/v2.0/javascript-dev- guide/javascript/js_init.html
  25. 25. Thanks!

×