Take this idea: TouchEdit, the IDE for mobile devices
July 10, 2021 - Tech
This is just an idea I had while trying to implement a gamepad navigation API for Blockly. Feel free to take it, and implement it. If you do, let me know, because I’d like to check it out.
- The mission
- Goals and non-goals
- Boilerplate
- Auto-completion
- Refactoring
- Import your project
- Code executions
- VCS integration
- Code compression
- Parting thoughts
The mission
In the year 2021, we have two important developments:
- More people are working remotely than ever before.
- More kids are learning to program than ever before.
Both of these demographics are likely to use phones or tablets for a solid portion of their work. For adults, it might be because they are commuting/travelling often. For the kids, it’s probably because those might be the only internet connected devices they have access to.
Typing large amounts of code, or even editing a non-trivial amount of code on a phone or tablet is extremely hard these days. And, for children just learning computer programming, the large number of keywords, and esoteric library calls can be intimidating.
Instead, could we design a development environment that minimizes the number of keystrokes? Specifically, is it possible to create an IDE (integrated development environment), like IntelliJ or Visual Studio Code, that is completely optimized for smartphones and tablets? There have certainly been attempts to create IDEs for mobile devices. A couple include DroidEdit, and Code Editor, and these are important to study. Particularly interesting is the rationale for Code Editor being discontinued by Panic.
These previous solutions rather than being a fresh take on editors for mobile devices, instead bring desktop paradigms to mobile. I will demonstrate how to make an IDE specifically tailored to mobile devices. It didn’t work for all the developers who tried it before us, but…
Goals and non-goals
To make sure we know what we’re aiming for. Let’s define some goals as well as non-goals.
Goals
- Allow users to perform simple editing tasks quickly. These include:
- Refactor symbol (variable/function/type) names.
- Change project file structure.
- Small functionality changes to fix minor issues and bugs.
- Allow users to push files to a version control system, such as Git or Mercurial.
- Allow users to run their code easily on a remote machine to reproduce bugs/issues.
- Allow users to write simple programs (< 300 lines of code).
Non-goals
- Allow users to write full applications from scratch.
- Allow users to test locally/on-device.
- Do not replace the user’s desktop IDE.
Boilerplate
When you are writing new code, it should be possible to skip all of the boilerplate, and just type in the parts that I really need to type such as function/variables names. Everything else should be easily available in a “snippets” menu that contains blocks of code to put into place. In this sense, the IDE should be less of a text editor, and more of an interactive form. You just need to select all of the right templates, and fill in the blanks.
In the picture above, the highlighted boxes are the non-boilerplate parts of the program that the user can modify. When you want to add some code, you can open a snippets menu to insert a block.
Once you select a snippet, you just need to fill in the blanks.
Auto-completion
Along with providing a menu of snippets, any blank space that can be filled in should have some suggestions of what can go there. Ideally, the IDE will take type-checking so that only valid suggestions are provided to the user.
Refactoring
Similar to Visual Studio Code, IntelliJ, and other IDEs, you should be able to do simple automatic refactorings, such as variable renames, moving files to new locations, etc.
Import your project
You shouldn’t have to write all of your code from scratch to work on this IDE. If you have an existing codebase, it should be easy to edit it using this IDE. This allows the user to make preliminary changes on the phone or tablet, and then perhaps take care of the finer details on their desktop later.
Code executions
A big part of writing code is running your tests, and executing the program. If you could integrate with something like Repl.it to run your code, that would make the developer experience much smoother.
VCS integration
Obviously, most non-trivial programs are hosted on some version control system, whether that be Git, Mecurial, SVN, or even Perforce. So, having some sort of VCS integration (especially given we are on mobile) will be critical.
Code compression
Most codebases format their code to be somewhere between 80 characters and 120 characters. Showing all of that code on a phone will be a challenge. For example here’s how some of the code for this website appears when you view it on my phone through GitHub.
Given that we are already going to be parsing out all of the boilerplate, such as keywords, and delimeters, we might be able to compress a lot of the code into readable pseudocode.
You might even be able to smartly compress the code when viewed on a smaller phone.
Parting thoughts
There are surely many quality of life improvements that I must have missed in this proposal, like proper syntax highlighting, custom color themes, and extensions. But, Rome was not built in a day, and this proposal is just the bare minimum to get somebody to actually use TouchEdit (the name could use work too). So, I leave the rest as an exercise to you, dear reader. And, if you do manage to steal and execute this idea, please let me know, so that I can see whether I want to take it back. 😀
Let me know what you think about this article by leaving a comment below, reaching out to me on Twitter or sending me an email at pkukkapalli@gmail.com