Ask HN: How do you make a NoCode/LowCode application?
6 comments
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.
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.
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.
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.
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.
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.
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/
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/
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
https://github.com/microsoft/pxt-arcade is the arcade one
is this the Microsoft lowcode offering?
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?