The library, ConstraintJS, incorporates constraints that specify relationships between elements on interactive websites. Constraints can perform such tasks as automatically adjusting page elements as users interact with them, or displaying dynamic data from other sites.
ConstraintJS works by updating and managing how constraints can cause a component to automatically adjust depending on the status of other components of a Web page. It also helps developers specify and track the various ways that a page’s status might change — for instance, how a button might act or change color when pressed.
ConstraintJS also allows programmers to write “templated” code, which has a nearly identical syntax and learning curve as HTML, but adds features to make these pages more dynamic.
“With ConstraintJS, we took a slightly different approach,” Oney said. “Rather than providing prebuilt widgets, we reexamined some of the fundamental reasons that programming these widgets is so difficult. We provide a lightweight library that works with other libraries and with many different program structures.”
The breadth of individuals who want to create interactive Web content is growing rapidly, observed Joel Brandt, a senior research scientist at Adobe Research.
“To make Web programming more approachable, we need new programming models for creating interactivity,” Brandt said. “That’s exactly why we’ve been collaborating with CMU on this project.”
Both Adobe and the National Science Foundation have provided financial support for ConstraintJS.
Though still a research tool, ConstraintJS is publicly available at http://www.constraintjs.com/and has been used in several applications. ConstraintJS is part of the Natural Programming Project, an initiative within Carnegie Mellon's Human-Computer Interaction Institute that investigates how to make programming easier.
The Human-Computer Interaction Institute is part of Carnegie Mellon’s top-ranked School of Computer Science, which is celebrating its 25th year. Follow the institute on Twitter @cmuhcii and the school @SCSatCMU.