This website uses cookies and similar technologies to understand visitors' experiences. By continuing to use this website, you accept our use of cookies and similar technologies,Terms of Use, and Privacy Policy.

Jul 18 2011 - 05:24 PM
Modularization In Recent Front End Developing
Vialogues provides a growing number of UI utilities with each of its new releases. One of the important rules we are following in developing these utilities is modularization. Just as we use Django as backend to ensure apps can be easily reused between websites, we do frontend modularization to ensure utilities can be shared between webpages and websites. In modularizing, we decouple the data and methods of an upcoming functionality from its context page. The utility's definition is enclosed in a javascript class and data is fed from the page to the utility's instances via the constructor's argument list. Thus the utility can be easily migrated to other context simply by adjusting the arguments. What's more, we assign a namespace to each utility so that utilities can be reused in other websites with no need to worry about name conflicts. A few reusable tools developed so far include tooltip, scrollable slide show, item paginator, scrollbar and videoJS. The paginator tools has been successfully migrated from Vialogues to the Events Calendar project. Hopefully it will be used in the Pundit project as well. The scrollbar utility is currently used for displaying comments on the embed Vialogues page. It simulates the effect of a browser scroll bar and also (what's not supported by other plugin) supports fully customized styling and item highlighting. In the future, we can easily have the same plugin work on other websites. The tooltip plugin is made so flexible that it allows multiple instances to work simultaneously and can take user-defined styling. The videoJS is a video player handler that is able to take care of multiple modes of video playback and supports easy setup and control. I would suggest that EdLab developers or researchers could reuse these modules to save their time and based on them, create even more powerful UI tools.
Posted in: Knowledge Solutions|By: Yudan Li|4833 Reads