Implementing Modular Web Design: Part 1 – Why?

by

Having read Web Anatomy: Interaction Design Frameworks that Work by Robert Hoekman Jr. and Jared Spool and Modular Web Design by Nathan Curtis, I was super excited about the prospect of creating a component library for the developers here at Lampo. What’s so cool about component libraries? Let me tell you.

Imagine never having to hand-code a contact form ever again. Now I hear you, you’re saying “Kevin, I’m an awesome developer, I don’t hand-code contact forms, I’ve got code snippets, templates, and frameworks that allow me to quickly implement contact forms, why would I want a component library?” The problem with snippets, templates, and frameworks are three words that make every developer cringe: “copy and paste.”

Imagine working on a site that has 20+ contact forms all for different business modules within the company. Now imagine that you need to change something about all 20 of those forms. Now you’re saying, “But Kevin, CSS rocks my socks off, I reuse stylesheets like a champ!” To which I say, what if you need to alter the markup? What if you need to attach a bit of javascript to transform your contact forms for mobile devices? With copy and paste there’s just no global hook at the component level.

Another argument is for existing component libraries. Most of these are javascript based: jQuery UI, YUI, LivePipe etc. They’re great, but there’s still a good deal of configuration involved. You need to write the markup, create the js bindings between markup and the library, and then download a theme or write some CSS to make it all look pretty. The type of component library I’m talking about does all these things for you.

One line of code gets you markup, JS, and CSS. All wired up to work beautifully together and provide you with usability-tested, consistent, semantically-correct components to use throughout your web app. Plus you have the control to change and upgrade components on the fly and all users of your components will receive the updates. No need to do a search and replace (AKA search and destroy). It just happens.

Have I sold you yet? Do you want to build one of these? Does it sound as amazing as a triple rainbow unicorn?

Well it did to me. So how do you implement something like this? Hoekman and Spool’s book provided me with some great theory, but nothing code based. Curtis’s book does an awesome job of describing implementation for a design department (another benefit, another post), but also left me hanging when it came to coding.

So that’s where we begin. In the next post I’ll discuss how we approached the problem of actually implementing the Lampo component library lovingly known as “Gutenberg UX.”

That’s the origin story for our component library.  Have you implemented something similar or experienced any drawbacks implementing jQuery UI or another javascript component library?  Comment on this post and share your story with us!

Advertisements

7 Responses to “Implementing Modular Web Design: Part 1 – Why?”

  1. Brock Says:

    How would a component library differ from a framework like Zend or CakePHP?

  2. Calvin Hill Says:

    Hey,
    I like your article. I totally agree with you. I remember with VB 6, you could build your own controls that you could drop where ever you needed. Or when JSP came out you could build TLDs for it to have all your snippet JSP code with JS and CSS all in one place and then drop where ever you need it.
    Now working with JSF and building Flex with in, this is becoming a lost art. I applaud you all for moving forward with this idea. I believe this will definitely boost your development time. I look forward to next article. Thanks.

    Calvin

  3. Benjamin Says:

    I’ve not read these books, but it sounds a lot like the concept of class libraries in .Net. It sounds great! I’ve designed several libraries to handle things that every app needs (Active Directory Access, Data Access and Error Handling). looking forward to hearing more.

  4. Kevin Powell Says:

    @Brock – I see this type of component library as a supplement to a framework like Zend or Cake. The framework sets up the ideology (often MVC) and directory structure for your code, whereas this type of component library operates independently and the benefits are primarily for the view tier.

    @Calvin, thanks for the encouragement. Glad to know this type of thing is a bit uncommon and that I’m not alone in thinking it’s a good idea. Blazing trails is fun!

    @Benjamin, the items you’re mentioning sound a lot like service components which are an awesome compliment to the UI components I’m discussing here. Keeping it modular all the way up the stack is definitely the way to go. There’s a reason there are Legos on the cover of the Nathan Curtis book 😉

    All of you, thanks for the feedback. There is definitely more to come. This project is in active development and I’m excited to share more with you.

  5. Brock Says:

    Very interesting. Sounds like a very natural evolution to MVC.

  6. Neil Says:

    This sounds great to me; I’d definitely be interested in
    seeing how it goes, how it ties together. I’m stunned sometimes by
    how many times this sort of work isn’t done especially on the
    corporate level because it ‘takes too much trouble.’ I love jquery
    plugins, and OO or otherwise modularity, but I definitely am
    looking forward to seeing how what you’re talking about
    unfolds.

  7. stijndewitt Says:

    Yes this should be the way forward. It is notoriously difficut though to write modular javascript code. The language has no official support for packages and a tendency exists to toss everything in the global namespace.

    Meet Packages JS, a small Javascript framework to add packages as a concept to Javascript so you can write more modular code. Have a look at it and let me know, is this something you guys maybe could use?

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


%d bloggers like this: