Loading...

Dont-code news

Gets the latest updates about Dont-code: Features, Development, Partnerships...
Pie and Bar charts

Reports are available

After a demand from one of our customer, we developed a plugin enabling you to easily generates charts based on your data. It is based on Chart.js as provided by PrimeNG components.

As for other plugins, you just need to configure the graphs needed in the Builder.

We developed a chartjs plugin to support date format without dependencies to any javascript date libraries by the way.

Github release

Automated releases

Now the release of Dont-code is completely automatized thanks to Github Actions.

All the core and plugins components are built, tested against each other, and deployed in one script.

Two level IT

Two level IT: Promise enabled!

After months of hard work, and even more rework than expected, we have finally made one of the main promise of Dont-code possible.

The IT guys in the enterprise can:

  • define its own specialized plugins based on Dont-code plugins.
  • Pre-configure them with enterprise specific items (server's url, and so on).
  • Deploy them in a repository dedicated for its enterprise.
  • For example, here is the repository file for our own test applications.
  • Letting the users design their own application with easy-to-use and already enterprise enabled plugins.
Plugin Rest movie

Now manage data from external application

Thanks to the newly developed Rest plugin, you can now easily and instantly display data coming from another application

  • In the application builder, simply describe the data you want to display.
  • Then tells the builder the url of the Rest API providing this data.
  • Plugin Rest movie
  • Here we have set the url of the Omdb API, providing information about movies.
  • And immediately see the result (screenshot above) in the Previewer.

Major Core rewrite

As you know, you can instantly witness the result of your application designed with Builder through the Previewer.

To do this, the Builder sends Change events to the Previewer, who then adapt its display and behavior.

Then the Previewer analyses the Change and sends it to the affected plugins that can modify their behaviors.

Until now, each plugin must have been able to react to any kind of changes, with this new version, the plugins need only to take care of changes that interest them, Dont-code framework will ensure it receives updates if another change impacts it.

Fixed editor issues

Following the pure eat-your-own-dog-food principle, we are using some of our demo apps internally.

While using the Coffee Bean Evaluator, the BBQ Sauce Taster or the Complement Alimentaire Price Checker, we've found some small issues in the editor plugin

  • Empty values were discarded.
  • Clicking on Save button without leaving a field saved the old values.

We made as well several usability enhancements

  • Editor toolbar is replicated at the bottom of the screen for better flow.
  • Saving the document directly switch back to the list.
Plugin Seed screenshot

Plugin Development Starter Kit

A lot of enhancements have been deployed to ease the development of plugins for the Dont-code platform:

  • We provide a Seed Github repository with working examples of plugins: The plugin seed
  • Just fork it, follow the readme, and you'll get a working plugin in no time !
  • In includes everything from debugger support, unit and end 2 end tests, application shell, automatic build and deploy to npm repository.
  • The result of the plugin-seed deployment can be seen here...
Remote plugins

Dynamic plugins

This is fully transparent for the user but now when you open the Previewer, it downloads the Plugin from a remote location.

Before that, it was be compiled and deployed with all the plugins build-in. So what are the advantages of this dynamic approach ?

  • Update to plugins are immediately visible. Just reload the Previewer to use the latest plugin.
  • Only the plugins needed will be loaded. When the list of plugins will grow, you'll be able to only load the ones you need.
  • Enable for Marketplace. You'll be able to browse the plugin marketplace, select one, it will be downloaded and immediately available for your application.

This has been possible thanks to the great work of the "Angular Architects" team.. Not only they provided the library to help support Module Federation of Webpack 5, they also created an example and walkthrough to make it easy to use !

Titan template

Reworked homepage

The old Dont-code homepage didn't fill its purpose: Based on clicky.com agent, around 5 users a day were reaching the page but a large majority of them didn't stay. Only a very few were going to the developers page. I checked with some 'normal' users, and they didn't like the look and feel of the pages.

I was using Github pages framework with the So simple theme:

This was handy as for any new content I only had to write the text in markdown format, but the result was not that good.

So I've decided to rewrite the page.

Now I'm using the Titan template, it's pure HTML and javascript, and the result looks much better. Now let's see if that sparkle more interest from users !

Typescript strict mode

Using Strict mode for source

After the move to Angular 12, we have upgraded all the projects to follow the 'strict' rules from Typescript. This means making subtle changes in almost all source code.

With this 'strict' mode, the typescript compiler is now checking all assignments to ensure null and undefined values are managed properly.

For example,
let value:string = aMap.get('something');
triggers an error 'Cannot assign string|undefined type to string variable'.

Because when you declare `let value:string` in strict mode you are explicitly telling the compiler that value cannot be null or undefined. As `aMap.get('something')` can return undefined, the compiler catches this. The compiler will do the same checks for function return values, parameters, class members, and so on!

You can solve this in 2 ways:
  1. Either explicitly allow null values in this variable: ` let value?:string = aMap.get('something');` Be aware that may trigger other errors in the code, for example if you are calling a function with this variable as parameter: The function itself must specify it accepts undefined values !
  2. Or separate undefined value handling:
    // value's inferred type is string or undefined:
    const value = aMap.get('something');
    if (value) {
    // compiler knows var cannot be undefined or null here
      value.doOtherThing();
    } else {
    // Special treatment if no values are found
    }
                            

The result of all this hopefully gives developers more hints at potential nasty bugs in their code, at the expanse of speed of development and code clarity. Let's see if in the Dont-code case this is worth the effort.

Angular 12

Upgrade to Angular 12

This week-end has been spent upgrading Angular to version 12, and that was an easy one.

Of course this involves some mandatory steps:
  • Upgrade nx.dev workplace.
  • Update dependencies in package.json].
  • Update PrimeNg to version 12.
  • Run unit and e2e tests.
  • Turns out I cannot use rxjs 7.x yet, as several libraries (include Angular 12) mandates rxjs 6.x .
  • Some test scripts had to be amended - mostly due to problems not detected by previous versions.
  • A bad typescript code in my cypress additional functions to find angular components made tests hang.
  • Re-release dont-code/core, then dont-code/plugins, then dont-code/ide-ui and finally dont-code/preview-ui.
  • Re-deploy and test: Everything was working fine.

So it took me only a week-end to do this major upgrade, thanks Angular, Nrwl, Primetek, Jest and Cypress, I know this went smooth thanks to your hard work!

Enter Euro Amount

Support for Currencies

Now the basic types Currency have been added. You can now start designing finance apps.

Thanks to the great PrimeNG UI components, the Previewer now allows you to edit amount in your Currency.

List of currencies has been added as well.

This took much more effort than for dates and images because I wanted to define a standard way of handling Money [with amount and currency](https://github.com/dont-code/core/blob/main/node/libs/core/src/lib/model/money-amount.ts), and I had to tweak the Dont-code framework itself to support multiple elements management by one field component.

Date and image support

New field types added

Less than 2 days needed to add support for date, time, image and url.

Thanks to the plugin architecture it took me just a few hours to add new field types to the Dont-code platform... I just needed to copy / paste the code for the basic fields (Text, Long, Numeric) and update the Angular templates to use PrimeNg Calendar Component.

In fact, most of the time was spent adding support for grouping field types due to the increasing number of them.

Next step is to add Currencies and Monetary Amount field types. Let's see how much effort will be needed for that !

Sharing data

Sharing data

Available today, you can share information with other users by selecting "Share with Dont-code users" in the Builder.

You know you can directly edit data in the Previewer while designing your application. Until now, this data was saved in your local computer (in the [Browser's IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)). However, if you select "Share information with Dont-code users", then the data will be stored through the Dont-code Data API running in our Test server and stored in a MongoDB Database.

This means another user selecting the same project will be able to see and edit the same data. Another step in the journey of a usable no-code platform. Let's see if in the Dont-code case this is worth the effort.

Session Mgt

Session management

Session Management has been implemented.

When you update your application model in the Builder, it shares all with the Previewer through a server. This allows you to have the Previewer neatly separated from the Builder, and even starts multiple Previewers, all updated at the same time. Now when you use the [Builder Demo](https://dont-code.net/ide-ui/), you can see at the top right a small popup showing the server it is connected to, and as well the Session used. Any modifications you're doing to your application design, is sent to the server and stored with this Session.

Then, when you Open the Previewer , it will display the latest updates of your application related to this Session.

In order to do that, I've used a MongoDB database running on server side and storing all sessions updates. The side effect is now I can see if and when people are using the demo.

Demo apps

Application Loading in Previewer

Full Application loading is now delivered to the Previewer as well!

As a quick follow up to the last update, Previewer application now supports loading an application from scratch. With the previously mentioned support from the Builder, one can just load, save or create a new application and see the result immediately.

In the Builder Demo, you can load small applications already made: A Task Manager, a very simple Note Editor, a Recipe collection and so on...

Saving project

Saving and Loading projects

Now one can save and load an application in the Builder.

If you have a look at the Application Builder Demo, you'll see a new menu appeared: Projects.

Clicking on it, you'll see the project screen where you can save the current project or load another one.

One can believe this would be an easy thing to develop, however even the development team were surprised to see how difficult it was. Not only we had to:

  • Develop a new service to provide load/save project
  • Switch to a better server to support a database for the Demo application
  • Develop the screen in the builder to support load and save project workflow

However, we didn't expect the following issues:

  • As the Builder editor screen is built automatically based on a meta-model document, it needs to be rebuilt whenever a project is loaded.
  • The Builder shows the loaded project elements mixed with elements from the meta-model ready to be answered.
  • The meta-model itself is dynamic (updatable by plugins).

So all this brought complexity to the development of this feature. And fear is growing as it needs to be applied to the [Previewer](https://dont-code.net/preview-ui) as well.

Seobility screenshot

Axis on communication

We are entering a new step in the evolution of Dont-Code. Now that we got the basic applications working, we can show and explain the concept behind the Dont-Code platform: Going one level higher than the existing low-code or no-code frameworks. Dont-Code lets you combine already developed features together just with answering questions.

We've put in place some Analytics (Clicky) and SEO (Seobility) tools, and they show a lack of recognition of Dont-code with no-code or low-code keywords.

To bring more people and more developers to the site, we'll do the following:

  • Make a video showing how to develop a Task list application in one minute.
  • Write an article on Medium explaining the philosophy of Dont-Code.
  • Post some notes on Reddit to draw potential developer's attention.
  • ...
Editing countries

Country field plugin

How to manage countries with the Dont-code platform?

We're happy to announce that a new plugin has been developed: The [Fields Plugin](https://github.com/dont-code/plugins/tree/main/libs/fields) provides a way to view / edit a Country. It is now enabled by default in the Builder and the Previewer.

In the Builder, you can create a field of type Country:

Then, in the Previewer, you can select the country directly from a list and the values are displayed nicely with the flag in the list of elements:

You can see that with the power of the dont-code platform, a plugin developed once can be reused to any application.

By the way, the source code of Fields Plugin in Github is a great way to see how to develop a plugin for the Dont-code no-code platform.

List basic fields

Basic Plugin Editor

Just a quick update to announce that the Basic Plugin can now edit values of the entity.

The screenshots below show that for any created entities, you can list them (with dummy data), and as well edit them. .

Thanks to all the work done previously, it's now quite fast to create these new features !

Update on the basic plugin

Since its inception, the dont-code framework is progressing slowly but steadily. As we want plugins to be tightly integrated into the framework itself, we have decided that all screens shown will be part of a plugin.

This is the purpose of the [Basic Plugin](https://github.com/dont-code/plugins/tree/main/libs/basic), it manages the display of entities by listing them and editing them. For now, it just shows table columns that dynamically adjust to the fields you declare in the editor.

Next steps, displaying a list of values, displaying edit form, running queries against the database...

By the way, the menu now supports moving, deleting and renaming entities.

Editor screen

Plugin system is working

We achieved quite a big step last week as the dont-code framework now supports loading plugins dynamically. It supports two types of plugins:

  • The plugins can modify the behavior of the [Builder](https://github.com/dont-code/ide-ui). It can modify the model used by dont-code to describe an application, then the builder automatically adapts the questions to support it. For example, the [test screen plugin](https://github.com/dont-code/plugins/tree/main/libs/screen) adds the type field to the screen, and changes editor fields dynamically when selected.
  • As well plugins can enhance the [Previewer](https://github.com/dont-code/preview-ui) by registering to display any items in the model. The Previewer will call dynamically the registered plugin and push any information to it.

Of course, you can combine both in a single plugin, allowing you to add or modify any item in the editor and handle its display in the previewer !

To further enhance the plugin framework and make sure it is performant enough, even the core ui components of the previewer will be developed as plugins. You can find the basic ones in the following repository.

Application Builder

The Dont-code tools

Two applications work together to enable the development of applications without coding. Let's describe them...

  1. The Builder is the Development Environment. It shows you pre-defined sentences, and you simply have to fill the blanks. It is running in Angular + Angular Material
  2. The Previewer is where you see the result in realtime. It is connected to the Builder and reacts automatically to editions you make in the Builder It is running in Angular + [PrimeNG UI](https://www.primefaces.org/primeng/)
For example,
  • Start the Builder demo, then have it open the Previewer by clicking here:
  • The previewer opens with default screen:
  • Then back to the editor, and change the application name:
  • You can see the Previewer immediately updates its title:
  • Same if you add a new screen in the editor:
  • It creates a menu in the Previewer:

Rewrote Editor Element

To support plugins in the editor, I need to be able to display different editor elements depending on a selection.

For example, the [Screen Plugin](https://github.com/dont-code/plugins/tree/main/lib/screen) adds a screen type item, that when selected to 'list' for example, will ask the user only about the entity name to display in the list.

So the default elements of a screen, like 'components' should be removed as they are not necessary. The handling of editor elements is done in [TextService](https://github.com/dont-code/ide-ui/tree/main/apps/ide-ui/src/app/shared/text/services/text.service.ts) class, with maps of lists and so on. Complexity is high !

Now I changed this and [EditorElement](https://github.com/dont-code/ide-ui/blob/main/apps/ide-ui/src/app/routes/editor/editor-element.ts) stores their children directly, this simplifies a lot the code, I just spent 2 days rewritting it. Two days with no new functionalities added, but now the code is simpler and ready for dynamic editing. I even removed intermediary classes that were not needed anymore... Cool!

About licenses

I'm not really an expert in licenses, so I'm not sure my current choices will be the right ones.

There are several parts to the dont-core framework, and as they serve different purposes, they have different licenses.

  1. The core library framework is used by all components, and I want anyone interested to be able to use it. So for it I selected the most permissive license I'm aware of: the MIT license.
  2. The Builder and Previewer can be both rewritten as long as they follow the guidelines defined by core.

    However I don't want them to be used without something in return, so they are under AGPL license. That means you can derive your work from it, and even run them in your public cloud, but any changes to it must be open-sourced as well.

Builder showing plugin

The plugin system

One of the most important part is the plugin system.

To be successful and different from other low-code or no-code platforms, Dont-code should be as extensible as possible. This way, persons or companies from all over the world will be able to use and add any kind of functionalities.

Of course, this is quite complex as you must allow changes in the core of the framework from external.

This is why I need to:
  •  Create a Core library, linking together the Builder, the Previewer and the Plugins.
  •  Enable plugins to register to core.
  •  Re-write partially the Builder to support dynamic schema as it is being updated by plugins.
  •  Tidy up the editor to enable options overloading and reordering.
  •  Enable the plugins to register with the Previewer.

It is starting to work now. For example, a plugin can add a list of options named 'type' to the editor by registering with

  {
    "schema-updates": [{
      "id": "screen-list",
      "description": "A screen displaying a list of items",
      "changes": [{
        "location": {
          "parent": "#/definitions/screen",
          "id": "type",
          "after": "name"
        },
      "add": {
        "enum": [
          "list"
        ]
      },
      "props": {
        "entity": {
          "$ref": "#/definitions/entity",
          "format": "#/creation/entities"
        }
      },
      "replace": true
      }]
    }]
  }

Of course, it is placed only at the end for now, it should as well replace the other options of screens, but it's a start.