About
Iteria Low-code boosts the development of full-stack web applications through the automation of repetitive development workflows for developers and business people (analysts, product owners). They can easily generate new pages or customize existing React web pages, modify underlying GraphQL API, business logic and of course DB schema. The following picture illustrates suitable application types for Iteria Low-code (CRUD, dashboard, maps, calendars, 3D).
Dev tool in your web app
You can use your app and do instant/inline changes to your React web app (no need to switch between the design and preview mode of your app). Iteria Low-code is the development tool injected into your React web app (browser) for developers and business people. The web app is customized using a WYSIWYG editor and Iteria Low-code modifies the source code of the app. The following picture shows how to inline edit a React component.
WYSIWYG and codegen/codemod automates the development of the frontend layer:
- generate new pages or React components from the templates and API (Iteria compare codegen/codemod outcomes with code produced by IT professionals)
- use/delete component React component
- translations: inline edit labels, import/export spreadsheet of messages in multiple languages
- styles/theme
Hasura and PostgreSQL integration enables changing also backend layer:
- GraphQL API (schema, queries/fragments)
- PostgreSQL tables using ERD (Entity Relationship Diagrams
- Custom business logic on the server side using REST services, Webhooks, GraphQL services
Code quality
Iteria carefully maintain page and component templates for the code generations to ensure that generated source code by Iteria Low-code has the same properties and structure as handwritten code by IT professionals. Source code generated and modified by the Iteria Low-code complies with coding standards and best practices:
- separated components to views and controllers/containers
- separate functions: helpers and hooks from components
- graphql fragments
- reuse of components and hooks
- avoid copy&paste
- naming
- min. number of lines/complexity
The following picture shows dialogue for generating a new component from the template and API field on the left side and the separation of React components in the file tree on the right side.
Developer's focus on business logic and UX
Developers use codegen to avoid repetitive work and rather focus on development of more complex business logic or UX. Iteria Low-code understands the React/Typescript source code on AST (Abstract Syntax Tree) level. This approach allows develpers to combine the generated code and also manualy code in the same file and WYSIWYG/codegen/codemod still works.
Developers can modify the library of page and components templates for generating new and editing existing pages to achieve custom design and UX (according to Figma). The templates are small React apps (valid React code that works at runtime) - develpers can extract code from other projects. More info generate React/TSX
Instant app customization
All changes made by developers and business people are visible immediately and directly in a developed application. This enables developers and business people (analysts, owners) to collaborate on the same codebase at the same time.
Benefits
Benefits of Iteria Low-code:
- All team members get early feedback since they can demonstrate necessary changes really quickly
- the team can avoid repetitive work by manually programming the same code again and again
- making fewer mistakes thanks to the documentation and best practices included in the tooling
- results are more predictable (one can create a simillar app just for different API / model)
That enables delivery on time because the development cycle and time to market are shortened.
No vendor lock-in
Iteria Low-code has no vendor lock-in and can be ejected any time (after you finish the project) and your application will continue to work and can be further developed (by using the classic approach).
How it works
Iteria Low-code is injected in the development build of web app starter using a Vite Plugin vite-plugin-lowcode therefore the WYSIWYG is accessible for the app users. The development build has references to the original source code file (line and column number of a UI component start) which enables navigation to the code and automated code modification. For more see archtitecture.
Developers can use existing development tools (developers are not forced to change IDE, CLI or any other existing tool). Business people can take advantage of integrated devtools behind the scenes in demo.iteria.tech:
- Transpiler/Bundler
- GraphQL codegen (enables typesafe access of the API)
- VSCode WEB (enables navigating and editing the code directly in the browser with changes made online)
- WYSIWYG, codegen/codemod
- Use Chromium based browser (soon Safari will be supported and later Firefox).
- React Devtools has to be turned off (we are initializing React Devtools by Iteria Low-code, soon will be resolved)
Iteria Low-code DEMO
Try demo.iteria.tech and use:
Getting Started
Let's setup Iteria Low-code with your Hasura in a few minutes:
- either using Netlify Setup (preferred for non-technical people)
- or using Localhost Setup (for developers)
- or using Gitpod Setup
Continue with the tutorial how to create a simple app.