Home
tiktag is a cloud-based development environment (CDE). It offers a high flexibility and was designed to keep its own design and framework as tiny as possible. Therefore the architecture and design of the software you wish to develop is in your hand.
The CDE supports following functions - Text-Editor for Source-Code editing - File-Browser to organize multiple File-Setups - organize collections of projects in custom workspaces - build debug-target - public deployment of your tag
Amalgamation: one build one file
Whilst your project may contain multiple files and data in one single tiktag project the build process will link all components together. In consequence you don't need to take care of multiple file-handling or hosting at all - All components including pictures, shader-files, compiled web-assembly parts are packed in one single compressed and mangled .js file which is accessible from any anonymous crossorigin location. The only required step to use a tiktag is to implement a script-tag on your website either in the head or body section as needed:
<script>
async src="https://cdn.tiktag.de/e67bd1351ab40c70766c28819344a358b23fac42c889a83f68ac654a84504add5/536549f91ed00627634e9d811d31289ba94afaaf3294e2869fa5f0111faa08af.js" crossorigin="anonymous"
</script>
Combining C++ with OpenGL ES and Javascript
tiktag's main focus is to provide a tool enabling you to develop high performance applications for the web. These could be 2d or 3d games, simulations or rich applications which require more sophisticated client side computational performance or responsiveness. Javascript as a programming language offers a high degree of flexibility, is easy to learn and proven to work rock solid in your web-browser since years. Web-Client Technology such as the V8-Engine evolved and made a huge step forward providing sandboxed web-assembly run-time engines and other CPU-related optimizations enabling application-developers to produce much more performance-optimized code running in your favourite web-browser.
tiktag is a tool to utilize these built-in web-assembly run-time engines to their full extend. Therefore you can use C++ - Code for data-manipulation / calculation and other performance-intense functions as C++ will be compiled directly to web-assembly on the highest possible level of optimization.
Modern web-browsers support Open GL ES on a broad level. tiktag helps you to develop vertex and fragment-shaders separatly from your application logic, so you do not need to mess with inconvinient string-handling, so you can easily maintain multiple shader-files in one single project.
How to live without ReactJS?
Many of the built-in convenience-features from ReactJS are originated in the design of the ES6-Language, NodeJS and packaging-configurations as such, therefore are NOT part of the core design of ReactJS. In tiktag you can use import, export, css, classes and jsx-statements as you wish; the core difference between a rich Framework like ReactJS and tiktag is that you need to take of your own architectural design and event management. This will give you much freedem to design your code as you like. You will find a simple example here:
import {_newCSS, _render, _newTag, _setParentObject} from "./tt/ttHTML.js";
import css from "./MyClass.css";
export default class CMyClass
{
constructor (parent, options)
{
_newCSS (css); /* set custom CSS */
this.parentObj = parent;
this.customOptions = options;
this.onClick = this.onClick.bind(this);
this.render = this.render.bind(this);
this.render();
}
render()
{
// this.parentObj points to a parent DOM-Object, if you like
// otherwise you could also use document.appendChild to add
// an object to your body, head or any section in your html-document
// you wish to
_setParentObject(this.parentObj);
_render(
<div className="my_CSS_Property">
<button className="my_CSS_Button_Preference"
style={{"margin": "auto"}}
onClick={this.onClick}>my Button
</button>
</div>);
return;
}
}
_newCSS, _setParentObject and _render are provided by the tiktag framework. They ease up the way on how you can use CSS and JSX code within your projects. As you can see in this example you are free to use any JS-Object and callback-function using the {} syntax in your jsx-code.
C++ without Memory Management and stdlib?
Originally the programming language C was designed in the 1970s to solve the problem of hardware- and CPU-Architectural dependencies. Since today the design of C++ grew and is still growing to an advanced object oriented programming language up to the latest standard ANSI C++23.
It is one of the most mature and widely spread programming language in the world. It is used to develop games, media-applications, editors, drivers, operating systems, web-browsers and many other real-time applications. There are technologies available like emscripten to embedd C++ code inside your web-projects. The down-side of using this framework is an enourmous overhead in size performance trade-off. emscripten is designed to develop rich application or convert libraries which use C++ std-libraries and templates.
This is a plus on one hand as it is easier to convert existing c++ libraries and applications to the web, but you need to consider its large footprint and memory constraints.
Tiktag offers a web-centric approach as the web-assembly runtime-engines run in a sandbox therefore are protected against memory-leaks and security attacks in their design.
So you do not need any kind of garbage collection or delete or free functionality per se. Your memory will be organized inside the browsers built-in run-time anyways.
You need to take care of the re-usability of your memory-blocks as a part of your architectural design or performance-optimization. Furthermore there is no need to virtually handle File-Operations as you could rely on localStorage or IndexedDB directly as a part of your browser-design.
As part of its design tiktag offers fundamental memory-allocations by using the built-in new and malloc Functions. The release of memory will be organized by your web-assembly run-time engine, so you do not need to take care of this.
Some Background about WebAssembly runtime engine
WebAssembly is a low-level binary format that runs inside a sandbox environment in modern web browsers. It provides a way to run native code inside the browser environment, which is typically restricted to JavaScript. The memory management inside this sandbox environment is crucial to ensure the security and stability of the web platform.
WebAssembly runtime uses a linear memory model to manage memory. This means that all memory is represented as a continuous array of bytes, with a single pointer that keeps track of the current position of the memory heap. When a WebAssembly module is loaded, it is allocated a fixed size memory block, known as the memory object.
Memory can be allocated within this memory object by the WebAssembly module itself, using WebAssembly instructions. The memory is then managed by the runtime, which keeps track of the memory allocations and deallocations. This allows the runtime to detect any attempts to access memory outside of the allocated blocks, and to prevent memory leaks and buffer overflows, which could compromise the security and stability of the platform.
To ensure that WebAssembly modules do not interfere with each other or with the browser environment, they are isolated from each other inside their own sandbox. This means that each module runs in its own isolated environment, with no access to the memory or resources of other modules or the browser environment. This isolation provides a high level of security and stability, and is critical to the success of the WebAssembly platform.