Skip to content

Instantly share code, notes, and snippets.

@atomiomi

atomiomi/jqueryui-sldierewrite-proposal.md Secret

Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atomiomi/1a81f7d6951a13423377 to your computer and use it in GitHub Desktop.
Save atomiomi/1a81f7d6951a13423377 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI: Slider rewrite proposal
Raw
jqueryui-sldierewrite-proposal.md

jQuery UI - Slider rewrite

Personal Details

  • Name: Keldibek Ablay
  • GitHub: https://github.com/atomiomi
  • Contact:
    • Email: atomio.ak@gmail.com
    • IRC Nick: atomiomi
    • Mobile: +7777 8690773
    • Address: Republic street, house 10/1 - 81 flat. Astana, Kazakhstan
  • College: Polytechnic College of Astana city
  • Year: 4th year
  • Country of residence: Kazakhstan
  • Timezone: UTC +6 hours

Introduction

Currently, jQuery UI slider is hard to support because it has accumulated a lot of technical debt. A nesting level of certain functions reaches five. Some parts of code perform the same logic. I discovered that existing bugs are mainly related to the implementation of multiple handles. Moreover, handles cannot be added dynamically to the slider. Finally, unlike other widgets there is no ARIA support.

Project Goals

  • Develop a new API for the following types of slider:
    • Slider with single thumb
    • Slider with any number of thumbs
    • Range slider ( possible constraint slider )
  • Design architecture of the widget that will meet the basic use cases
  • The new architecture should be easily extensible
  • Merge slider widget with the existing one in jQuery Mobile

Implementation

I made a draft version of implementation that is described here. The main idea was to create flexible tool to implement various types of slider. My solution is SliderTrack with wich we can limit movement of each handle independently. With this approach, the main task is to create correct logic that calculates limit points.

Project Schedule

  • 1 week: Join and get familiar with a team, get to know mentors. Understanding the codebase, reading documentation, and looking through the bugs.

  • 2-3 weeks: Examine and discuss current problems with mentors. Based on the issues that will be considered to be solved define requirements for all types of the slider. Sort issues by priority and decide which functionality is going to be delivered first. It is more likely that delivery plan will be changed.

  • 4 week: A separate API is to be developed specifically for each slider. As this is completed it will be possible to understand which of them can be merged. Also need to make sure that it can be used in jQuery Mobile. The result will be a list of parameters, methods, and events for each slider.

  • 5-6 weeks: Based on requirements and API obtained from previous weeks develop draft implementation of slider's base functionality: drag handle, vary an active handle, change handle's value, constrain movement of handles. The way for extension and override should be established as well. After that it will be possible to detach common methods. From these methods implement base object in separate branch called. This object is planned to be used in all sliders.

  • 7-9 weeks: Branch for each slider will be set up based on the base object's branch. Firstly, Single slider will be implemented. It should be considered that it will be used also as a toggle in jQuery Mobile. It is possible to merge it with Range wich has fixed min/max. I think we can take existing tests for functionality that are already implemented in the current version. Then, extend them for a new functionality and begin implementation.

  • 10-12 weeks: : Work on Multi slider begins: take tests for implemented functionality, extend them and begin implementation. Since this slider uses a lot of handles one should pay attention to restrictions on handles' movement. In addition, implementation of dynamic addition of handles has some problems:

    • Insert handles between existing ones or add them to the end/start.
    • Which index handles will take if they are inserted between existing ones.

    After implementation, common methods of Single slider and Multi slider should be extracted to the base object. During coding process mentors will review code, then, necessary amendments will be made after the discussion.

  • 11-13 weeks: : Finally, implementation of Range slider begins. Since the movement of handles is the same as in Multi slider, its functionality could be used here. However, if the slider with constraints will be took for the work, discussion about inner ranges should be conducted. The reason is that it becomes confusing what to do when the parent range is decreased.

  • 14-15 weeks: These weeks are used as a buffer. Complete spills from the previous weeks, writing tests and fixes for bugs that emerged during development process. Spend last few days on finishing functionality. Release new version of jQuery UI slider.

Time

I will be free five days per week (Monday - Friday). On weekends I will also be able to be engaged in the project. Furthermore, I willl be always in touch via IRC, Gmail.

Experiences

  • .NET developer in Dynamics Technologies (winter 2014 - autumn 2014). Wrote on C#, JavaScript. I used following technology stack: Git, Mercurial, ASP .NET MVC 4, Autofac, Nhibernate, EntityFramework, Oracle, jQuery, Kendo UI, AngularJs, Backbone, RequireJs.
  • ABOME development.This is my site-resume. The main purpose was to make animated transitions between pages. Technologies: React, Browserify, Sass, Gulp.
  • Other projects can be seen on my GitHub profile

jQuery UI contributions

I read coding standarts and contributing guidline. Fixed some bugs related to the slider (commits):

  • Cannot reach max value with step of 0.01
  • Slide callback value should be restricted to valid values
  • Slider index shall be accessible in event handlers
  • Setting both values of range slider to the maximum locks slider
  • Drag selected instead of closest handle

Motivation

I chose this project because I fond of front-end development and JavaScript with its eccentricities. I want to participate in a large open source project because it is a great experience and professional growth. During the summer of code, I will learn a lot from my mentors. I believe that as a result of this work I will become a full participant of the project. Moreover, I will be very proud if thousands of people will use what I have created.

Why Me

  • I have a good knowledge of JavaScript
  • Familiar with a stack of technologies that are using in the project (git, npm, grunt, jslint etc.)
  • Have an experience of writing various widgets: grid, popup window, combobox, datetimepicker
  • Fixed several bugs of current slider implementation
  • I have an idea how to implement sliders with a single mechanism
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment