Skip over navigation
RSS

OroCommerce Blog

Frontend website design

New Frontend Website Design Experience Improvements

The upcoming new release of OroCommerce and OroCRM will give more powers to frontend website design developers when they customize or develop new modules for their Oro-based solutions. These new improvements dramatically simplify working with CSS styles, speed up routine development tasks, enable cross-browser compatibility for modern CSS, and streamline code inspection and debugging.

Let’s quickly go over each one of these.

Webpack Watch

We added support of Webpack 4, which we will also continue to expand in the nearest future. You can now use Webpack watch mode to automatically recompile and rebuild your Oro frontend output whenever you change any application files. This helps streamline the development process and ensure real-time accuracy of the frontend output. Consider the following example of Webpack options usage:

Frontend Website Design - Webpack

Source Maps

Source maps are well-known and extremely helpful tools for debugging client-side code in production. Now they are enabled out of the box in OroCommerce and OroCRM. In short, source maps allow you to trace your compiled CSS files from the browser back to their original sources, which you can then easily investigate and debug.

Source maps are also essential for effective use of CSS preprocessors, such as Sass used by Oro products, as they offer the most practical way to read and debug pre-processed CSS code by mapping it to the original SCSS sources and other work files.

Overall, using source maps in your Oro-based solutions will make developing and updating production code safer, faster, and more consistent.

Frontend Website Design - Source Maps

Browserslist

Browserslist is another helpful tool utilized to enhance the frontend website design experience in Oro products. It takes care of cross-browser compatibility of your code by abstracting away vendor CSS prefix routines from the developer. Basically, it shares your list of target browsers with other frontend tools, such as Autoprefixer, which in turn automatically adds necessary CSS prefixes for those browsers. For a quick start, the browserslist in Oro comes preconfigured according to the system requirements. Welcome to almost effortless cross-browser compatibility in Oro products.

Twig Inspector

Finally, we have Oro Twig Inspector, which allows you to instantly look up twig templates and blocks used for rendering HTML pages right from your frontend output. You simply click on a UI element and see its original template opened by your favorite IDE (the default is PhpStorm) in the same browser window. As a result, you can now easily navigate from your rendered UI elements in the browser to their original sources, which significantly speeds up development and customization of OroCommerce and OroCRM applications. Importantly, Oro Twig Inspector works for both the user-side and admin-side frontend.

Frontend Website Design - Twig Inspector

Aside from these major frontend website design experience (DX) improvements, more is coming for Layouts. We’ll be sure to keep our community aware of new advancements so be sure to come back to our blog! so keep in touch!

Back to top

You will be redirected to [title]. Would you like to continue?

Yes No