The Design and Implementation of Venbrace, a Text Language for App Inventor Ruanqianqian "Lisa" Huang Submitted in Partial Fulfillment of the Prerequisite for Honors in Computer Science under the advisement of Franklyn A. Turbak May 2020 © 2020 Ruanqianqian Huang Abstract Blocks programming environments (BPEs) lower barriers to programming using visual code fragments that prevent syntactic and static semantic errors and reduce cognitive load. App Inventor, for example, provides a BPE that helps programmers of all levels to build mobile device apps easily. However, visual blocks notations can make programs more difficult to read, write, edit, and share. Dual-mode environments that allow bidirectional conversion between isomorphic blocks and text representations can leverage the benefits of both modes. Having recognized the advantages of allowing textual editing as a plug-in in BPEs, I have designed Venbrace, a fully-braced textual syntax isomorphic to the blocks- based programming language in App Inventor, based on a collection of design princi- ples. I implemented a lexer, a parser, and a syntax editor for Venbrace. To ensure the usability of Venbrace, I also developed, conducted, and did a preliminary anal- ysis of the first round of a user study (with 17 subjects) to evaluate its initial syntax design, determine some design choices, and explore possible improvements. This project aims to (1) increase App Inventor’s general usability, (2) maximize the usability of Venbrace through user studies, and (3) confirm the benefits of evidence-based programming language design. Keywords: App Inventor, Blocks Programming, Evidence-Based Programming Lan- guage Design, Human-Language Interaction (HLI) Acknowledgments First and foremost, I would like to express my sincerest gratitude to my advisor, Pro- fessor Lyn Turbak. Despite being on sabbatical for the year, he had graciously agreed to advise me on this thesis and has spent countless meetings and discussions with me to fine tune the project. Had I not taken CS 251 on Principles of Programming Lan- guages with Lyn, I wouldn’t have discovered my academic passion for programming languages. I could not have arrived at this point without his guidance and support for me, my academic career, and my life. Next, I would like to thank my thesis committee, Professors Eni Mustafaraj, Catherine Delcourt, and Robbie Berg, for taking an interest in this work and putting in the time to provide insightful ideas and helpful feedback. I would also like to thank Dr. Andreas Stefik from the University of Nevada, Las Vagas for answering my questions on his user study on programming language syntax evaluation, which sets the foundation for the user study in this project. Thanks to Professor Sohie Lee, my major advisor, for all the mentorship since the beginning of my journey in Computer Science. Thank you to everyone at the Computer Science department who has taught me so much, supported my endeavors, and encouraged my academic pursuits. Thanks to the Jerome A. Schiff fellowship that funded this project. I especially would like to thank Huihan Li, the best friend, roommate, and partner- in-crime I could ever ask for. I am grateful for having her always by my side during moments of ups and downs throughout my four years at Wellesley. I am also thank- ful for the 24/7 support from all my friends around the globe when I encountered problems. Diane A Yi, and the rest of the Boggess family – I cannot thank them more for providing me with a shelter & home-away-from-home in the past four years and es- pecially during the current pandemic of COVID-19. I could not have focused entirely on this project since the beginning of the pandemic had it not been for their kindness. Lastly and most importantly, I am thankful for my family, for supporting me in my academic pursuits and always having my best interest at heart. On a concluding note, my final acknowledgement goes to Yuzuru Hanyu, the greatest figure skater of all time. I thank him for being my hero and pushing meto always challenge the unknown. Contents 1 Introduction 1 1.1 MIT App Inventor . .2 1.2 Challenges Facing App Inventor Users . .3 1.2.1 Code Reading and Navigation . .3 1.2.2 Viscosity . .4 1.2.3 Sharing A Whole Project, or Just A Part of It . .5 1.3 Existing Mechanisms to Solve These Challenges . .6 1.3.1 Block Operations for Better Navigation . .6 1.3.2 Support for Faster Block Creation . 11 1.3.3 PNG Exports for Partial Project Sharing . 12 1.4 Venbrace: An Even Better Solution . 12 1.4.1 Venbrace: A Text-based Language for App Inventor Programs 13 1.4.2 The Design of Venbrace .................... 14 1.5 Contributions . 16 1.6 Road Map . 17 2 Related Work 19 2.1 Empirical Studies of Programming Languages . 19 2.1.1 Background and Motivation . 19 2.1.2 Investigation into Programming Language Syntax . 20 2.1.3 Studies Comparing Blocks and Text Languages . 21 2.2 Hybrid Systems: Improving BPEs by Incorporating Text . 22 2.2.1 Using Text in GP . 22 2.2.2 Frame-Based Editing . 23 2.2.3 Typeblocking . 24 iv 2.3 Dual-Mode Programming Environments: Bidirectional Isomorphism between Blocks and Text . 24 2.3.1 Existing DMPEs . 26 2.4 Ad Hoc uses of Text With Blocks Languages . 28 2.5 Translating App Inventor into Text . 29 2.5.1 App Inventor to Python . 29 2.5.2 App Inventor to TAIL . 29 3 Design Principles 32 3.1 Evidence-Based Language Design . 32 3.2 Bidirectional Isomorphism . 32 3.3 Blocks Are Primary . 33 3.4 Concise Alternatives . 34 3.5 Support Copy/Paste . 35 3.6 Internationalization . 36 4 Initial Design 37 4.1 Venbrace Syntax . 37 4.1.1 Expressions . 38 4.1.2 Statements . 43 4.1.3 Declarations . 44 4.2 Translations that are not Obvious . 47 4.2.1 Multi-Word Key Phrases . 47 4.2.2 Labels on Expression Sockets . 48 4.2.3 Labels on Statement Sockets . 49 4.2.4 Event Handlers Parameters . 51 4.2.5 Procedure Names and Procedure Parameter Names . 51 4.2.6 Local Variable Declarations . 52 4.2.7 Global Variable Declarations, Getters, and Setters . 53 4.2.8 Undecided Abbreviations for Setters . 54 v 5 Implementing Venbrace 55 5.1 Overview . 55 5.2 Parser Generator . 55 5.3 Lexing Venbrace ............................ 56 5.4 Parsing Venbrace ............................ 57 6 A Syntax Editor for Venbrace 59 6.1 Motivation . 59 6.2 Implementation . 61 6.2.1 Brace Auto-Completion . 61 6.2.2 Brace Matching and Balancing . 61 6.2.3 Keyword and Block Extent Highlighting . 62 6.2.4 Keyword-Based Formatting . 62 7 Online Venbrace Syntax User Study 64 7.1 Overview . 64 7.2 Goals . 66 7.3 Methods . 67 7.3.1 Participants . 67 7.3.2 Procedure . 68 7.3.3 Instruments . 70 7.3.4 Data Overview and Analysis . 86 7.3.5 Pilot Study . 87 7.4 Results . 87 7.4.1 Pre-survey . 87 7.4.2 Translation Typing . 89 7.4.3 Preference Ranking . 93 7.4.4 Preference Typing . 95 7.4.5 Post-survey . 97 7.5 Discussion . 99 7.5.1 Evaluation of Current Design . 99 vi 7.5.2 Going Forward . 102 7.6 Limitations . 103 7.7 Conclusion . 105 8 Conclusion and Future Work 107 8.1 Current State . 107 8.1.1 Venbrace Syntax . 107 8.1.2 Venbrace in App Inventor . 109 8.1.3 Support for Venbrace ..................... 109 8.2 Immediate Future . 110 8.2.1 An Improved Syntax Design . 110 8.2.2 More Thorough Data Analysis . 110 8.2.3 More User Studies on Venbrace Syntax . 111 8.3 Near Future . 111 8.3.1 Venbrace Support for All App Inventor Components . 111 8.3.2 Handling Known Ambiguities Better . 111 8.3.3 Venbrace in App Inventor . 112 8.3.4 Automatically Updating the Venbrace Lexer and Parser . 112 8.3.5 Support of Internationalization . 114 8.3.6 Improving the Syntax Editor . 115 8.3.7 Simple Error Reporting . 116 8.3.8 Importing/Exporting App Inventor as Venbrace ....... 116 8.3.9 Testing and User Studies on Venbrace-in-App Inventor . 117 8.4 Far Future . 117 8.4.1 Preserving All Editing Features of App Inventor in Text Mode 117 8.4.2 More User Studies on Using App Inventor Incorporated with Venbrace ............................ 118 8.4.3 Error Reporting . 118 A Round 1 Study Materials 123 A.1 Pre-study Survey (Activity 01) . 123 vii A.2 Tutorial/Task Section 1 (Activity 02) . 123 A.3 Tutorial/Task Section 2 (Activities 03-05) . 123 A.4 Tutorial/Task Section 3 (Activities 06-13) . 125 A.5 Tutorial/Task Section 4 (Activities 14-18) . 128 A.6 Tutorial/Task Section 5 (Activities 19–22) . 130 A.7 Tutorial/Task Section 6 (Activities 23–27) . 132 A.8 Tutorial/Task Section 7 (Activities 28–30) . 133 A.9 Tutorial/Task Section 8 (Activities 31–36) . 135 A.10 Tutorial/Task Section 9 (Activities 37–41) . 137 A.11 Post-study Survey (Activity 42) . 140 B Round 1 Study Data 145 B.1 Translation Typing . 145 B.2 Preference Ranking . 155 B.3 Preference Typing . 170 C Venbrace.g4 184 D Implementation of TAM in JavaScript 191 viii 1 Introduction Computer programming can have a steep learning curve. Learning to use.