jQuery = crack for web developers.


So in my new digs, I’m a Salesforce APEX / Visualforce developer.  I had been working with Salesforce for years before coming to Demand Chain Systems, but once I leapt back into the consulting realm, I needed to really kick things up a notch.

Learning how to do things more-or-less the “right” way with APEX development was interesting.  Salesforce themselves along with the user community do an AWESOME job documenting everything as well as helping each other learn how to use things in the real world.  That said, there is kind of a gap for relative newbies getting cranked up into what I call a “conversational” level of knowledge – meaning that you can quickly lay down the foundations to a development project without having to Google anything or look back in previous code for “now how did I do that before?”.

Once you get that down, you can start playing with more of the user-focused interface stuff and general eye-candy.  Enter jQueryUI.  Amazing.

I’ve read about jQuery and worked with it lightly in past lives, but I happened upon a project where I needed some pizzazz – specifically creating a spiffy and extraordinarily easy-to-use interface with some slick flair.  The client said that in delivering the requirements, we needed to have a good measure of “fun factor”.  I can do that.

The best part of my job is learning new technologies to deliver awesome solutions to my clients.  If being presented with a challenge, learning how to do it, and coming through with the sound of jaws dropping on the other side of the table was crack, call me an addict.

The latest need was for the management and scheduling of time-based tasks across multiple resources.  After about 800 lines of written CSS / jQuery code, which through some Salesforce <apex:repeat> and rerendering <apex:outputPanel> sections, we have abotu 3,500 lines of CSS / jQuery code powering about 1,000 lines of again dynamically-generated HTML code with 1,400 lines of an APEX controller powering it all behind the scenes.  All CSS-based page layouts, rather proud of myself.

The biggest “gotcha” here was that this web-based solution (using Salesforce) was replacing an entrenched Windows application.  Right clicks, drag-and-drop, resizing, and a bunch of other traditionally “non-web” things were required and expected.  Again, enter jQuery.

Here is a quick screenshot – with parts blanked out and masked to protect the client (and the innocent).  What an awesome project and I’m so jazzed to be a part of it.  Not going into a crazy-level of detail on the blog here (this was built for a client and that wouldn’t be fair to them) I want to touch on the major design points and how both as a regular web developer and Salesforce / APEX / Visualforce developer – the technical tenets used here open an entirely new world up to you.

jQuery is unfortunately quite daunting to start playing with.  It consists of a few include files and a butt-ton of documentation, with a few very basic examples on their website and a loose smattering of real-world application amongst the community.  HOWEVER – I recommend that every web developer out there go out and learn this technology.  There are so many features just in the basic library that can be used with minimal actual coding (versus hundreds of buggy lines doing it yourself) not to mention the hundreds of plugins for just about anything you can think of that I can’t believe I didn’t start using this more sooner.

I had been a <TABLE> guy pretty much since I started coding HTML.  Short, simple, sweet, and predictable.  This project taught me the power of a CSS-driven DIV / SPAN framework.  Always a little more cross-browser testing and tweaking that needs to be accounted for, but your user experience has no comparison.

I’m going to be putting up some more “real-world” and “best-practice” jQuery examples on the blog here in the coming days to hopefully help those of you who want to start playing around with this stuff.  Through MUCH of my own trial and error I hope to share what I have learned with the masses.  We’re all a much better community because of it.

Advertisements

6 thoughts on “jQuery = crack for web developers.

    • Dude – thank YOU for turning me on to this stuff. Incredible technology and I can’t “un-jazz” myself. The client had three words – “you nailed it.”

  1. Very impressive!
    If I may inquire about the level of Javascript that was required, may I ask if you could set the renderAs attribute on the VF page element to PDF, or set the MIME type to Excel, and have the informative data still render? Or is the data dynamically rendered on the client-side, after the VF engine parses it?

    • Thanks Alex!

      I didn’t do any of the renderAs or MIME type options – all of the data is contained within outputPanels that are rerendered by ActionFunctions or ActionHelpers on the page. Some of the jQuery plugins went to pure Javascript functions to parse some information out before passing through to an ActionFunction.

      • Also, may I ask how the time table was created? Is it just a background image? Table? Divs?

        I’ve tried to make a table like that, myself, and it didn’t turn out nearly as pretty. :-/

      • Time table is a big massive DIV with each row made up of two DIVs. The first DIV is the resource’s name, and the second DIV spans the rest of the grid with a repeating background image. Measuring pixels was my biggest problem with it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s