Design Approach

neuron is an extension built in Typescript, an easy-to-use super set of JavaScript. Angular CLI was chosen as the front-end framework, as it meshes seamlessly with Typescript when developing modular code. Node.js was used as the development environment to build the Visual Studio Code extension.

The Waterfall model was chosen over the Agile model for software development. Once the design of the first version of the software met base requirements, the implementation of further features was modular in nature and based on user feedback. Verification was carried out by comprehensive unit testing of features, which enabled maintenance and bug-fixing to be carried out efficiently.

A GitHub repository was set up to manage source code, raise issues and create branches to introduce new features. Once a basic implementation of the project was completed, issues were generated to summarise the new features to implement and the problems to solve. The issues were assigned to the persons to split the amount of work equally.

Link to issues with assignments and description

Furthermore, weekly team and client meetings were held with Microsoft. A constant communication channel with the team was provided through dedicated Slack channels and emails. Fortnightly progress reports were sent to the Imperial supervisor as well as the Microsoft team.

Technologies Adopted

Typescript

Typescript is a language created by Microsoft which adds type-safety support to javascript. It is the main language of choice when creating extensions for VSCode as it allows compilation of the written code and reduces the possibility of runtime errors.

Angular

Angular is a front-end web application platform; it allows a modularisation of the front-end components as well as a scalable platform to develop resilient user interaction models. The framework was chosen by the team as it allowed multiple people to contribute to the front-end concurrently by subdividing the work into multiple components.

Github

Github was the tool of choice for source control. Git easily allowed the team to contribute to the project in a efficient manner, by keeping track of the required changes and the issues present in the codebase.

User Interaction Model

The user interaction model adopted was aimed to limit complexity. This was achieved by hiding most of the environment setup and complications from the user, allowing a seamless experience. The user can concentrate on the coding and does not have to worry about code execution and missing dependencies. The extensions tries to ease the development by providing auto installation of missing libraries as well as auto import of modules to facilitate iterative executions.

Expandability of the Extension

The extension was developed in a language agnostic way in order to allow future expandability. The entirety of the backend and frontend codebase can be reused to add support to new kernels. Some language specific routines in the backend are necessary to support kernel switching and Jupyter export, however no more than a few dozens lines of code are necessary to support new kernels.

Frontend Styling

HTML and CSS

Although the Angular framework is used to perform the frontend functions, the styling is done entirely in HTML and CSS. The first stage of styling was to get the basic styling classes and property for the elements down. This meant that to adjust the style of any element, these property values would just need to be adjusted and tweaks, no new markup would be needed. This allowed the styling to be changed quickly so that many different stylings could be evaluated in a short space of time.

Compatibility

The styling adapts to the user's VS Code colour theme to allow optimal readability and good contrast. This ensures the extension is uniform with the rest of VS code. The icon and button styles and colours were chosen to integrate with the design model of VS Code. The Output Pane is designed to dynamically adjust to different screen sizes. Furthermore, the user accessibility is aided though the presence of tooltips on hovers.

Design Changes

The look of the cards has changed considerably over time. Changes were tested internally within the team, and then after the internal feedback had been taken into account, we looked for community feedback.

Original

First Version of the card was very basic.

Different Design Style

A different design was tested to look more "native" to VS Code. The design moved away from the card approach, however users found it hard to distinguish between blocks.

Final

The final design moved back to a more obvious card design similar to the original. Fonts, Icons and Colours were all refined from previous versions to match Microsoft and VS Code.

Feature Changes

Select

This was originally implemented as buttons on cards; however, users found themselves accidentally altering and deleting cards so this was instead integrated into the toolbar. When used, the interface is turned into ‘Select Mode’ which disables all card functions, preventing accidental edits.  

Sorting

In an early build, the user was able to sort cards by time or alphabetical order. However, after the search and filter were implemented, this feature was hardly used so it was removed to streamline the interface.

Executing Code

After receiving feedback from one of the surveys, it was found that a large percentage of people wanted to execute code using different methods. As a result, a command and a right-click dropdown menu were added. This enables the user to run their code however they want, meeting the needs of 95% of the survey group.