PITTSBURGH—Researchers at Carnegie Mellon University's Human-Computer Interaction Institute in collaboration with Adobe Research have created a new open-source JavaScript library that makes it easier for developers to create interactive Web applications.

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.

“JavaScript drives the modern Web,” HCII Professor Brad A. Myers said of the widely used programming language. Introduced almost 20 years ago, JavaScript is typically used on interactive sites, enabling users to control Web browsers, make changes in displayed documents and exchange messages. “Today, we’re seeing JavaScript code in more places and in larger projects than ever before,” he added.

“Still, making interactive apps easier to program is a longstanding and fundamental problem,” Myers said. “It’s especially difficult to create interactive Web pages, because Web programming normally requires learning at least three languages: HTML, JavaScript and CSS.”

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.

“A lot of great JavaScript libraries are aimed at addressing some of the difficult aspects of Web programming,” said Stephen Oney, the ConstraintJS project lead and a Ph.D. student advised by Myers. Oney noted some provide prebuilt, reusable widgets, such as buttons or menus, but may not meet the specific needs of a designer, while others require developers to structure their code in specific ways.

“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-rankedSchool of Computer Science, which is celebrating its 25^th year. Follow the institute on Twitter @cmuhcii and the school @SCSatCMU.