Reinventing the Wheel — Building JavaScript Widgets

October 07, 2016 0 Comments by, feature, widget

You're about to create a slider. Actually it's a swiper, because you're primarily targeting touch-enabled devices. It does slide on desktop, when the user clicks the button. In other words, it's a carousel that let's you showcase a collection of items.

Different Names at Different Times

Originally it was a carousel, later known as a slider, and today, known as a swiper. It's more generally known as a carousel, which can have different types of interfaces like fading. If the new item will slide into view, whether from the top or from the side, it is more aptly known as a slider. In todays world of touch-enabled devices, our users swipe new items into view.

In the past I've spent a fair amount of time reviewing code for some of my clients.

Roll Your Own

If you only plan to support the latest browsers then this can be pretty easily done with CSS transitions. Write JavaScript methods to handle ontouchstart and ontouchend. Do some math to determine where the user is when they lift their finger, and slide to the next or previous item. For a more robust solution, you will want to determine the users current position with pageX and move the item in real-time. Users expect the swiper interaction to have the same feel, as when they are swiping through their photo gallery on Android or iOS. They expect for the image to move with their finger.

Advantages in a Custom Solution

less code. Creating your own solution will almost always result in less code. That's less code for your user to download, less code to manage and understand, and less code to have bugs. There's less code because you have less options, and you have less code in there to account for edge cases and bugs in different browsers and platforms.

Using a Third-party

battle tested. The total number of man hours that have been put into these third-party libraries is significant. Ask yourself how much time you have to implement a solution and fix bugs. Be realistic with how many features can you get into your swiper before you run out of time.

Important Questions

  • Will my solution be better than that which exists in the wild?
  • Will my solution be documented better?
  • Will my solution work better and be more performant?
  • Will I have the bandwidth to support any future bugs discovered in my solution?
  • Will the time I save in reusing code, give me time to refine the UI in other places?

In the Wild

  • swiper (10k stars and 700 commits)
  • slick (16k stars and 800 commits)
  • swipe (5.8k stars and 250 commits. not actively maintained.)

Tag cloud