SKot: A web-based Structured Code Editor for introductory programming in Kotlin

Abstract

The use of Structured Code Editors such as Scratch for introduction to programing, especially at a younger age is prevalent in modern education systems. Transitioning to text-based editors sometimes proves to be challenging for beginners especially when it comes to learning the syntax of a modern language. This work goes into the research on Structured Code Editors and delves into the implementation of a Projectional Editor that presents the code to the user as it would appear in a text-based editor in a modern programing language such as Kotlin, while preserving syntactical correctness during edits. A web-based editor, named SKot for Structured Kotlin was implemented using JavaScript (JSON, React and Redux). A technique for implementing the Projectional Editor using these technologies is described in detail. Then, SKot is compared to other modern code editors and further work is proposed to improve it.

O uso de Editores Estruturados de Código como o Scratch para introdução à programação, especialmente em idades mais jovens, é prevalente nos sistemas de educação modernos. A transição para editores de código baseados em texto pode ser desafiante para iniciantes, principalmente no que diz respeito à aprendizagem da sintaxe de uma linguagem moderna. Este trabalho explora a investigação atual sobre Editores Estruturados de Código e explica a implementação de um Editor Projecional que apresenta o código ao utilizador com a mesma aparência que teria num editor de texto numa linguagem de programação moderna, como Kotlin, enquanto preserva a correção sintática durante edições. Um editor no web browser, chamado SKot (Structured Kotlin), foi implementado usando JavaScript (JSON, React e Redux). Uma técnica para implementar o Editor Projecional usando estas tecnologias é descrita em detalhe. Por fim, o SKot é comparado com outros editores de código modernos e descreve-se trabalho futuro relativo a melhoramentos no mesmo.