Isopleth

Online resources can help novice developers learn basic programming skills, but few resources support progressing from writing working code to learning professional web development practices. We address this gap by advancing Readily Available Learning Experiences, a conceptual approach for transforming all professional web applications into opportunities for authentic learning. This article presents Isopleth, a web-based platform that helps learners make sense of complex code constructs and hidden asynchronous relationships in professional web code. Isopleth embeds sensemaking scaffolds informed by the learning sciences to (1) expose hidden functional and event-driven relationships, (2) surface functionally related slices of code, and (3) support learners manipulating the provided code representations. To expose event-driven relationships, Isopleth implements a novel technique called Serialized Deanonymization to determine and visualize asynchronous functional relationships. To evaluate Isopleth, we conducted a case study across 12 professional websites and a user study with 14 junior and senior developers. Results show that Isopleth’s sensemaking scaffolds helped to surface implementation approaches in event binding, web application design, and complex interactive features across a range of complex professional web applications. Moreover, Isopleth helped junior developers improve the accuracy of their conceptual models of how features are implemented by 31% on average.

在线资源可以帮助新手开发者学习基本的编程技能，但很少有资源支持从编写能运行的代码到学习专业的网页开发实践这一过程。我们通过推进“随时可用的学习体验”来填补这一差距，这是一种将所有专业网页应用转化为真实学习机会的概念性方法。本文介绍了Isopleth，一个基于网络的平台，它帮助学习者理解专业网页代码中复杂的代码结构和隐藏的异步关系。Isopleth嵌入了由学习科学提供信息的理解支架，以（1）揭示隐藏的功能和事件驱动关系，（2）呈现功能相关的代码片段，以及（3）支持学习者操作所提供的代码表示形式。为了揭示事件驱动关系，Isopleth实施了一种名为“序列化去匿名化”的新技术，以确定和可视化异步功能关系。为了评估Isopleth，我们对12个专业网站进行了案例研究，并对14名初级和高级开发者进行了用户研究。结果表明，Isopleth的理解支架有助于揭示一系列复杂专业网页应用中在事件绑定、网页应用设计和复杂交互特性方面的实现方法。此外，Isopleth帮助初级开发者将他们关于特性如何实现的概念模型的准确性平均提高了31%。