Using Gulp to Manage All Your Static Assets

The web development community continues its march towards more advanced methods and processes. CSS preprocessing, JavaScript testing and linting, image compression, and much more make up the web development landscape. Where does that leave you, humble Salesforce developer? Your JavaScript, css and images all get loaded into static resources and that’s it. Surely there is no way to integrate the Salesforce way with all these cool, new tools, right? Prepare to be mildly interested.

Now, before we get started, I am going to make a number of assumptions:

  • You are semi-comfortable with the command line
  • You have your own development environment. For reference, check Jesse Altman’s ideal explanation and for more depth, read the other articles he has in the series
  • You have your Salesforce code and metadata pulled down to your local machine for development
  • You have some way to deploy code (MavensMate, Force.com IDE, Ant migration tools, etc.)

Initial Gulp setup

The first part will be getting Gulp set up. To begin, you will have to download and install Node.js for whatever system you are using. After that is all set up, you are going to want to go into your Salesforce project and make a sibling folder to src. This is where we are going to load all of our assets, so name it appropriately. After that, make a folder for each asset type you are going to work with (i.e. js, css, img) and if you are going to use something like Sass or Less, then add a folder for that.

Next we are going to open the asset folder in a command line and enter the following commands:

The first command will bring up a series of prompts where you can enter some information on your project. The next two actually install Gulp.

Next we need to create gulpfile.js in the same folder and add these few lines

That file will set up the server (for now) so that typing the command gulp and navigating to localhost:8080 in a browser will show your asset directory.

Managing your dependencies

If you depend on a number of third party libraries, you may want to consider a package manager. If you don’t want this, it is not necessary for the article but it can be a huge help. I will be using a tool called Bower. Bower lets you search and download dependencies, much like npm, but with a focus on the front end. To get started with Bower, first we must run

What you actually install at this point is up to you, but for example I will install jQuery and Normalize.css. Like with npm, Bower has an init command that will prompt you for various values.

Local files, now with more cloud

Now that we have our files served up, we can use a bit of trickery to load from our little web server when developing locally, but then use the static resources in all the other environments. The basic premise of this is using a flag in a custom setting, something like Use Local, and either rendering a component with all the local assets, or the static resources. There are a lot of ways to actually lay this out, but for me, I will be using two sets of components so my CSS loads in the head and my JavaScript loads in the footer.

Before we even get to writing the components, we need a few things in place. First is the custom setting so you can turn the feature on and off. Next is some dummy static resources. Now this depends heavily on what you are going to do with your assets but for me, I plan on concatenating and minifying my JavaScript and CSS. I plan on zipping third party assets into their own file. For my purposes I will create a blank js file, css file, and zip file and upload it to the static resources. Once I get that done it is on to the components.

This design was originally from this GitHub repository for a Visualforce AngularJs Seed. The design was later refined by Peter Knole.

The story so far

If you have been following along you have all the bits and pieces set up. Now you need to put it together in a page and write up your CSS and JavaScript. The page can be anything, so long as it has the components for the CSS and JavaScript at the top and bottom respectively. Don’t forget to set the custom setting to true so you use your local files. If everything went well, then viewing your page should work. If it doesn’t, check that your browser isn’t blocking mixed content . If you really want to test, make a change to your CSS, save, then reload and see that your page changed without any long save times.

Example local page
I am not a designer

Building for now

You now can view your work in your own sandbox just fine, but what about everyone else? So this tutorial doesn’t become a colossal pain, we will be setting the custom setting to false to simulate the remote environment. Now, viewing the page shouldn’t look so good. That is because we haven’t done anything about the static resources. We are going to fix that, but we need a bit of help. First grab a few more dependencies:

Now for the script

To break that down, lets look at the tasks that were just added. The zip-vendor task  gets every file and directory in the bower_components folder, zips it up and puts it in the static resources. The process-css, and process-js task gets all our CSS and JavaScript files, concatenates them into their own files, minifies them, and then places them in the static resources. Once that is all set, run gulp build to rebuild the static resources. After that, you just need to get the files to the server however you are comfortable. For example, if you are using MavensMate, just run the compile.

Building for the future

There is so much more you can do than what I laid out. The tools and techniques of web development are constantly changing and shifting. This article was done so you can see a possibility. Nothing I have done is set in stone or even scratches the surface. The makers of jsForce, for instance, have a post I took inspiration from for deploying assets right from Gulp. There are also a wealth of tutorials on these tools as well as many others that can be added to your workflow.

I say to you now, welcome to the present age of web development, we’ve been expecting you.

Technical User Standards Design Experience Interface Documentation

If I had ever thought I would be doing a post on documentation, I would have made sure to have more topic starters in the back log. Let me put this out in the open, I hate writing documentation. Now that that is out of the way I feel empowered and what better way to express that than by judging all of you. I am going to guess that a great many of you hate documentation as well. Now don’t get put off by that statement or think I am belittling anyone in particular. I have seen it everywhere, on projects big and small, proprietary and open source, useful and utter garbage. Even my own git hub projects languish with bad documentation. Actually writing documentation, it seems, is farther down on my todo list than writing a blog post about writing documentation. Part of the problem is that once you start getting serious about documenting it appears that everyone has different ideas of the style, scope, and purpose. With every single sample different, finding a consistent thread of what a specific type of documentation is for, becomes an infuriating mess. If you are like me, this turns into mental gridlock as you agonize over how far you go with the details.

Let me paraphrase a joke I once heard: A group of developers were going over all the different formats their new media player would play. They narrowed it down to a list of 13 formats. Staring at the mess they thought to themselves, “Hey, we’re smart people, we should make a new format to overthrow and unify these other formats.” Then they had 14 formats to code to.

I mention that, because I will not be calling out one style of documentation above the rest. No, I will be adding my voice to the din. Just as a forewarning, I have no place telling anyone how documentation should be done. That being said, I will divide the documentation into three segments. The first will be the foundation, the second will be the stories, and the third will be the generated docs. They have been split based on their audience and their goal.

Foundation

I call this the foundation because it will have information pertinent to the entire project and is readable by everybody, from the managers to the developers. The goal here is to be only as technical as we need to be. To use a Heroku project as an example, this area will hold information like what technology is being used, what coding standards should be followed, what certification the app must meet, and any other project wide promises the app will be held to. Much of this paragraph is built off of section five in the book, Software Architecture for Developers. If your project is using MySQL instead of PostgreSQL, that goes here. If your project is being held to five 9s, god help you and that goes here. If  you have a specific task to submit your app for PCI certification, then that goes in the next section but the fact that it must be PCI certified goes here. So what is the next section?

Stories

I love stories. No, seriously, a well written user story is a wonderful thing to behold. I am basing this section off of my experiences with Jira, but I can think of no better place for documentation about what the project should be then right in the Jira stories themselves. These should contain all of the information about specific functionality that has been promised. The arrangement works out perfectly as all the information, including screen mocks can be added to the story. Questions and comments can be added as well to turn it into a living document, recorded for posterity. This should be a boon to QA testers who only have to look in one location to find out all the information on what a task should and should not do.

Code Documentation

While the above described what should happen, the code comments should communicate how. I am not talking about commenting every line of code, that is pointless and prone to error. Your code documentation should be twofold. First is structured comment blocks, ones that can be parsed by documentation generating tools, placed at the beginning of classes and at least on all public API. You can get the private methods to help out maintainers (and yourself) in the future. The next is inline comments, ONLY when there is a need to explicitly call out what you are doing. To use a real life example, to get JSTL referenced correctly in a recent project, I had to add in three lines of what can only be described as code voodoo. I added a comment stating not to remove it carelessly, why it was there, and a link to a page I got the piece of code from.

Conclusion

All told, with these three components there should be a complete picture with very little overlap or duplication. I say should because documentation is a soft skill. If you have bad code then you can get compilation errors, or test failures, or regressions in QA. Bad documentation can take a long while to surface, if they ever do. The side effect of bad documentation can be confusion, inefficiency, and delay that is hard to quantify but easy to feel. So whether it be a grain or a fast food serving worth salt, take this plan into consideration.

MavensmateVsForce

MavensMate Vs Force.com IDE

Are you looking for a no holds bared, pulse pounding, head-to-head match up between two established titans!? Then I am sorry, this is just a comparison between two code editors. I am sorry to have wasted your time. If, however, you came here looking for the type of fuel that can keep a flame war burning for way longer than it should have, then have I got a post for you. First let me frame this for anyone who isn’t in the know.

The force.com IDE was a plugin for Eclipse built on the metadata API. If you wanted to do any code editing out of the cloud, this was about your only choice. It was rough at times; tests were slow to the point of useless, there were a few missing features that people had come to expect from code editors, & it used the whole weight and heft of Eclipse to essentially act as a text editor with some fancy saving. MavensMate came along and, for some of my coworkers and myself, completely blew Force.com IDE out of the water. It was light, it was fast, there was code completion, there was an intuitive test results screen AND you could play games during a deploy. How cool is that! I suppose the only drawback is that the text editor it was a plug-in for, Sublime Text 3, is $80. That is not too bad considering how well loved Sublime is, but it is still something to keep in mind if you are going to be rolling this out to a large number of developers.

Ok, history lesson over. If you can’t tell by the fact that the above fight seems kinda lopsided and yet I am still writing, something has changed. The Force.com IDE has been released as open source and based off of the tooling API. Right off the bat this scores big with me since I am also a Java developer and can better understand what the code does. It is still an Eclipse plugin so that complaint still stands but lets see if it can wow us, shall we?

The Force.com IDE install process remains mostly unchanged and that is fine, as the Eclipse plugin manager is stable and robust enough to handle this easily. The project setup screen is also very familiar, though I did have to resize the ‘Choose initial project contents’ dialog  for the components to show up . It has a pile more choices for metadata types it can pull down, but it has always had that advantage. The tests were definitely faster, which was nice to see though the coverage report is lacking some polish. Two things I could not get working were the automatic builds and the code completion. The automatic builds caught me off guard as that was a feature that used to work. The code completion was something I was looking forward to working, but no dice. At this point I uninstalled and reinstalled, but it didn’t get any better.

When I set out to write this post, I wanted to be surprised. I will remember to be more careful with how I word my wishes. I was indeed surprised by how unimpressed I was. Compared to the old version, it did not feel like a significant improvement, or or an improvement warranting a blog post, or an  improvement at all. So I probably sound pretty down on the updated Force.com IDE, and I am, but I am hopeful. Releasing the source and making it much more possible to extend is a huge step forward. As it stands MavensMate still owns the Force.com IDE, but I will be happy to do another comparison in the future to see if the lead disappears.

Here comes NimbusMock!

Oh look, a git hub repo. That’s right, my mocking framework for apex has a name and a repo. Yay? Right now it is a 0.0.1 release. That means there is lots of chance for the api to change (I am still trying to decide whether to split out the object mocking and method stubbing). For now let’s see what it has to offer.

Class Setup in your Application

Before you can even hope to mock anything, there is a certian way to go about setting up your classes. The service classes must be setup with an interface. The point of the mock will be to override the default functionality with the mock methods. For any classes that are going to use these mocks, they must be setup so that the mocks can either be set in the constructor or a setter.

How to Mock

The first step, assuming your classes are all ready, is to make your mocks. In MockFactory.cls, create an inner class that extends NimbusMock and implements your interface. Your methods will simply call getCall with a unique name for that call in that class and an object array of your parameters. The following is a references for how to mock your calls:

 

Using your Mocks

Creating an instance of your mock is as easy as any regular class. For example:

From there, you need to tell the mock what to return or throw when a call is made with some combination of parameters. The base is the same in both cases, calling the when static method on NimbusMock and pass it the call to the mock method with the parameters you expect. After that you either chain thenReturn or thenThrow depending on what you want it to do. When put together, it looks something like this:

TODO

  • A generator for the mocks. I plan on writing this in apex and letting the devloper write up a script calling it with a list of classes they want mocked
  • The ability to set how many times the same call can be made and to see how many times a call is used after the fact
  • Mocking classes without interfaces. This isn’t that hard, I just need to settle on how I want to go about it

I am keeping good on my word

Like the title says, I am keeping good on my word to get some stuff done. I have been working on my mocking framework to post it to github. There have been a number of changes. Probably the biggest noticeable change is the switch to a mockito-like when+doReturn style. Along with this, I no longer use a static mock manager which means that there are less chances of method name conflict. The down side to this is that the mock now needs to be injected via constructor or property as the mocked calls are specific to the instance created in the test. The mocks have also been softened and now allow for out of order method invocation. There are still matchers but they have changed a bit. It is very much a work around for the lack of reflection and I expect them to change in the second release. In fact, there is a laundry list of features I want to add, but I need to get something out there first before I start planning where I will put the kitchen sink. Now, some may be wondering why I have not put anything in github and the reason is, is that this was a major overhaul from top to bottom. I didn’t want some broken piece of code attached to my name. Right now it is 90ish percent done. The code is working, but I want more tests and some clean up. You see, I do most of this at night… or the morning as it just so happens (12:11am as of this sentence) and while I produce working code, I also produce code with a high WTF/m at this time. So once I have it cleaned up, tested and commented, I will push it to github and make a big ol’ post about it here.

I’m not dead

I feel happy. I feel happy…

No grail fans? I thought I might use a dead parrot parody but in that sketch the parrot had most definitely ceased to be. “So where have you been,” you may be asking yourself and to you I reply, “that is none of your business but I will tell you anyway cuz I’m a nice person and I am sure you are too.” I moved, settled in, the steam sale happened…. yeah, anyway. I want to get back to posting and I would also like to update my site a bit. It seems to be lacking, well, imagine me frantically waving at the screen and you get the gist of it. No social icons, no about me and a bear bones theme leaves this looking like a fly-by-night hack job rather than someone genuinely interested in this technology. I also want to get my Mock framework out on git hub. I will admit, when I heard that someone else had beaten me to the punch with a few features I would have liked to use, I got a little down on my code. Well that was wrong of me because you know what is better than one good implementation, TWO! Let’s keep forcing the issue and maybe, just maybe, Salesforce will throw us a reflection bone or something, anything to make this mocking thing less clunky. A guy can hope right? Anyway, lets see if I can coax this blog back to life a’ight. See you all soon!

mock_head

Enhanced Mock Mocks

Well color me surprised, my last article on mocking in apex was, well, a little more popular than I thought it would be. I was happy that so may people enjoyed it, but it got me thinking, “Bob, you handsome and brilliant, yet refreshingly humble man, you can do more for your fans!” After an obligatory back patting, I set off to add more features. This will build entirely off of the last article. In fact, you are doing yourself a disservice if you don’t read it post haste.

We start with a change to add parameter matcher, a handy feature for times when you are not 100% sure the value that is going into you method. All we need is an enum.

This is the bare minimum to work while still providing room for enhancement. The only thing in this enum is the value anyVal. What we are saying is when this is used, accept any value. Next I modified my interface, services and test to give the method getAuthCode a Datetime parameter. The OrderService will pass in Datetime.now(), making this almost impossible to mock without matchers. There also needs to be a change in Mock maker to handle this new condition.

It isn’t much different than it was two weeks ago, except now it checks if the parameter is a matcher. If it is, and since there is only one possible value it could be, we just skip any check on the parameter and continue to the next. Now we can change our test to work with this new code.

Now our call to getAuthCode will work no matter what we pass in. A quick test run shows both tests passing… but that isn’t right, now is it? We only changed one test yet both still pass. It isn’t enough to simply check the parameters, we need to check the number of them as well. Otherwise our loop could give false positives like in this case, or throw exceptions. Let’s put a halt to that right now.

One extra line asserts that the number of parameters passed in is the same as those expected.

There is another case we are still not testing for. If you remember last time, I used mocks to return a purposeful bad value to test out some error handling. What if we wanted to test what happens when the service we are mocking throws an exception itself? We need some more code for this one but before that, we need an exception to throw.

Phew, that was a lot of work, but I soldier on. Next is some code in our service to expect such an exception.

 

Now we need to get MockMaker to throw the exception at the right time.

This getCall method keeps getting all of the attention. Another conditional now checks if the return value is actually an exception and if so, it throws it. The only thing left is the test.

The only real difference here is that the addCall for processPayment has an exception passed into it and the end assert reflects the caught exception.

With just a bit of work, MockMaker now checks the quantity of parameters, uses matchers to check for values that might not be known when the test is started, and throws exceptions on command. While not on par with some other language’s mock suits, it can go a long way to making life easier for a developer.

mock_head

Mock Mocks in Apex

I love mocking frameworks. I love the ability to isolate a unit of code so I can make smaller, more coherent tests. I have grown accustom to them during my time with java and I would love to use them with apex. The problem is that mocking frameworks rely heavily on robust reflection, a feature apex sorrily lacks.

Sorry. Lost the happy, but the happy's back!
Sorry. Lost the happy, but the happy’s back!

While we cannot yet simply tell a method to generate a mock class, maybe we can make an approximation. A lightweight class that can be substituted for the real thing when testing a class that relies on it could work in many cases. How to get the mock class in there though, that is the question. While Apex is missing most of the necessary reflection, it is not missing all of it. Enter a little known blog, by a man called Jesse Altman, that goes into dependency injection with Apex. That, my friends, is the foundation of what I will go into here. If you didn’t click the link above, and I don’t know why you wouldn’t have, read the article on dependency injection right now. Seriously, if you go on without reading it I will be disappointed in you.

Are you done? And no lying, I will know. So, I have my classes and custom settings pretty much the same as the one from Jesse’s blog post and will be building from there. The best place to start with a blog post on mocks and unit tests is probably a unit test. The unit test will initially test the the classes as they are.

My service just just calls processPayment on a PaymentInterface, nothing special there. The test inserts a custom setting first, grabs the return value from processOrderPayment and verifies the result. Not too much going on here, certainly not deserving a post. Yet. Lets spice this test up.

Look at that, injecting an inner class from within the test worked just fine too. The problem is that this is a trivial example. Why bother mocking? Let’s make this a bit more complex.

I have changed the interface to have the method getAuthCode and added a string parameter to processPayment. The service now checks for a non null authCode and throws an exception if it is. Our mock has had its methods changed accordingly and now, process payment verifies the parameter passed to it. This is closer to our mocks, but now we have a branch we can only test by adding another mock. Inconvenient indeed. One last change, one last push over the finish line. A new class will get us where we need to go.

This hefty class will let us reuse the same mocks multiple times. I wont break this down line for line but I will summarize it. The command object holds parameters to verify against and return values to… return. The method add call adds the call to a map containing a list of command objects, keyed to the method name being mocked. The calls to a particular method must be mocked in the order they will be run. The method getCall gets the command for a method, verifies the parameters are the same and returns the stored return value. What does this look like in practice? Ask, and ye shall receive.

The mock now extends MockMaker and does nothing more than wrap different calls to getCall. The test methods (yes, now there are two) mock out the calls to the payment service with MockMaker.addCall. We can now use the single mock, injected into the OrderService via the factory, to run multiple tests. This isn’t perfect but for services with call-outs or just very heavy methods, this can be a real help.

Looping Slideshow Display With Visualforce and Apex Charting

Anyone ever seen pictures of west-cost start-ups with those TV screens front and center showing some sort of stat or metric? If it is a dev house maybe it is the builds, bugs, & deadlines. A sales firm may have revenue, opportunities and a highlight of recently closed deals. Either way, they are meant to highlight data and allow it to be consumed in a very passive manner, reading it as you pass by. Salesforce makes reports a breeze and dashboards are a snap too. However, what if you wanted to recreate that seamless look, without the tabs, browser UI, or any indication of what is driving the display at all? Sure, there are tons of articles that show you how to get PowerPoint to do that, but using stale data is for suckers. Let’s take a look at what some Apex, Visualforce and JavaScript could do for you.

We should start with the controller.

A good start but missing any real meat. Let’s look at what is there, shall we? Pretty much the only thing in this class so far is a nested wrapper class. This is just a convenient way to get data to the charts. Feel free to do your own thing if this isn’t your style. We better add a way to get some data.

This looks promising! This method grabs all the cases, groups them by priority, then counts the number of cases in those groups. We iterate over that data and toss it into that wrapper object from the prior code block. Add as many of these chunks of code as you want, one for each chart you feel like creating. We are almost done the controller, just one more piece.

This to-the-point bit of code is there to erase the current set of data so it can be refreshed. Remember what I said about stale data being for suckers? This prevents you from being a sucker. Put all of those together and you get a completed controller (mine has a second list of chart data because a one slide slideshow is boring).

On to the Visualforce. We will start off small again and build from there.

This is the base, telling the page to use the ChartController and to not show the header or sidebar. Remember, we don’t want this looking like a webpage or a browser, just a slideshow. Now we need a chart.

This is an apex chart. The width and the height shown here are based on my screen size and layout. If you have extra styling or branding on your slideshow (Trust me, you will want it. The end result of this is bare bones.) you will need to change these values to fit. The apex:chart tag also tells the page what data to use and the id will be used to keep the data fresh. The apex:pieSeries tag tells the page that the data comes from the data field on the wrapper and that the label comes from the name field. There is also the apex:legend tag which provides a legend in the position specified. Finally all of that is wrapped in a div that will provide us the means to allow for movement. Like with the controller, you need one of these for each list of ChartData that you created, just leave the ‘activeSlide’ style off the rest. We still need to code to bring this to life. Let’s begin with the styling first.

Simple stuff here. The ‘side’ class has an absolute position, a white background and is glued to the top left. Every slide has that and therefore, every slide is stacked on top of each other. The slide that also has the ‘activeSlide’ class rises to the top, thanks to its high z-index. To make these slides shuffle, we also need some JavaScript.

First off, I am lazy at times. Seriously, no joke. That is why I included JQuery, because it makes things so darn easy. The next bit sets up a JavaScript method named ‘refreshCharts’ that calls the controller method ‘refreshCharts’ and re-renders my two charts with that data. This is done with the apex:actionFunction tag and will automatically generate the appropriate code. After that, I set up another JavaScript method that will determine the next slide, remove the ‘activeSlide’ class from the currently visible slide, and add it to the next one. To set things in motion, I call that method every 5 seconds and the ‘refreshCharts’ method every 10 minutes. Mix it all together and cook at 350 degrees and your Visualforce should look like this:

What does this look like in action? A chart, then another chart. This is not worth a picture because a still image won’t show it in action and an animated gif can be staged. The best way to see this is to follow along and get this code into any developer account. After you do that, just type in the URL, ‘<YOUR_SALESFORCE_URL>/apex/<YOUR_VISUALFORCE_PAGE_LABEL>’. Tapping F11 should remove all of the browser UI and dragging the mouse to the right side will hide it from view. There you go, a live slideshow. This is the perfect project to dedicate some old hardware to.

Apex Analyzer Dev Diary

Well, this is an interesting situation. When I started this blog, my intent was to do reviews, news, and the occasional small project. My post series on using Heroku to host a personal site was just that. My last post which laid the ground work for an Apex static code analyzer took a good deal of time but would have been fine if it ended there. It didn’t end there though. In fact, I poured a pile more work into it this week to hook together the express framework as well as an sqlite database. If you have been watching the git repo, you have likely noticed…. nothing at all. The changes are so drastic, I cannot commit until I have at least the functionality I had before. No real post this week but I wanted to keep people in the loop.