We code as in the old days, or IDE for teaching basic programming

Basic JS syntax, plus 4 features
Basic JS syntax, plus 4 features

Once upon a time, when the grass was greener, the screens were smaller and the enthusiasm was greater – many started programming with Turbo Pascal, or even Basic. Now, in the era of frameworks and libraries, you can’t write an ordinary hello world without a bunch of boilerplate. Or will you write …?

Background

8 years ago, in my first year, I heard an interesting phrase from a teacher. It sounded something like this: “A good programmer knows dozens of languages ​​at once.” Then I thought that this was some kind of terrible exaggeration, for a beautiful word. Here 90% of the group is pushing at the poor Pascal, and you are talking about dozens of languages! Of course, after years I understood everything. Indeed, if we are talking about mainstream languages, then they are all based on the same concept – variables, branches, loops, functions. Yes, different syntax, a bunch of this or that sugar, all sorts of generators, generics, etc., but the essence remains the same – most of the code is variables, branches, loops, and function calls. And precisely because of this, a normal developer can in the evening delve into the syntax of a new programming language, and learn something on it. Yes, it will be crooked, not Feng Shui, but it will work. This is the base. How to teach it?

Big holivar

People are divided into two types – those who fondly remember Turbo Pascal / Basic, and those who hate them. If you are from the second type, you can close the page, you will not be interested here.

Those who fondly remember these languages, almost toy by modern standards, love them not for their power, convenience, or great flexibility. They are loved for being as simple as possible guides to the world of code. 14 years ago, to start coding in Basic, I needed only one .exe file, and a thin book. Everything! And to display the first “Hello world!” – one command was enough! Moreover, it was insanely understandable – PRINT. Already a week later, I riveted some nonsense programs like quizzes, “chat bots” (funny, yes), and other nonsense. And it was damn interesting! At the same time, “interactivity” was provided extremely simply, it was possible to read commands from the user literally with one function.

Perhaps involuntary mixing of old school

So what don’t you like now?

I like everything, but it has become more difficult. Harder for beginners. I will explain what I mean – just like any programmer (well, probably) from time to time friends / acquaintances approached me, they say, tell me what it is, this is your programming, maybe I want to. And in fact, in order to acquaint a person with the world of programming, he needs to show exactly those 4 basic concepts – a variable, a condition, a cycle, a function. Well, and somehow demonstrate their work, of course. And this is where difficulties come.

In many online courses for beginners, sooner or later the phrase “just copy this code until you need to know what it does” appears. And I don’t know about the others, but at one time it really pissed me off. I wanted to know why I need to write more than 6 lines in Java for Hello world! What is this class Main, and why does the function accept an array of strings, and what is an array in general?

As they say – I did not understand anything.

Earlier, in order to demonstrate to a person the work of the program, you said “Look, here is the Print command, it prints what you need on the screen. And here is the screen itself.” And now? “So, here you need to write system.out.println, so that it outputs. Then you will understand. Oh, yes, and first you need to write Php so that the compiler understands that this is the beginning of the program. Oh, yes, declare a class with the main function." And damn it, you still need to connect the package for outputting lines. ". Yes, there are languages ​​where the boilerplate is smaller, but if this is not your profile language, you need to download them, run the environment, etc. Much more body movements than before.

Let us suppose. And what do you suggest?

Javascript!

No, really. Let’s take an objective look at the merits:

  • already in every microwave every pc. Browser is always at hand

  • C-like syntax. IMHO, this is a big plus. The same Python with its spaces, IMHO, is not so easy for beginners who like to slap everything in almost one line.

  • Wildly mainstream language, which means that a person will not learn an analogue of IT-Latin

Sounds good? To run everything is already on almost any PC, the language is popular, the syntax is good. What about the cons:

  • loose dynamic typing. For a start, of course, it would be better with her. well

  • there is still no easy way to display and receive something from the user

Now someone will say: yes, well kudaa it for a start, in the same place a-si-nhro-ness! Horror! And also 0.1 + 0.2, and all that. And I will say that for the right start (that is, for “playing around” and for working with algorithms) this is not a hindrance. And in general, we are talking about completely green beginners!

In total, I decided to try to overcome two shortcomings in order to get a good platform for simple coding.

What is typing?

Never mind. The first thought, of course, was TypeScript! I heard that there is such a thing, and the name unambiguously hints. In fact, it turned out that the types are not checked in runtime, but it is compiled into regular js. The typed idea remains open.

Well, okay, but what about I / O?

It would seem that it is already ready. Browser js has prompt (), alert (), and even console.log () out of the box! Of course, for nice, fast, and simple coding, none of this is good enough. The devtools console is not intended for this at all, and prompt is just a legacy horror.

Therefore, in a nutshell, I created a semblance of a command line right in the browser, and the I / O is there, synchronously. Thus, 4 more functions “appeared” out of the box – write, writeln, readln, and wait. I think we don’t have to talk about their purpose (although there is still help there). As a result, you can write in js, with the simplest possible synchronous input-output. Perfect for learning, working with algorithms, etc. In short, for everything that was previously done in BASIC and Pascal. If there is demand, you can even screw up the turtle’s graphics, as in the good old CRT

Persuaded, show

Step one – we write the code in the style of youth crafts in Pascal. No callbacks, working with the DOM tree, and other complexities

Step two – launch, see how the input awaits us

Step three – we enter everything that is asked of us, the “program” is completed!

The project does not require a backend, it works purely on the client, so I uploaded it to the github, you can go in and try

Outcomes

Answers to expected questions:

Why does this project exist? First, the desire to recreate childhood experiences. Secondly, just because I can, and playing with the AST tree was so much fun in general.

What is the project suitable for? For learning, experimentation, entertainment. What is not suitable for? For real development.

Why javascript and not% languagename%. Because javascript runs natively in the browser, and it is easy to implement a pseudo-console connection in it. It would be more difficult with any other languages ​​if we are talking about the framework of a frontend-only project.

And how does it work so synchronously, waiting for input? Light modification of the AST code before launching, and then the usual async-await.

Why is the project called a penguin? Yes, just because penguins are cool, but they had to be named somehow

And why? And therefore.

Once again, a link to try, I’d love to see suggestions in the comments, thank you for your attention!

Similar Posts

Leave a Reply