ui-components-set.jpg

UI Components Set

UI Components in JavaScript, HTML & CSS can introduce consistency to your code base and give developers opportunity to learn

4 minute read

Background

One of the key processes which contribute firstly to the quality of the outputs, but ultimately affect the business bottom line is “reusability.” Once a foundation for a reusable piece of code has been established, it becomes of value to the organisation as it aids speedy development and a maintained standard and consistency across the board.

Modular Development & Open Source

In general

In an ideal world, software development should be as modular as possible. This implies that components, or modules, or elements or whatever the favoured term of the day is, can be switched out, replaced, removed or added without introducing implications to the host system. This is nothing new, it can be seen everywhere in IT, from operating systems and software bundles, to browsers with plugins, inside software with additional “in-app” extensions. It is also evident outside of the IT industry, in construction, aerospace, automotive physically.

In UI Development

Client-side development largely relies on “plugins” which often are sourced from the internet and can be unreliable in terms of quality. The open source network is great, but it does invite opportunity for leaving frontend developers with little ability other than to copy and paste someone else’s work and job done.

It can be agreed, that whilst this can be efficient in terms of throwing out code for speedy development, that no one has learnt anything and there is an introduced inconsistency in the code base.

There are some great open source resources available – Angular, Knockout, jQuery amongst many more.

What can we do?

Have a go yourself!

It may seem daunting for new UI developers, to have to go back to the raw code and write from scratch, actually devising the logic themselves, writing line by line, testing and solving difficult bugs, but I can promise that no one learns in this regard unless they actually sit down and have a go.

You are in the industry to learn and because you enjoy doing the work, why not tackle the problems one at a time and strive to make your own. This can also make you a contributor, in time, to the community!

Build your own library

Start small, evolve and adapt, it takes years to get a library of substance which can be rolled out on enterprise level websites, but follow some ground rules:

  1. If you don’t need it, don’t add it
  2. You’ll be maintaining it, do it right first time
  3. Document it well, you’ll need this in time
  4. Involve collaborators you can trust to uphold your standards
  5. Stand by your decisions in functionality choices and implementation methods (be sensible though)

 

Where you end up

At Codehouse

When I was Lead Frontend Developer at Codehouse I established a rule that the use of third party extensions would be permitted in exceptional circumstances only. As it stands, there are 4 third party libraries permitted, jQuery and jQuery UI being two. The rest of the UI code is either reused from the component set or is custom written to the bespoke requirements.

UI Components Set

Over time, with dedication and commitment, you end up with your own library which you can extend as you wish, reduce as required, maintain in your own time and, in some cases, even sell as a premium.

Principles

  • A UI Components Set should include features actually needed in day to day development.
  • Components from the set should be interchangeable and easily integrated with little or no developer involvement other than initialisation.
  • Architecture is important, but don’t expect to get this right first time, it will evolve.
  • For JavaScript dependencies, a centralised distributor and binding mechanism will help facilitate consistency and instill a standard for future extensions.

UI Components consist of HTML, JavaScript and CSS usually, but some will be core JavaScript only.

UI Components Examples:

  • Browser/Feature Detection
  • Data Serialisation
  • Form Validation
  • Carousel
  • Accordion
  • Navigation
  • Form Elements Styling Helper
  • Cookie Handling
  • Video Player
  • Audio Player

Advantages and Disadvantages of producing your own library…

Advantages

Disadvantages

Reduced, clean and optimised code base

Little or no community support

Consistency in syntax and format

More effort upfront

Extensible as desired

Requires familiarisation for new developers

Limitless

 

Premium saleable in some circumstances

 

Speedy rollout once developed

 

Provides opportunity for developers to learn, not just copy

 

 

If the team doesn’t have the calibre to produce and maintain such an asset, it would be advisable not to introduce it. There are many advantages, but if a bug is introduced, it has the potential to impact many client environments which can be catastrophic if not managed properly. A valuable asset, but implement with caution.


  • JavaScript
  • HTML
  • CSS
  • Clientside
  • Development

Comments on this topic

Tim Berners-Lee

Tim Berners-Lee

Best implementation of my vision of the World Wide Web.

3:07 PM

Leave a comment

Submit