play VS proposal-decorators

Cool to see Kaboom on HN again! Kaboom is the culmination of a multiple attempts at creating a game programming environment aimed at new coders.

It started a few years back when we noticed that many kids come to Replit from Scratch and get lost trying to find the best way to make games. There are many ways to make games with Replit -- pygame, html, love2d -- but based on our research there was still a big gap between the focused and intuitive experience at something like Scratch and anything that we offered at Replit. It felt like we were letting them down.

We thought in order to meet their needs we needed something that satisfied the following constraints:

1. required no setup, importing modules, or any other scaffolding before you start coding

2. had powerful primitives to make something interesting in a handful of lines of code

3. Simple programming model

4. easy to import and use images and other assets

Our first attempt at this was a Python library called Play (https://github.com/replit/play). Play satisfied many of the constraints but because it was written in Python, and we execute Python on the server and stream graphics down to the client via VNC (https://blog.replit.com/native-graphics-love), the experience wasn't uniformly good for everyone using Replit. For example, for kids in India it was really bad (since then we started replicating our servers in India and other places in the world https://blog.replit.com/global).

Our second attempt was a classic BASIC implementation. BASIC was easy to get started with, it had zero bloat, and you could get something on the screen quickly. Sadly, users grew out of the language really quickly. BASIC made simple things straightforward but anything slightly more advanced was hard to impossible to make. I kept trying to evolve the language until it became kind of like QBASIC (optional line numbers, labels, etc). But it felt like sisyphean task.

BASIC HN discussion: https://news.ycombinator.com/item?id=23052050

BASIC docs: https://docs.replit.com/misc/basic

Last year, around the same time I gave up on "completing" BASIC I saw a job application come in for a designer from an indie game dev Tga. Tga was not only a great designer but also an awesome programmer, so we hired him. I pitched him on this project, we started prototyping it in Replit and got something working fairly quickly (early prototypes here: https://replit.com/@gameenv). When we rolled out an alpha version the most surprising thing that happened was that people on our team got addicted to making games. We weren't the target audience, but that's always a good sign. Then kids in our community started having a lot of fun with it -- the more we tested the more conviction we had that we had a solution to the problem.

The last few months we spent working on the Kaboom environment on Replit. It has an awesome asset editor, and a kick-ass debugging tools. And pretty soon we're going to have great autocomplete and intelisense.

To learn more check out the following:

- Kaboom blogpost: https://blog.replit.com/kaboom

- Show HN by designer: https://news.ycombinator.com/item?id=26728774

Some games from the community:

- ReplJewled https://replit.com/@ConnorBrewster/ReplJeweled

- Flappy Mark https://replit.com/@slmjkdbtl/flappymark

- Bamboo Ninja https://replit.com/@RoBlockHead/KaboomJam

- Cookie Vs Oreo https://replit.com/@Coder100/COOKIE-VS-OREOS-KABOOMJS-BOOMOM...

There is a python game framework called Play that emulates Scratch's API. With a function decorator, we can import Play's elegant syntax to JavaScript.

Python Play is an abstraction layer built on top of PyGame that makes it easy to build a more advanced game than with Turtle, but without needing to understand all of the concepts required for PyGame.

Because many rules are common to many attributes (the coerceType operation is defined by WebIDL, or using similar rules, and the HTML specification defines a handful of microsyntaxes for the parseValue and stringifyValue operations), those could be packaged up in a helper library. And with decorators coming to ECMAScript (and already available in TypeScript), those could be greatly simplified:

Decorators are currently not a part of the standard JavaScript language. They are still being discussed in tc39 and have reached proposal stage 3. This means the spec has more or less stabilized and we can use them but they would be transplied before being run in the browser. This would be done via babel or tsc for most users

JavaScript was created a long time ago, and at the time of its inception, the authors decided not to use affirmative prefixes for boolean names. Now, they do their best by continuing to follow their convention, even if it goes against the community's opinion. Even if the authors wanted to introduce new naming conventions in the specification, they could not do it, at least not coherently. Old code cannot be renamed because JavaScript must remain backward-compatible. And starting to write new code using new approaches is not a great idea either, as there would be two ways to do the same thing, which is also undesirable.

2016-07 – Stage 2. After the decorators proposal reached stage 2, its API began to undergo significant changes. Furthermore, at one point the proposal was referred to as "ESnext class features for JavaScript." During its development, there were numerous ideas about how decorators could be structured. To get a comprehensive view of the entire history of changes, I recommend reviewing the commits in the proposal's repository. Here is an example of what the decorators API used to look like:

The example you've given isn't valid JavaScript, JS doesn't have decorators. (Although there is a stage 3 tc39 for it, afaik no browser has implemented it)

There was a decorators issue brought up in the meeting (issue 508) and decorators metadata, as noted in the article, is now at stage 3. So there's still active work being done on decorators. If I had to guess, I'd say they'd be a likely candidate for ES2024.

As per the proposal, decorators can be used with Classes and their elements such as fields, methods, and accessors. To leverage this feature, we need to ensure that our resolvers provider is an instance of a Class. Therefore, we will modify the code in src/api/users/users-resolvers.js to the following:

The modern version of decorators, which will be officially rolled out in TypeScript 5.0, no longer requires a compiler flag and follows the official ECMAScript Stage-3 proposal. Alongside a stable implementation that follows ECMAScript standards, decorators now work seamlessly with the TypeScript type system, enabling more enhanced functionality than the original version.

100% this. Going in depth of libraries will make you so much better developer than learning newest and coolest frameworks in JS ecosystem. Learn to create your own React, Promises, or anything you like in JS. It will give you immense perspective about these libraries. Once you start understanding them you will feel like they are not that complex and you can do it too. Go read TC39 proposals and issues people point out in them. You will see how JS is borrowing features from other languages.

The actual proposal gives the "@reactive" decorator as the first example, which just so happens is the only decorator that I use in my library with TypeScript's legacy decorator option. Was so happy to see they recognize this use case! https://github.com/tc39/proposal-decorators