New front end development tools are popping up like mushrooms. There’s Grunt and Gulp, the powerful JavaScript task runners for automation, there’s CSS preprocessors LESS and SASS for making your CSS more maintainable, and there’s the amazing JavaScript frameworks like AngularJS and Backbone, just to name a few.
These are the tools that help us build fast, responsive and maintainable web applications that last, and it’s high time that we start using them properly in our Salesforce implementations.
Front end developers who are familiar with Visualforce will know that the normal workflow of writing CSS and JavaScript and then testing it in Salesforce is a daunting task. The constant unzipping and zipping of your static resource is very annoying to say the least, and so slow.
Modern developers are accustomed to see their code update in near real time, without waiting around for several minutes.
In short, Salesforce is generally a slower environment to work in for a front end developer compared to traditional tools. Lightning components and the Lightning App Builder are going to improve this, but there’s still a heck of a lot of Visualforce pages out there to update and we still need to optimise our CSS and upload static resources.
How can we fix this?
My solution: building a Grunt task that will automatically compile our LESS files, concatenate all JavaScript code, include images and upload it all to Salesforce as one single static resource. All with one command!
I’ve put together a GitHub repository that includes all the required dependencies. All you need to do is follow the instructions in the GitHub readme file. If you’re not familiar with Grunt or feel rusty, there’s a getting started tutorial at http://gruntjs.com/
How do you manage your front end code in Salesforce? Are you already using Grunt, Gulp or something else?
