Getting started XX

Issue Detail View

for collboration and AI development (learn more about AI development here)

Issue IDE view

You can now start coding in the WebIDE or connect your local IDE [LINK] (learn more here).

The TENUM® WebIDE shows you your actual TENUM® repository with its file structure. It has a

1. Code Editing: Write and edit your code directly in the browser.

2. File Repository: Organize your project's files and assets.

3. Log Panel: this panel shows logs for the running issue instance.

4. Test Panel: Here you are able to see which tests have passed and which tests have not passed. You also have filtering functionality and other utilities.

[Mark 1-x on the panel]

• Shortcuts and HotKEys

lorem ipsum

• Utilities: here you have a button for switching the IDE to dark/light mode, or going into full screen mode.

lorem ipsum

Gravejard Stuff

*# Develop

Content: step by step with the sample of the ToDoAPP

Dependency Manager

PROCESS
You simply start your project on a Kanban board. Every issue you create is automatically a

The TENUM® Workflow

3.1. The Interface

3.1.1. Your Account To get started with TENUM®, create an account on the platform. This account will be your gateway to all the development tools and resources that TENUM® offers.

3.1.2. Organizations, Portals, Apps In TENUM®, development is structured into portals and projects:

• Portals: These help organize and manage multiple projects, especially in team settings.

• Projects: The primary units where you develop your applications.

• To start developing, create a project within a portal. You can get an initial "Hello World" project to kickstart your development.

3.1.3. Kanban Board

TENUM® includes an integrated Kanban board where you can manage issues related to your application. You can: Create issues: Document tasks or bugs that need attention. Move through stages: Transition issues through "Develop," "Review," and "Release" stages. Approval workflow: Assign issues for review and manage approvals. Set changes live: Deploy your application updates seamlessly. 3.1.4. WebIDE TENUM® provides a web-based Integrated Development Environment (WebIDE) that you can use to develop your applications. Features include: Code Editing: Write and edit your code directly in the browser. File Management: Organize your project's files and assets. Real-Time Preview: See changes in your application as you develop. Integrated Tools: Access testing, debugging, and deployment tools within the IDE. 3.2. General Logic 3.2.1. DDD, Event Store, and Artifact Principles Domain-Driven Design (DDD): TENUM® leverages DDD principles to focus on the core business logic of your application. Entities represent business objects, and you define their behavior through commands, queries, and events. Event Store: Instead of traditional CRUD operations, TENUM® uses an event store for data persistence. This means: Events over State: Stores a list of events that represent changes to your data. State Reconstruction: Rebuilds the current state from the sequence of events. Distributed Editing: Supports collaborative and concurrent modifications. Artifacts: These are the building blocks of TENUM® applications. Artifacts are higher-level abstractions that encapsulate design patterns and functionalities. Key artifacts include: Entities UI Elements Message Handlers Event Handlers AI Handlers Decorators Test Cases Modules 3.2.2. The Use of AI Artificial Intelligence plays a significant role in TENUM®: Code Generation: AI can generate code for artifacts based on descriptions. Testing: Automatically write and execute test cases. Debugging: Assist in identifying and fixing bugs. Reviews: Perform code reviews and suggest improvements. The AI benefits from TENUM®'s abstraction, operating within a limited solution space for more accurate outputs. 3.2.3. DevOps Principles TENUM® abstracts away the complexities of DevOps, allowing you to focus on writing business logic. The platform handles: Infrastructure Management Deployment Hosting Code Structure Database Access Testing This streamlines the development process and reduces overhead. 3.2.4. File Naming, File Structure, and Assets Each project in TENUM® has a file system structure implemented on top of the event store: CRUD-Like Operations: Read, update, delete, and organize files. Folder Structure: Organize your code and assets into directories. Assets Management: Handle static files like images, stylesheets, and scripts. Familiar Model: Provides a conventional way to manage project files. 3.2.5. Sharing and Runtime TENUM® applications run on a shared platform where all services, features, and apps are automatically compatible with each other, provided their business logic is compatible. This is due to the abstraction—the key unique selling proposition of the platform. 3.2.6. Why Lua and Luact Lua: Embedding Language: Designed for implementing plugins for existing systems. Simplicity: Simple syntax and easy to learn. Flexibility: Full-fledged programming capabilities without unnecessary complexity. Plugin Approach: Each Lua application acts as a plugin to the TENUM® runtime. Luact: React-Like Framework: Lua implementation similar to React for JavaScript. Functional Components: Use hooks and functional programming paradigms. Efficient Rendering: Utilizes a virtual DOM and diffing mechanism. Familiarity: Eases the transition for developers familiar with React. 5. Building UI Elements UI elements in TENUM® are Lua modules that define the appearance and behavior of your application's user interface: Luact Syntax: Describe UI components using a React-like syntax in Lua. Chakra UI Components: Utilize a set of pre-built components for consistent styling. Nesting: Create complex views by nesting UI elements. Rendering: TENUM®'s rendering engine converts your Lua UI definitions into real views in the browser. Performance: Uses a virtual DOM for efficient updates and rendering. Interviewer: Great. Let's talk about the UI element next. You mentioned it before, but can you elaborate on the UI element and about Luact, which is used within the UI element? Interviewee: Yes. The UI element is essentially a Lua module that provides you the opportunity to describe how the UI looks. You provide a UI model or a UI data structure. You create this UI data structure in a Lua function, and this works quite similarly to how it works in React. We have a builder that helps you build structures within Lua. It's a special DSL (Domain-Specific Language), and you can access named UI elements and give them parameters, and with this, you instantiate them. We have a rendering technology that can take this data and transfer it into a real view rendered inside your browser. Luact itself is a similar implementation to what React provides for JavaScript environments but written in Lua. So you have hooks available, and we use the functional components of React to describe your UIs. This brings a quite easy way of implementing UI because of the application abstraction layer. You make far fewer errors in UI handling because you always create a new DOM tree, and we have a comparison mechanism. If the new DOM tree you've created has changed compared to the old version of the React function—or Lua function, sorry—and if there are no changes, then we do not render it. So, like in React, we have performance optimization by comparing the actual DOM with a shadow DOM. This mechanism is also available in Luact. This provides a similar look and feel, which eases the transition from a React developer to a TENUM® developer.

6. Building Your Logic Business logic in TENUM® is encapsulated within entities: Entities: DDD-like objects representing business data. Commands: Define how to mutate state. Queries: Define how to read state. Events: Represent changes to the business object. Event Sourcing: Persistence layer that stores events rather than state. CQRS Pattern: Separates read and write operations for scalability and maintainability. This approach allows for robust handling of persistence, caching, and business logic, both on the frontend and backend.

7. Integrating TENUM® Apps and Libraries Modules in TENUM® act as libraries: Reusable Code: Write Lua modules that can be imported into any artifact. Shared Functionality: Encapsulate common functions, utilities, or services. Frontend and Backend: Modules can be used across the entire application stack. Organization: Helps keep your codebase modular and maintainable.

8. Integrating External Data TENUM® provides mechanisms to interact with external APIs: HTTP Client: Use the built-in HTTP client in message handlers or UI elements. Data Consumption: Fetch data from external services or APIs. Service Integration: Connect your TENUM® app with third-party services. Lua Libraries: Write or import Lua modules to handle specific integrations.

9. Integrating AI Tasks AI Handlers allow you to incorporate AI functionalities: Define AI Tasks: Specify a prompt and expected output format (JSON spec). Usage: Use AI handlers like standard message handlers within your application. Data Processing: Feed data into AI handlers and receive structured results. Customization: Tailor AI tasks to fit specific needs, such as data analysis or content generation.

10. Testing & Debugging TENUM® supports automated testing and debugging through test cases or spec files: Spec Files: Create alongside artifacts to define test functions. Automatic Execution: Tests run when the spec file or corresponding artifact changes. Reporting: View test results in the test panel within the WebIDE. AI-Assisted Testing: Use AI to generate test cases for your artifacts. Debugging Tools: Integrated tools to help identify and fix issues in your code.

11. Deployment and Rollback Manage your application's deployment lifecycle: Stages: Develop: Implement and test new features. Review: Submit changes for peer review and approval. Release: Deploy changes to the live environment. Preview Environment: Test changes in a safe, isolated environment. Rollback: Revert to previous versions if issues are detected. Future Enhancements: Upcoming features may include automated testing gates and AI-assisted fixes.

12. Accessing Your App Data Data access in TENUM® is handled through entities: Queries: Retrieve data by querying entities. Commands: Modify data by sending commands to entities. State Reconstruction: Entities reconstruct their state from the event stream. Frontend Synchronization: Data changes are automatically reflected in the UI.

Content: step by step with the sample of the ToDoAPP

Dependency Manager

PROCESS
You simply start your project on a Kanban board. Every issue you create is automatically a

The TENUM® Workflow

3.1. The Interface

3.1.1. Your Account To get started with TENUM®, create an account on the platform. This account will be your gateway to all the development tools and resources that TENUM® offers.

3.1.2. Organizations, Portals, Apps In TENUM®, development is structured into portals and projects:

• Portals: These help organize and manage multiple projects, especially in team settings.

• Projects: The primary units where you develop your applications.

• To start developing, create a project within a portal. You can get an initial "Hello World" project to kickstart your development.

3.1.3. Kanban Board

TENUM® includes an integrated Kanban board where you can manage issues related to your application. You can: Create issues: Document tasks or bugs that need attention. Move through stages: Transition issues through "Develop," "Review," and "Release" stages. Approval workflow: Assign issues for review and manage approvals. Set changes live: Deploy your application updates seamlessly. 3.1.4. WebIDE TENUM® provides a web-based Integrated Development Environment (WebIDE) that you can use to develop your applications. Features include: Code Editing: Write and edit your code directly in the browser. File Management: Organize your project's files and assets. Real-Time Preview: See changes in your application as you develop. Integrated Tools: Access testing, debugging, and deployment tools within the IDE. 3.2. General Logic 3.2.1. DDD, Event Store, and Artifact Principles Domain-Driven Design (DDD): TENUM® leverages DDD principles to focus on the core business logic of your application. Entities represent business objects, and you define their behavior through commands, queries, and events. Event Store: Instead of traditional CRUD operations, TENUM® uses an event store for data persistence. This means: Events over State: Stores a list of events that represent changes to your data. State Reconstruction: Rebuilds the current state from the sequence of events. Distributed Editing: Supports collaborative and concurrent modifications. Artifacts: These are the building blocks of TENUM® applications. Artifacts are higher-level abstractions that encapsulate design patterns and functionalities. Key artifacts include: Entities UI Elements Message Handlers Event Handlers AI Handlers Decorators Test Cases Modules 3.2.2. The Use of AI Artificial Intelligence plays a significant role in TENUM®: Code Generation: AI can generate code for artifacts based on descriptions. Testing: Automatically write and execute test cases. Debugging: Assist in identifying and fixing bugs. Reviews: Perform code reviews and suggest improvements. The AI benefits from TENUM®'s abstraction, operating within a limited solution space for more accurate outputs. 3.2.3. DevOps Principles TENUM® abstracts away the complexities of DevOps, allowing you to focus on writing business logic. The platform handles: Infrastructure Management Deployment Hosting Code Structure Database Access Testing This streamlines the development process and reduces overhead. 3.2.4. File Naming, File Structure, and Assets Each project in TENUM® has a file system structure implemented on top of the event store: CRUD-Like Operations: Read, update, delete, and organize files. Folder Structure: Organize your code and assets into directories. Assets Management: Handle static files like images, stylesheets, and scripts. Familiar Model: Provides a conventional way to manage project files. 3.2.5. Sharing and Runtime TENUM® applications run on a shared platform where all services, features, and apps are automatically compatible with each other, provided their business logic is compatible. This is due to the abstraction—the key unique selling proposition of the platform. 3.2.6. Why Lua and Luact Lua: Embedding Language: Designed for implementing plugins for existing systems. Simplicity: Simple syntax and easy to learn. Flexibility: Full-fledged programming capabilities without unnecessary complexity. Plugin Approach: Each Lua application acts as a plugin to the TENUM® runtime. Luact: React-Like Framework: Lua implementation similar to React for JavaScript. Functional Components: Use hooks and functional programming paradigms. Efficient Rendering: Utilizes a virtual DOM and diffing mechanism. Familiarity: Eases the transition for developers familiar with React. 5. Building UI Elements UI elements in TENUM® are Lua modules that define the appearance and behavior of your application's user interface: Luact Syntax: Describe UI components using a React-like syntax in Lua. Chakra UI Components: Utilize a set of pre-built components for consistent styling. Nesting: Create complex views by nesting UI elements. Rendering: TENUM®'s rendering engine converts your Lua UI definitions into real views in the browser. Performance: Uses a virtual DOM for efficient updates and rendering. Interviewer: Great. Let's talk about the UI element next. You mentioned it before, but can you elaborate on the UI element and about Luact, which is used within the UI element? Interviewee: Yes. The UI element is essentially a Lua module that provides you the opportunity to describe how the UI looks. You provide a UI model or a UI data structure. You create this UI data structure in a Lua function, and this works quite similarly to how it works in React. We have a builder that helps you build structures within Lua. It's a special DSL (Domain-Specific Language), and you can access named UI elements and give them parameters, and with this, you instantiate them. We have a rendering technology that can take this data and transfer it into a real view rendered inside your browser. Luact itself is a similar implementation to what React provides for JavaScript environments but written in Lua. So you have hooks available, and we use the functional components of React to describe your UIs. This brings a quite easy way of implementing UI because of the application abstraction layer. You make far fewer errors in UI handling because you always create a new DOM tree, and we have a comparison mechanism. If the new DOM tree you've created has changed compared to the old version of the React function—or Lua function, sorry—and if there are no changes, then we do not render it. So, like in React, we have performance optimization by comparing the actual DOM with a shadow DOM. This mechanism is also available in Luact. This provides a similar look and feel, which eases the transition from a React developer to a TENUM® developer.

6. Building Your Logic Business logic in TENUM® is encapsulated within entities: Entities: DDD-like objects representing business data. Commands: Define how to mutate state. Queries: Define how to read state. Events: Represent changes to the business object. Event Sourcing: Persistence layer that stores events rather than state. CQRS Pattern: Separates read and write operations for scalability and maintainability. This approach allows for robust handling of persistence, caching, and business logic, both on the frontend and backend.

7. Integrating TENUM® Apps and Libraries Modules in TENUM® act as libraries: Reusable Code: Write Lua modules that can be imported into any artifact. Shared Functionality: Encapsulate common functions, utilities, or services. Frontend and Backend: Modules can be used across the entire application stack. Organization: Helps keep your codebase modular and maintainable.

8. Integrating External Data TENUM® provides mechanisms to interact with external APIs: HTTP Client: Use the built-in HTTP client in message handlers or UI elements. Data Consumption: Fetch data from external services or APIs. Service Integration: Connect your TENUM® app with third-party services. Lua Libraries: Write or import Lua modules to handle specific integrations.

9. Integrating AI Tasks AI Handlers allow you to incorporate AI functionalities: Define AI Tasks: Specify a prompt and expected output format (JSON spec). Usage: Use AI handlers like standard message handlers within your application. Data Processing: Feed data into AI handlers and receive structured results. Customization: Tailor AI tasks to fit specific needs, such as data analysis or content generation.

10. Testing & Debugging TENUM® supports automated testing and debugging through test cases or spec files: Spec Files: Create alongside artifacts to define test functions. Automatic Execution: Tests run when the spec file or corresponding artifact changes. Reporting: View test results in the test panel within the WebIDE. AI-Assisted Testing: Use AI to generate test cases for your artifacts. Debugging Tools: Integrated tools to help identify and fix issues in your code.

11. Deployment and Rollback Manage your application's deployment lifecycle: Stages: Develop: Implement and test new features. Review: Submit changes for peer review and approval. Release: Deploy changes to the live environment. Preview Environment: Test changes in a safe, isolated environment. Rollback: Revert to previous versions if issues are detected. Future Enhancements: Upcoming features may include automated testing gates and AI-assisted fixes.

12. Accessing Your App Data Data access in TENUM® is handled through entities: Queries: Retrieve data by querying entities. Commands: Modify data by sending commands to entities. State Reconstruction: Entities reconstruct their state from the event stream. Frontend Synchronization: Data changes are automatically reflected in the UI.

You can create your own project by navigating to the dashboard and clicking the "New Project" button as shown in the picture.

Once clicked, you will be navigated to a new page. Currently, the only way to create a project is to create a new one from scratch.

Once you click this a dialog will appear:

Enter a name for the project, this can be anything, but make sure to choose a name that makes sense for whatever it is you are creating! There is also a dropdown field for which you can choose the type of application you want to create. There are 2 types:

• Application - projects that are supposed to be running services

• Library - projects that are a set of functionality you might want in several other projects (e.g., string utilities, table utilities)

Let's create an Application as they're more interesting. Choose the Application option in the dropdown and click Save. This might take a minute but afterwards you will be navigated back to the dashboard and you will see a card for your project.

Notice the red dot next to your project name. This means that this project does not have a production environment deployed currently. Let’s change that. Hover over your newly created project card, click on "Options", and then on "Start".

After a minute or two click on the "Options" button on your project, and click on "Run". If you see this error page:

Then this means that the instance is not yet created, so just give it another minute 🙂. Eventually you should be able to see your newly deployed production instance:

Hooray! You just created the production instance for your application. Easy, right?