5Code – An Integrated Programming Environment for Beginners

1.1 From Problem to Program

It is a fairly common experience that beginners in the field of programming face bigger problems than just the syntax and semantics of programming languages (cf. [3, 8, 12]). A statement like “I know how to code a while loop, I just don’t know when to use it” shows typical trouble. The greater challenge, which is essentially the new concept to understand, internalize and apply, is the procedure that leads from the problem to the program solving it [2, 13]. Standard procedures already described in abundance in the form of software engineering methods in the large. However, for beginners a representation must be found, which does not itself raise new questions and distract from the novices’ problems of programming in the small.

Difficulties of beginners emerge in early stages, i. e. when dealing with the procedural aspects of programming, but the considerations made here are also valid for teaching object-oriented programming (OOP). The additional problems that encompass the understanding of OOP, as described for example in [3, 12, 21], even add to the more fundamental obstacles how to advance from the problem to the solution. Unlike, for example in in [21] or [3], OOP concepts were not in focus when developing 5Code, which nevertheless also helps understanding programming the OO way.

For teaching the basic OO concepts, other representations and visualizations (e. g. the DOOM principle [6] were developed, which are not elaborated here.

1.2 Cognitive Load

The cognitive load according to Sweller and Chandler [4] in solving tasks is very high for novice programmers (see also [3, 21]): Using their limited working memory which includes the cognitive context, they must simultaneously keep 1) the task itself, 2) their understanding of the task, 3) the semantic and 4) syntactic definitions of the used programming language. This defines the base context in which they must 5) develop a solution concept which they need to 6) type as correctly formatted and error free code, meanwhile 7) making correct use of the (complex) IDE (see Figure 1).

Figure 1

Cognitive load for programmers.

Unlike experts, beginners cannot rely on corresponding consolidated schemes and mental models in long-term memory and learned plans (see [3, 19]) to assist their problem solving. Thus, the cognitive load comprises at worst all seven areas and is therefore typically very high for most novice programmers.

1.3 Context is Often Lost

This cognitive overload can be observed repeatedly in lab session: after the first, often only superficial, reading of the task, novices tend to plunge immediately into the realm of coding (as the perceived most important part of their activity) and they remain in this narrow context. By focusing on the implementation in code, the actual task vanishes rather quickly from the working memory and thus from the cognitive context. In the best case, they check the task from time to time. However, not rarely they write code that has only remote connections to the task or the topic of the session. Many beginners lose themselves in their code, often frustrated that they cannot find a proper solution. In this situation it becomes more and more difficult to develop an idea or a concept of how to arrive at a fitting solution, hence their uncertainty grows – a vicious circle. These general shortcomings in problem solving was already described by e. g. [17].

This situation is further aggravated by the technical environment in that every integrated development environment (IDE) supports only working with code – in the form of program text or as graphical blocks. The task itself is never part of an IDE, it has to be opened in a separate program or must be carried on additional paper. Ideas or notes, the learner must additionally write and keep on paper or in separate files. Although one can write down notes in the code in the syntax of comments, this behaviour is never actively offered, let alone enforced by the IDE. It is up the learner himself to find the mental discipline to write down his concepts before coding them. This focussing on code applies unfortunately not only to expert IDEs but also to learning environments for novice programmers, as we show in the next chapter.

4.1 Structure and Procedure

To avoid this extra effort and thus free cognitive capacity to solve and to learn unhindered, 5Code provides the user with the entire context of all 5 steps in three panes as parts of a single browser window (Figure 4).

Figure 4

5Code-window: read it → get it → think it → note it → code it.

This structure ensures that learners do not need additional program windows, papers or files for the given task as well as for self-written notes. Instead, all artefacts are presented simultaneously, in every step. The entire context of the process always remains visible and directly accessible. When solving the task, in principle, the user works his way through the different panes from left to right.

4.2 Reading and Understanding

In the left pane, the given task is always visible. Since the task does not disappear into another program window when the learner writes notes or code, the task is present throughout the entire process and can be checked at any time. Hence, the learner does not have to memorize the parts of the task he is on; his cognitive load is thus reduced.

To support understanding the task, like in any text editor, any part of the text can be selected, which helps focussing this part. As long as the piece of text is selected, the learner can enhance the selection with a type and thus make it a marker. Currently these standard types are available: Generic marker (marker 1–3), which only highlights the selection in three colours without further significance, like a textmarker on paper. Furthermore, the learner can specify the marker in more detail to give himself a hint concerning the role the selected text could have. These implementation-oriented marker types are data, process, function, class. Each type comes with its own colour.

Many learners add short texts when analysing the text of task on paper. This is a valuable step toward understanding the task and is therefore supported in 5Code: A simple click on the marker opens a dialog (Figure 5). Initially the text of the marker is copied into the dialog; it can then be edited and expanded by the learners own musings and hints towards the implementation. Furthermore, in the head of the dialogue, the type of the marker can be set via a dropdown box.

Figure 5

Marker dialog.

By providing these markers and the possibility to type and annotate them, the phase of analysis with its operative steps read it and get it are well supported by 5Code.

The operational concept is very similar to the traditional work with pen, textmarker and paper, as well as work with common text software. There are even some web-services such as an annotation facility for web pages [9]. Therefore this functionality is easy to understand and easy to use. Moreover, 5Code provides singular benefits in that the markers can be edited and reused in the following steps.

4.3 Planning the Solution and Writing it Down

In current IDEs, the learner can write own considerations and hints usual only directly into the code window in the syntax of comments of the programming language. However, beginners should as long as possible refrain from actually writing code. This way they are encouraged to actually carry out the necessary preparatory steps prior to coding – and not to skip thinking in favour writing any code. Therefore, 5Code provides the explicit possibility to take and manage notes in a separate window: the note window in the middle of the browser.

A note may simply be entered as text at the top of the list of notes, as it is common for list-oriented software. This new note is then appended to the list as a generic note (Figure 6).

Figure 6

Directly entered note.

Furthermore, a note is automatically created when marking a part of text of the task: The highlighted text of the task is initially adopted as the title of the note. All notes are shown in a vertical list as shown in Figure 7.

Figure 7

Markers in the given task and connected hierarchical notes.

Notes can be moved and thus sorted via drag&drop. Firstly, the order of the notes can be changed. Additionally, notes can be arranged hierarchically, thus reflecting the logical relations between them. So you can, e. g. first individually identity and mark text snippets describing data, control structures, and other requirements of the task text with the appropriate type. After that you order the resulting notes in a fashion that they can be implemented in the next step. The final arrangement of the notes then corresponds to the learner’s own logical order of understanding, independently of the structure of the given task.

In order not to lose the overview within an extensive lists of notes, nested notes can be displayed or hidden away, a feature known as folding e. g. in file system explorers within the operating system or music software.

A learner can use his notes also as a todo list: If a task that has been defined by a note is completed, he can tick off the note in the list; the note then appears grayed out. Additionally, the list, can also be filtered by status: active, completed or both, so you can see at a glance, what is already done and what needs yet to be done.

4.4 Coding – Typing, Dragging, Testing and Roundtrip Engineering

Thus prepared by the steps reading, understanding, planning and noting, the learner can now (finally) start coding the solution. The coding part of 5Code currently supports Java, but is language independent and was also adapted for HTML / CSS / Javascript. The editor provides a number of comfort features as syntax highlighting, automatic indenting, folding, line numbering, bracket matching and tabs for multiple classes or files. These features do not hinder but assist the learning of how to read and write code in that they show structure and provide overview.

Deliberately not offered are advanced features such as auto completion, code generation and auto correction, although they are valuable tools that enhance the productivity of experts. But novices to programming must understand and learn these routine activities, no tool should take over these tasks for them. Learning by doing is only possible if the tool does not magically take over a part of the thinking process. Likewise, learners must make their own mistakes so that they can learn from them; an IDE that autocorrects simple errors or offers only valid functions or variables in the given context seems to be helpful but interferes with the learning process (see [16]).

However, 5Code does offer substantial support when coding. One of the usually least favoured tasks is the commenting of code. Learners who work systematically by highlighting text parts in the given tasks and produce notes which they enhance with their own descriptions will be rewarded: Their written thoughts and hints can be directly transferred into the code. Each note can simply be dragged and dropped into the Code window to the desired location: The title and comment of the note are inserted as line-comment (//) into the code; notes of the type function or class are added as javadoc-style comments (/ ** * /) as shown in Figure 8.

Figure 8

Drag and drop a note from List into Codeeditor.

The process of program development is often iterative, even for smaller tasks. For example, frequently only when actually coding it transpires that some information on data values or functionality are missing in comments or need to be corrected. 5Code helps by keeping markers, notes and code comments consistent: Each change to a note in the list of notes or via the marker dialogue is automatically made to the corresponding comment in the code editor. Likewise, any changes of a comment in the code editor, can be found in the respective note (Figure 9). All markers, notes and derived code comments share a single data model and are this automatically synchronised. This feature is called “roundtrip engineering” and can be found only in highly complex CASE-tools – and in 5Code: Here, the learner needs to write comments and thoughts only once, be it when reading and exploring the task, when writing and managing notes or when, finally, writing code. 5Code thus decreases both the cognitive and the mechanical complexity of typing a comment multiply and keeping it consistent across multiple phases of the development process. A welcome additional benefit is the clearly depicted connection between ideas of early stages and code in the final phase.

Figure 9

Marker → Note ← synchronized with → Code Comment.

4.4.1 Java Code

Java programs can be compiled, started and stopped at the click of a button at the bottom of the code editor (Figure 10).

Figure 10

Code-Functions: start, stop, compile, step through errors, options.

Text-output to System.out and System.err is displayed in the terminal window below the code editor. Special Unicode-characters can be used to create simple graphical output, typically for a game board or table views. In addition, the cursor can be moved across the screen via a subset of VT100-commands. The terminal window also transfers all keys typed to the usual System.in Stream.

Dealing with coding errors is an important part of the learning-by-doing experience; the error management of 5Code is therefore quite elaborate. Firstly, the compiler’s error messages are shown plainly on the terminal window. In order to support novices in dealing with errors – to enable them to learn from their errors – all errors are additionally displayed directly in the code editor in the tab and in the line in which they occurred, marking the line beneath the line number. The compiler’s error description is shown in a tooltip of the error marker (Figure 11). The arrows allow to advance to the position of the next and the previous error respectively.

Figure 11

Error management.

4.5 Preparation and Evaluation by Teachers

Teachers and professors are provided with a number of means of preparation and evaluation.

Tasks can be created and edited using popular WYSIWYG features for formatting, images or links can be integrated. If tasks are already available as formatted text, e. g. in MS Word, they can copied & pasted including formatting.

As e. g. [15] clearly show, it is useful especially for novice programmers, not to leave them alone with a text problem, but to lead them with additional references to “the right path”. In 5Code these hints need not be included in the text of the task itself, blowing up the amount of text and rendering it less understandable. Markers in the text can give hints, these can be enhanced in the associated notes and their annotation by text that seems helpful, yet not revealing too much of the solution.

In addition, you can provide code bits for learners, thus giving them e. g. a code frame to be filled out, methods and classes they can make use of but not need to code themselves. This keeps the students on the desired track, frees them from unnecessary typing and assists them in focussing on the intended topics. These helper code snippets can be provided in the same tab as the students’ solution or in additional tabs.

Task text, note list and code tabs are provided to the students in one single project. So, all parts of a given problem are delivered and worked upon together; no parts can get lost, all parts remain in synch.

Projects are managed in a familiar looking view (figure 12) on the dashboard of 5Code. Here, projects can be grouped in user defined folders. Folders can be made accessible to a select group of students by providing them with an access code that 5Code generates for the teacher.

Figure 12

Dashboard – managing projects.

In the dashboard, teachers can additionally open each project as it was saved by each student. This makes it possible to review, annotate and mark the students’ work. Online submission, assessment and correction is therefore supported.

5.1 Technical Requirements

A major technical requirement for the development of 5Code was to support all operating systems in order to expand the audience range. Therefore, the decision of a Web-App implementation was a practicable solution with additional advantages:

1. Fast deployment of new 5Code-Versions thru updates over a central webserver

2. Users can work in both the laboratory and at their computer at home without an external Flash drive to transport their work

3. 5Code can be used on mobile and hybrid devices like mobile phones and tablets

4. The development of the user interfaces is easier and can make use of innovative new Web-APIs

Besides these advantages, there are risks in terms of security, availability, performance, etc.:

1. Different Web-Browsers use different HTML / JavaScript / CSS implementations, which must be taken into account. So the development process become more complex.

2. Since javascript is not remarkably performant, computationally intensive functions on the web-client must be implemented with caution to minimize delays for the user

3. Network disconnections can happen at any time. The user may not lose data due to offline period, which calls for an intelligent storage of user date both locally and on the server.

5.2 Node.js as Server

The 5Code backend uses Node.js as the application server. The server code is written in JavaScript and accesses system resources such as file system and external processes by means of specialised APIs. JavaScript runs on a virtual machine based on V8. Applications based on Node.js therefore run on Windows, Linux and even on single board computers such as the Raspberry Pi.

Since 5Code is written both in the front- and in the backend in JavaScript, his results in advantages in the client-server communication and the design of the software architecture: Node.js uses a “non-blocking I / O” interface to minimize the delay of I / O operation. File system, database and external process operation are used asynchronously, so intensive I / O operations are not blocking the entire 5Code-Application-Server. This is particularly important in the 5Code backend system, because Java source code must be stored, compiled and even executed such that the running code is responsive to the user.

5.3 Develop Applications and Execution

5Code supports the development and test of both Java- and HTML-based applications. The integrated code editor (based on the CodeMirror library) allows working with source code in multiple tabs. The structure of the source code is limited to a single folder (or single package in Java), which is sufficient for beginners. Complex file operations are thus avoided, the user just stores all tabs at once without having to worry about file system operations. The editor also supports common features such as syntax highlighting for many languages, search&replace, undo&redo operations.

Similar to other IDEs, the overall structure that denotes the working context of a user is a project. A project comprises three parts that correspond directly to the three panes in the browser:

1. The given task

2. The user’s notes

3. The user’s code

A specialty of 5Code is the connectedness of all three parts via notes. Notes can be defined and appear in all three parts. A common model contains the text, type and options of each note, a special controller and view is responsible for creation, display and editing of the note in all three pars respectively.

A teacher can create a project as either a Java-project or a Web-project. These types are identical in the task- and the notes-part and differ only in the code-section.

5.4 Client-Server Communication

The communication between client (browser) and the 5Code server are handled by the library “Socket.io”. Socket.io is based on the Web-Socket Protocol and allows event based communication between Web-Browsers, Servers and is also implemented in native libraries for Android and IOS. The main benefit of the Web-Socket Protocol is the undocking from the HTTP-Protocol, so a lot of unused HTTP-header data vanish and the communication is efficient. Therefore, Web-Sockets are essentially used in interactive applications like 5Code.

We are using Web-Sockets for the entire communication between the user and the 5Code backend. Some of these communication events are: saving source code, file upload or the communication between the executed Java-program with the user.

5.5 Working Offline

Most Web-Apps need a persistent internet connection to communicate with the Web-App backend. This is necessary not only for storing and for retrieving data but also for extended functionality; 5Code uses the backend also for compiling and executing Java source code. However, the quality of a user’s internet connection is not always constant, e. g. when the user is using multiple providers such as DSL home and at university. Mobile connections are prone to change drastically in bandwith and availiability, especially when 5Code is used in public transport.

5Code respects these use cases and thus offers an offline usage function: users can choose to work in Online or in Offline mode. The main difference between Offline and Online mode is the availability of the mentioned server functionalities.

The main implementation challenge is not only the reconnect of the Client-Server communication, it is primarily the user authentication and the reconnect to the correct project and user database record. The user authentication is handled via persistent cookie session IDs. Each ID identifies a user-object on the server, which contains references to the user profile, user role, project database connection and status flags. This structure is bound to a Web-Socket and is rebuilt when a reconnect happens.

5.6 Performance and Persistence

Since the 5Code backend executes not only the server’s code but also the students’ Java code on the server in a sandbox, performance is important. Table 1 shows special use cases in which special actions are taken to provide the necessary performance of the interactive application:

Compiling Java source code can also increase the server load, but this is mostly irrelevant, since compiling terminates always and cannot be an infinity loop.

The 5Code backend stores all persistent user and system data in a file based database. One main requirement from the beginning was to build 5Code as easy as possible for users and the server administrator. Therefore, to avoid a complex installation and administration of a DBMS, such as Oracle, MySQL or MongoDB, we decided to use plain json files to store all data. This simple approach is very feasible in our context since the only operations are storage, retrieval and update of project data, no complex search operations are necessary.

Since all data of each project (task, notes and code tabs) are stored in one single file, each project is guaranteed to be consistent. This is important especially in 5Code due to the internal references between task, node and code, which are thus kept intact.

5.7 Security

Since 5Code is a web application, it is unfortunately prone to be attacked by anyone who is able to access the server. Security is therefore an important part of the implementation concept.

To ensure the security of a web application, the first step is to verify all communication channels that receive information from the user. 5Code uses a strict validation of incoming data through a validation on object schema. This schema defines the range of values of every data transmission type. Thus, an attacker can only transmit valid parameter to a 5Code-Backend function and is unable to insert other values to compromise the server.

The second security step is to use a secure HTTPs connection and to validate the webserver configuration over security services like “SSL-Labs”. However, even in the unlikely case of an intrusion into the 5Code server, it should not be possible to compromise the entire server. For this reason, the 5Code-Service is not running with “root” privileges on the host system. Since Node.js requires these rights to open webserver ports and other functions on startup, a two-way system is employed, where only when starting the server, all “root”-requiring functions allocate the required resources. Immediately thereafter, the main-process change his “UID” and revokes its root-privilege.

6.1 First Year Evaluation

Poll U1 – After 5 weeks of work with command line and a simple text editor: experiences with IDEs had about 2 / 3 of the participants (eclipse: 35 %, Visual Studio: 27 %), and 1 / 3 of “a little” or no experience. Half of those with previous knowledge had taught themselves, the other half had learned in school / education. Nearly 1 / 3 worked with a paper printout of the task, the others directly with the PDF file. 85 % of PDF users made virtually no own notes, although both marks and notes in PDF files are possible, and coded directly. Half of the paper users made marks or notes. Working with multiple windows found 1 / 4 to be cumbersome. On the other hand half found it desirable to link tasks, notes and code digitally. Both pragmatic and hedonic qualities of very simple tools such as command line and a simple text editor were rated neutral via AttrakDiff.

Poll U2 – 6 weeks after the first experiences with U1 5Code:

The AttrakDiff results show an improvement in the hedonic qualities, although technical difficulties have affected the assessment of pragmatic quality negatively. According the SurveyMonkey questionnaire, 30 % used marks in the task, 26 % made use of specific types of labels (e. g. loop, branch, …), 38 % supplemented own brief comments, at least 25 % even longer comments. 3 / 4 stated that 5Code helps reading comprehension. The hierarchical order of notes was used by 38 %, the ticking off of notes by 1 / 4. 2 / 3 always use the task window to refresh their memory. 60 % say that 5Code helps reflection and writing of notes. 90 % say that 5Code helps in coding. Approximately 1 / 4 use linking notes and code and evaluate it as very practical. 61 % would recommend to continue using 5Code, of which 32 % in any case. A further 26 % recommend 5Code with severe restrictions, which mainly referred to the elimination of technical “teething problems”.

Many suggestions were included in the ongoing development during the current semester and were already available for the next poll U3.

Poll U3 – After a further 5 weeks of experience with 5Code: This survey was numerically unsuitable for evaluation because there were (in the last week of the semester) too few returns. According to observations of the tutors there have been a lot of positive feedback, which is also supported by the further improved rating of the pragmatic and hedonic qualities in AttrakDiff. All initial problems could be eliminated, which meant that now 3 / 4 recommend the future usage 5Code. Approximately 1 / 4 of the students remained critical, especially because as felt patronized and would prefer to use a familiar IDE – but these are less than 50 % of the 2 / 3 of students with previous knowledge, the other half was satisfied. Particularly positively noted was the new design and the customizable themes in the code window (about 1 / 3 used immediately a “night design”), the folding of notes and the improved error management.

6.2 Second Year Evaluation

In the following year, a renewed and refurbished version of 5Code was used in the lab work with 113 students.

Poll U4: Again, the baseline survey was conducted after 5 weeks of work with command line and a simple text editor. experiences with IDEs had about 3 / 4 of the participants (eclipse: 32 %, Visual Studio: 31 %), where 1 / 5 claim “a little” experience and 1 / 4 “rather good” and “very good” knowledge. Those with experience are 40 % self-taught, 60 % learned programming in education. Only 1 / 6 worked with a paper printout of the task, the other directly in the PDF file. 89 % claim to keep the task only in mind when solving it. Even paper users make hardly any marks or notes. 51 % admitted to mostly coding directly without any notes. However, 37 % sometimes add comments in the code – not many, given that commenting is required. After all, 32 % at least sometimes makes separate notes on paper. This way of work was quite all right for 30 %, however, 45 % found it at least rather cumbersome to work with many media and windows, half of those admitted that therefore they wrote less comment than they felt they should. 30 % wished for a better integration of task and own notes, 24 % wanted to also integrate notes and code.

Pragmatic qualities of the simple tools in use were rated via AttrakDiff as neutral (0 on a scale from –3 to +3), hedonic qualities were rated as –0.5.

Poll U5 was conducted after 6 weeks of work with 5Code.

When working with the given task, 37 % used the marking of text, 15 % made us of type-specific marking (class, control, data, etc.). In addition, 37 % added short comments, 15 % added longer comments. 37 % also added sketches on paper, but only 2 % used a printed version of the task. 78 % found the support in this phase helpful, ranging from “a bit” (54 %), “quite” (22 %) to “a lot” (2 %).

Notes were used to a variety of ends: “adding own comments” and “ticking off notes” (24 % each), “getting an overview” and “hierarchical structuring” (30 % each). The feature of the drag and drop of notes into the code was announced in emails and documents regarding the use of 5Code and was additionally demonstrated in the lecture. Still, surprisingly, only 15 % made use although this relieves the students from having to type comments twice. 63 % said that they were “a bit” helpful, for 12 % “quite helpful” and for 5 % “very helpful”.

When it finally came to coding, 76 % used the given task in the same window for reference, 27 % used their own markers and 15 % used their notes as comments in the code. Only 27 % claimed to use the error management, which is astounding since errors in coding are the norm. 22 % changed the theme for the display colours. 58 % found the support in coding “a bit” helpful, 24 % “quite” and none “very” helpful.

40 % found it “rather convenient” to be able to work in the integrated environment of 5Code, 15 % said this to be “very convenient”. To be able to add annotations directly when reading the task was valued as practical by 44 %, 22 % wrote more comments this way. The connection of task and notes was valued as practical by 27 %, the connection of notes and code by 17 %.

5Code was rated overall “a bit” helpful by 20 %, “quite helpful” by 61 % and “very helpful” by 15 %. 88 % recommended the use of 5Code in former lab work (39 % without reservation, 39 % with few reservations).

Both Pragmatic and hedonic qualities of 5Code were rated via AttrakDiff as positive / neutral (0.5 on a scale from –3 to +3).