Bringing more modern frontend goodness to Magnolia

Published on November 17, 2015 by Guest blogger



 

Once upon a time there was CSS. It was plain and wonderful and everyone said it was good. But as projects grew in size the limits of CSS became clear. Heroic developers who were pushing the frontiers of what was possible struggled with massive selector lists and tangled nests of code that both obscured structure and hampered maintainability.

From this struggle, Sass, Less andother CSS pre-processors were born. These tools gave you ways to structure, organize and simplify their CSS. Now, nearly a decade after Sass was introduced, there are many other tools to make frontend work easier and faster.

Grunt and gulp are two of these powerful tools. They make frontend work so much easier that no developer who knows them would want to leave them out of a project. But in the past, you couldn’t use them inside of Magnolia’s development environment. Yes, you could use an external build script, but this isn’t a clean or easy way to add Grunt and gulp to your deployment process. About a year ago, the team at Arvato started investigating an integrated solution.

We wanted an easy solution to integrate the build process in our deployment process without using external tools other than Maven. We also wanted the solution to fully integrate Node.js – which would give us use Bower, gulp, Sass, Less, Grunt, require.js, watch tasks and more. It was also important that the solution:

  • didn’t require many steps to install;

  • would be compatible with MTE and STK;

  • would work in any IDE without requiring starting Maven processes.

Our solution was to use the frontend Maven plugin to install Node.js inside of our theme module. Now we can configure goals via Maven. In our case, we use gulp to build our projects, but it is also possible to use Grunt or other tools. We can define all node modules in our package files and use Bower to get vendor scripts from elsewhere. It is also possible to setup watch tasks to use gulp tasks without using Maven.

 

 

Conclusion

We now have a modern frontend tool chain running inside of Maven that is flexible enough to work in a lot of ways and really makes development easier. Because of the full integration, it is easy to deploy and doesn’t require you to check generated code into your Git repositories. You can use what you want from Node.js without touching anything inside Magnolia, and you can use any IDE that you like. If you don't want to compile with Maven, you can still run Grunt/gulp the way you're used to.

There is still more work to do on the solution. We have other approaches to test and still a lot of open todos. We’re very happy for your questions and for feedback on our solution. Maybe together we can find a way to be heroes that make development in Magnolia much easier.

 

Marvin Kerkhoff

Marvin Kerkhoff is an expert Magnolia developer who is the author of the Deadlink and Form2DB apps. He is the Manager of E-Business Solutions at arvato Systems Switzerland AG, a Magnolia partner located in Zürich.



Comments



{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Guest blogger

Magnolia has an amazing community of partners and clients, among them quite a few wordsmiths. From time to time, they put their expertise into blog posts and share them on this platform.


See all posts on Guest blogger

Demo site Contact us Free trial