Designing a component (Time Picker) in vanilla js
Recently I had a request from my friend, to help with developing a light-weight component library (zero dependencies of frameworks or libraries) and we have discussed the bottleneck issues of the reusable component development. And also, I am curious to develop a sample component from scratch with a proper guide, which can be helpful for the other developers.
UI Component Design
The component design consists of proper UI structures and functional interaction definitions, so follow some standard design methods and make sure that all components should contain common styles.
Before starting to design the component, try to understand some general properties and patterns to avoid basic design issues.
How should a component work?
The component should start work with basic initial configurations and it should support the communication property to interact with the component. Each component's properties and the event should not affect the other component behaviors and values.
It’s so theoretical, let get into a realistic one.
UI component = JS+CSS+HTML.
When we design a javascript component
- It should work with the default configurations in the targeted element.
- Component stylings and functionalities should not affect other javascript components and UI elements.
- It should support communication mediums: properties to pass a value or override the default value and an event method to get an update from the components.
- unmount option, with proper event unwiring and HTML element detachments.
- Event detection support, if the UI Interaction makes any state value changes it should be notified.
- Form submission support, if your component doesn’t have the form element, then try to use a hidden form element to set form values.
Note: I will follow the bellow class pattern to design the component.
With the basic Time Picker Component, we going to apply these concepts.
Time Picker Component
Timepicker is a UI component to help users easily input time entries. it can be used for appointment booking and reminder kind of applications.
Requirement:
- The component should support button and input based interaction.
- Each value change should trigger -“ValueChange ” event.
- The component element should work without affecting the elements.
Used the following workflow:
- Finalized the UI elements structure and functionalities.
- Rendering the elements, attach the appropriate events to the element.
- Wrote the event functionalities with the proper value updates.
- captured the Input element interaction and button actions.
This is an experimental component and it will be developed with the basic functionalities. If you have any suggestions and feedback on the code, feel free to use it.
If you have feedback and suggestion feel free to give your comments.
