Ask HN: How do you make a NoCode/LowCode application?

https://news.ycombinator.com/item?id=30229643

by notadev • 4 years ago

11 6 4 years ago

news.ycombinator.com

I'm not asking how to use NoCode or LowCode tools, I'm asking how do you make a NoCode/LowCode interface for any tool?

For a web application, is it just using JavaScript to drag-dropping divs/images that represent certain actions that get converted to actual code behind the scenes?

dtagames• 4 years ago

Yes. Microsoft MakeCode is a good example. You drag on-screen blocks (ala Scratch) to define behaviors. These are then converted to runnable code.

In the case of MakeCode (and the delightful MakeCode Arcade[0]), both the builder UI and the code conversion are open source, so that you can see how the conversion is done (to Typescript, in this case) or use the building tools in your own product, perhaps with a different output language.

[0] https://arcade.makecode.com/

homarp• 4 years ago

Microsoft MakeCode (PXT - Programming eXperience Toolkit) https://github.com/microsoft/pxt is the "base" repo. Among other thing, it contains 'an ARM Thumb machine code emitter'

https://github.com/microsoft/pxt-arcade is the arcade one

aliswe• 4 years ago

is this the Microsoft lowcode offering?

speedgoose• 4 years ago

A classic and elegant way to design visual programming or a programming language is to write a meta-model.

Then you write two ways binding between text source code / visual elements and your model (an instance of the meta-model).

A lot of research and tools have been built around that. But basically it’s div/images bound to a model, and a model to code convertor. Or you interpret the model directly.

dorait• 4 years ago

Blockly is an example of no-code app that generates code. It is a good starting point to understand how you can build a no code framework. Blockly is...

https://developers.google.com/blockly

High level concepts

1. A workspace 2. A set of pre-defined componets that map to functions or statements 3. A way to connect components to back-ends (like spreadsheets or database columns) 4. Some semantics(behavior) for connections. 5. An implied or explicit sequence of interactions between components.

roskoalexey• 4 years ago

Basically, it's two parts.

1. UI (visual editor) that produces a schema of an application (sometimes it's called DSL (domain-specific language), or AST (abstract syntax tree), or meta-model (as @speedgoose wrote)).

2. Interpreter/compiler that converts the schema/DSL/AST/model of your application into the code. Sometimes it's compiling real text code like HTML/JS/CSS. Sometimes it's interpreting in runtime.

Usually, it should do both. Code for the output/export/deploy. Runtime for your editor's canvas or preview mode.

Ask HN: How do you make a NoCode/LowCode application?

Related Stories