Client

Kyle Harms
Email: <kyle.harms@cornell.edu>

Student contact

Connor Hahn, <cah393@cornell.edu>

Background

The client has written the following description of the project.

Blocks-based programming languages use a drag and drop mechanic to enable novices to produce computer programs without syntax errors. Instead of typing syntax, programmers drag blocks of code as they assemble their program on a canvas. See http://k12maker.mit.edu/block-based-programming.html or https://en.wikipedia.org/wiki/Visual_programming_language

Blocks-based programming languages have been found to be extremely effective in teaching programming. Because blocks-based language eliminate syntax errors learners can focus on learning the basic principles of programming (iteration, looping, branching, etc.) without having to learn the complex syntax.

The blocks-based programming environment Alice (http://www.alice.org/) was designed specifically to teach incoming college students programming. Initially students start by using only blocks and later transition to using syntax. This approach was found to help students learn programming more quickly and with less misconceptions compared to traditional approaches that teach programming principles concurrently alongside programming syntax.

Project summary

The goal of this project is to take the open-source blocks-based programming language, Blockly (https://developers.google.com/blockly/), and integrate it into an existing programmer's editor, Atom. Instead of using a custom-built programming environment like Alice, the idea to to have college students learn programming in an 'authentic' programmer's tool but leveraging approaches that improve the experience of learning programming, like blocks.

In this project, you will develop a reusable React component for Blockly. You will then integrate your Blockly component into the Atom programmer's editor. The Blockly integration will be built as an add-on package that users can install in their Atom installation. INFO/CS 1300 will use this new Blockly support to introduce JavaScript to students and then transition to programming with JavaScript syntax.

Goals

1. Develop a re-usable Blockly React component.

   Currently a Blockly React component exists, but it is not workable to integrate this component into Atom. You will need to develop a new component that can be integrated into Atom. Due to Blockly's non-modular architecture (Blockly is mostly built with global variables) you may need to modify Blockly's code base for this project.

2. Build full blocks-based language support in Atom.

   You will need to develop a language plugin for Atom for blocks-based languages. Blocks-based programming should have equal functionality to syntax based languages: it must support creating new blocks programs, editing existing blocks programs, saving, undo, redo, etc.

   Your approach should not depend on Atom's architecture. Rather your language support should be written generically so that with minimal effort Blockly support can also be added to Visual Studio Code. Fortunately the Blockly library already supports these features (save, undo, etc.) and all you need to do is call the appropriate Blockly functions in the respective Atom callbacks.

3. Integrate all modifications into upstream repositories.

   If any changes are needed to existing open-source code bases, you will need to work with those communities to integrate your changes back into the project. Forked code bases are often not maintainable and are not a workable solution in this project.

4. Development follows User Experience (UX) and Human-Computer Interaction (HCI) best practices.

   As an HCI practitioner, I will help the project team with requirement. I will expect user testing to be conducted to ensure the target audience (novice programmers/college students) will be able to effectively use the blocks-based language support.

About the Client

I am a lecturer in Information Science at Cornell. I specialize in novice/end-user programming and HCI. I teach INFO/CS 1300 and INFO/CS 2300. The work done as part of this project will be used to help the students in these courses. It is very likely that other introductory programming courses at other universities will also utilize this work.