Let's create something crazy using web development tools
Or what happens if you force Very an experienced developer minding his own business. I think after this article the term “overqualified“will sparkle with new colors for you.
From the authors who put a web server on a business card and localize corporate applications into Klingon – we keep the brand!
Our magical wild web
What's the first thing that comes to mind when people talk about “web development”? Probably creating websites or web applications?
Landing pages, business card sites, online stores or some web portals
in hell.
The most advanced of readers will probably remember PWA or some React Native With Flutter — the limit of the imagination of an ordinary developer.
What is wrong:
the main thing that separates a person from great achievements is his imagination – it’s definitely impossible to do only what is impossible to imagine.
So now we will expand your imagination – in preventive measures, drill and hole punch with improvised means.
There are six projects in front of you the finest game — implementing the craziest ideas using quite ordinary tools of a modern web developer.
Please don't try to talk about like this during interviews in ordinary companies – have pity on the interviewer and his delicate psyche.
The author once upon a time (when he was still doing interviews) brought one interviewer to a nervous breakdown by simply telling in detail how In fact Loading large files via a server-side form works – about HTTP 100 ContinueMIME parsing and other joys.
People back then were much stronger-headed than they are now; in today’s realities, they can beat you right in an interview.
First game: HTMLang
I couldn’t miss such a life-affirming description from the author of this wonderful project:
They were laughing that HTML was not a real programming language… WHO”S LAUGHING NOW!!11
Yes, this is exactly what you thought – someone, being very out of sorts, took the general syntax of HTML and created a full-fledged programming language based on it.
This is what the implementation of the famous looks like FizzBuzz:
<!DOCTYPE html>
<html>
<head>
<title>FizzBuzz</title>
</head>
<body>
<h3>Look into the DevTools Console</h3>
<htmlang style="display: none;">
<call target="console.log"><s>Generating FizzBuzz...</s></call>
<for><v>i</v> <n>1</n> <n>100</n>
<cond>
<when>
<eq>
<mod>
<v>i</v>
<n>15</n>
</mod>
<n>0</n>
</eq>
<call target="console.log">
<s>FizzBuzz</s>
</call>
</when>
<when>
<eq>
<mod>
<v>i</v>
<n>3</n>
</mod>
<n>0</n>
</eq>
<call target="console.log">
<s>Fizz</s>
</call>
</when>
<when>
<eq>
<mod>
<v>i</v>
<n>5</n>
</mod>
<n>0</n>
</eq>
<call target="console.log">
<s>Buzz</s>
</call>
</when>
<else>
<call target="console.log"><v>i</v></call>
</else>
</cond>
</for>
</htmlang>
<script src="https://habr.com/ru/articles/824248/./HTMLang.js"></script>
</body>
</html>I can’t imagine what will happen if I do it myself Joel to issue his famous “FizzBuzz” in such an implementation – there is a chance that the old C programmer will fall into recursion.
By the way, who said it? at lectures about “declarative markup language” and “general inferiority”?
HTML (from English HyperText Markup Language hypertext markup”) is a standardized language for hypertext markup of documents for viewing web pages V browser.
They tried in vain, the author of this project, meanwhile, calmly writes to the console using HTML tags:
<call target="console.log">
<s>FizzBuzz</s>
</call>This is because there is no need to hire system programmers who have undergone full training in CS disciplines (like a course on compiler development) to work as full-time staff shit cleaner a developer in an ordinary corporate project – what all recruiters dream of.
Trouble may happen:
at the most interesting moment it turns out that half of the work was implemented on something so interesting.
And he who created This the “great guru” will suddenly disappear, turning off the phone and moving to a sunny place in search of truth Karaganda Canada.
There were precedents.
Game two: HTML-as-programming-language
Bad thoughts torment many experienced developers – still the same idea “full development in HTML” haunts the author of this project.
But only he went a little further in this process than the previous one.
For example, how about a function in pure HTML:
<def multiplyFunction returns=int> <!-- You can create functions -->
<param a type=int/>
<param b type=int/>
<return>a * b</return>
</def>
<def main>
<var result type=int>
<!-- Create variables -->
<multiplyFunction>
<!-- and store the result of the function in the variable -->
<param>5</param>
<param>6</param>
</multiplyFunction>
</var>
</def>Famous Bible Truth “much knowledge – many sorrows“- just about this project, for example, I would really like to forget all this and never know about something like this.
But unfortunately it’s too late, so I’m sharing my revelations:
Yes, you understood everything correctly – this is a real compiler from HTML to native ELF64 binary.
And now you will feel really bad:
To write code for Adruino/AVR microcontrollers, (Arduino UNO for example) you need to put a DOCTYPE tag in your HTML file.
For example:
<!DOCTYPE avr/atmega328p>Yes, this was the original idea of the author – development for microcontrollers in HTMLI'm not thinking anything through.
Seeing this one
DOCTYPEone web developer I know quit drinking forever.
By the way, a little magic with #include
Unfortunately, I didn’t have such a device at hand, so I couldn’t check the full operation and the entire pipeline.
To compile your AVR/Arduino code:
htmlc my-code.html -compileTo upload your code to an arduino or other AVR microcontroller:
htmlc my-code.html -uploadBut if among the readers there are brave people who can This launch – I’ll be happy to read about your impressions.
In the meantime, we move on to the next great project.
Game three: ass-js
With this name and no less characteristic logothe authors honestly hint at the essence of the project:
Assembler implemented in JavaScript
I assume you have never installed an assembly compiler before using npm? Well, there is a first time for everything:
npm i ass-jsAnd this is what the classic “Hello, world” looks like:
import {X64} from '../src/index';
const asm = X64();
asm.code(_ => {
_('db', 'Hello World!\n');
_('mov', ['rax', 1]); // 0x48, 0xC7, 0xC0, 0x01, 0x00, 0x00, 0x00
_('mov', ['rdi', 1]);
_('lea', ['rsi', _('rip').disp(-34)]);
_('mov', ['rdx', 13]);
_('syscall');
_('ret');
});
console.log(asm.toString());Just don’t show your favorite teacher a course in assembly language—grandfather will get sick, his heart may not be able to withstand such intensity of game.
This is what the result looks like:
But there is a separate tutorial by analyzing the example with “Hello world”, where it is explained step by step how it works.
I also found a wonderful one question to the author:
I was looking at your project and I couldn't figure out a reason as to why I would (and what, rather) implement with this.
Which seems to hint at the level of trash and waste in this project. But let's move on – to the next one repulsed a unique project.
Game four: ts2c
Here everything is simple and obvious:
Produces readable C89 code from JS/TS code.
Actually, everything except the meaning of the existence of this wonderful project is clear and obvious. The entire pipeline looks something like this:
If you suddenly need transpiler from Typescript to pure C – take it and use it, fortunately the project is very working:
npm install -g ts2cBy the way, it also works from the browser:
<script src="https://unpkg.com/typescript"></script>
<script src="https://habr.com/ru/articles/824248/ts2c.bundle.js"></script>
<script>
var cCode = ts2c.transpile("console.log('Hello world!')");
alert(cCode);
</script>There are even online version:
Despite the fact that the author honestly writes about a bunch of shortcomings:
Work in progress: it works, but only about 70% of ES3 specification is currently supported: statements and expressions – 95%, built-in objects – 17%.
I will say that this is the most workable project in the series, everything else literally falls apart in my hands. It crumbles and falls like the next object of study.
Fifth game: nerd
How to quickly and easily understand what research project – wild, non-working and glitchy shit?
According to the description, which promises endless goodies:
Javascript's God Mode. No VM. No Bytecode. No GC. Just native binaries.
Reference to something divine in the description technical project, this is generally almost a 100% diagnosis; you can reject it only on this basis – you are unlikely to be mistaken.
As you might guess, instead of normal JavaScript there is also something of its own here divine:
NerdLang is a substract of JS with some additions, focus on efficiency.
And this “own,” let’s say, is stuck in the distant past:
Supporting EcmaScript 3 standard
For a moment, 3rd edition The standard came out back in 2000.
And the project itself is trying once again to “pull an owl onto the globe” and climb into the place where all the large corporations at the level of Google have consistently broken their fangs:
Nerd is a JavaScript native compiler aiming to make JavaScript universal, Nerd is able to compile native apps for Windows, Mac, Linux, iOS, Android, Raspberry, STM32 and more.
Of course, I couldn’t ignore this, so I collected all this stuff and launched it, although I had to slightly correct the assembly scripts.
The pipeline (present in the title screenshot) looks like this:
The author is so harsh that he stuffed the instructions for assembling and linking the module for working with sockets into package.json:
{
..
"version": "0.0.1",
"nerd":
{
"env": ["std"],
"read_only": [],
"lib":
{
"win32":
[
"-D_WIN32_WINNT=0x0600",
"-Wno-narrowing",
"-D_GNU_SOURCE",
"-I{__EXTERN__}/libuv/include/",
"-I{__EXTERN__}/libuv/src/",
"-D_CRT_SECURE_NO_DEPRECATE",
"-D_CRT_NONSTDC_NO_DEPRECATE",
"{__EXTERN__}/libuv/src/*.h",
"{__EXTERN__}/libuv/src/*.c",
"{__EXTERN__}/libuv/src/win/*.h",
"{__EXTERN__}/libuv/src/win/*.c",
"-I {__MODULE__}/httplib/uWS/",
"-I {__MODULE__}/httplib/uSockets/",
"{__MODULE__}/httplib/uSockets/*.c",
"{__MODULE__}/httplib/uSockets/crypto/*.c",
"{__MODULE__}/httplib/uSockets/eventing/*.c",
"-DLIBUS_NO_SSL",
"-DUWS_NO_ZLIB",
"-fpermissive",
"-w",
"-lm",
"-ladvapi32",
"-liphlpapi",
"-lpsapi",
"-lshell32",
"-luser32 ",
"-luserenv",
"-lwsock32",
"-lws2_32"
]
}
}
}Having seen this package.json, a web developer I know (another one) decided to leave the profession forever and now herds goats in the Caucasus mountains.
Well, I just didn’t dare to adapt this for assembly under Linux, so you will be left without an example of running an HTTP server on this monster.
Game six: lemon
Finally the last one for today projectwhich, compared to the previous ones, is normal and even applicable somewhere:
Lemon is a framework for building Javascript runtime software, built on the Chrome V8 Javascript Engine.
I liked it for its extreme simplicity (compared to all other projects) and ease of integration.
I specifically show the entire assembly script:
CXX = g++
V8 = engine/lib/v8
define INCLUDE
$(V8)/include
engine/Core.cpp
engine/Environment.cpp
engine/Lemon.cpp
engine/StaticHelpers.cpp
engine/ObjectCreator.cpp
endef
define APP
app/*.cpp
endef
define LIB
$(V8)/out/x64.release/obj/
endef
define OBJ
v8_monolith
endef
export INCLUDE
export APP
export LIB
export OBJ
build:
(CXX) -I " class="formula inline">$INCLUDE $$APP -L $$LIB -l $$OBJ -std=c++0x -pthread -o lemonAnd it's all.
So easy to assemble V8 I see it for the first time in my life, honestly.
It is really assembled with one command:
Below is shown what a double “Hello, world” looks like, which contains both a part in JavaScript and a part in C++ – after a little thought, I combined two examples from the documentation into one.
App.js:
version();
console.log("Превед из JS");
helloworld();App.hpp:
#ifndef APP
#define APP
#include "../engine/Lemon.hpp"
using v8::Context;
class App : public Lemon {
public:
void Start(int argc, char* argv[]);
void SetupEnvironment();
};
#endifApp.cpp:
#include "App.hpp"
using namespace v8;
static void Log(const FunctionCallbackInfo<Value>& args) {
HandleScope scope(args.GetIsolate());
String::Utf8Value str(args.GetIsolate(), args[0]);
const char* cstr = StaticHelpers::ToCString(str);
fprintf(stdout, "%s", cstr);
fprintf(stdout, "\n");
fflush(stdout);
}
static void HelloWorld(const FunctionCallbackInfo<Value>& args) {
printf("Превед из C++ \n");
}
void App::SetupEnvironment() {
this->CreateGlobalMethod("helloworld", HelloWorld);
}
void App::Start(int argc, char* argv[]) {
for (int i = 1; i < argc; ++i) {
// Get filename of the javascript file to run
const char* filename = argv[i];
// Create a new context for executing javascript code
Local<Context> context = this->CreateLocalContext();
// Enter the new context
Context::Scope contextscope(context);
this->CreateGlobalObject("console")
.SetPropertyMethod("log", Log)
.Register();
// Run the javascript file
this->RunJsFromFile(filename);
}
}Wonderful are your deeds, Lord, since even when sorting out the extreme game there is a chance to find such a powerful project.
Why so much joy, you ask?
Because this is the real one V8not homemade with the implementation of ECMAScript “translated by Goblin”, namely the same enginewhich is used in the Chrome browser – with all the optimizations and bells and whistles.
This means that with some effort, almost any JavaScript code will work for you – in in your native applicationwithout any fat Node.js and all the problems with linking and versions.
In a word, take it into service, it will come in handy.
One line
Of course, there are far more interesting projects in the field of game creation than I have the strength to describe, so below is a small selection of what was found and interesting, but does not work.
Compile javascript to LLVM IR, x86 assembly and self interpreting
Unfortunately, it turned out to be nailed to a certain version of MacOS; it was not possible to compile normally or run tests under Linux. It is interesting because both the interpreter and the compiler are assembled in one project, and in a native binary.
JavaScript Assembler x86-16
It generates ready-made COM files from DOS times, but they refused to work under the Dosbox emulator.
Duktape is an embeddable Javascript engine with a focus on portability and compact footprint.
A more advanced and well-known analogue of Lemon, which I found too late and did not have time to watch.
“clang ported to js” – you can immediately add it to quotes.
Broken and very outdated assembly, but the project itself is very coolsince this is a full-fledged Clang compiler pulled onto the web.
Here here there is an online version.
LLVM compiled to JavaScript using Emscripten
Again, a broken and outdated assembly that could not be repaired in a reasonable time.
It's ready-made online.
Compile JS into LLVM IR – JavaScript Static Analysis Tool
Here here There is an article about this project, but I haven’t been able to put it together.
A toy js -> c++ compiler written in coffeescript. Uses escodegen to write c++ and tern to figure out types.
Again a very outdated and broken assembly.
Compiled implementation of Javascript, targeting C (for fun)
Half of the tests are broken, but the assembly itself passes – I didn’t study it in detail.
Letter is a compiler project built in TypeScript using LLVM node bindings.
A very interesting, but unfortunately outdated project – it requires LLVM 13 and the old version of Node.js.
It was not possible to make friends with new versions of LLVM and Node.
A tiny C compiler written purely in JavaScript.
Another interesting, but non-working project – the compiler itself worked, but the assembly code refused to assemble.
Epilogue
All the projects described in this article are presented primarily to expand the boundaries of your imagination – just so that you know that this also happens.
Please don't try such implement and use in a real project if you do not have serious experience and/or specialized training in CS.
Or you can run fast and have a reserve citizenship.
Much more free version This article is available on our blog.
0x08 Software
We are a small team of IT industry veterans, we create and develop a wide variety of software; our software automates business processes on three continents, in a wide variety of industries and conditions.
Let's revive long dead, fixing something that never worked and create impossible — then we talk about it in our articles.
