design-first/system-designer

A low-code development platform for creating systems 🇺🇦#standwithUkraine

System Designer

What is System Designer ?

No matter the frameworks you use and the code you write, the most important is the model that you define to create your system. System Designer helps you to design this model and to generate the classes and components to build your system.

What is a system ?

With System Designer you create in fact a system and not an application. But what is a system ?

A system:

• is defined by a model,
• is composed by components and
• reacts to events with actions that we call behaviors.

What can I do with System Designer ?

Design your system with ease

If you look at the different JavaScript frameworks on the market, you will notice that they all have their own way to define a model, generally only with code.

System Designer uses UML, a standard, to define your model. So you probably already know how to design in System Designer even if you have never run it.

The definition of the model is stored on a JSON format called MSON. With MSON you can define types, classes, one to one / one to many relationships and multi inheritance between classes.

Code the behavior of your system

Once you have created your model, System Designer generates the skeletons of all your methods. You only have then to add your code to implement them.

System Designer provides you helpers to manage your components. You can easily navigate through components to create your application.

Create components graphically

There is no need to code to instantiate a component. Create a component in System Designer is like creating a document in a NoSQL Database.

In fact, System Designer acts as an ODM (Object-Document Mapper) to manage your components as NoSQL Documents.

Run your system

You can run your system directly from System Designer and then export it to HTML, JSON, JavaScript, a Node.js module or a Graphviz file (* macOS, Windows, Linux and PWA version only).

Because you have defined a model for your application, a Dynamic Type Check is done on every action of your system. All warnings are send and shown in System Designer.

Debug your system

System Designer can load the model of any system that runs on the browser or on Node.js. You can see the schemas, models, components and methods of the running system and you can edit them.

All modifications to the model done inside System Designer will be send to the running system. There is no need to reload to see your modifications.

Design on the go

System Designer can be used on Windows, macOS, Linux, iOS, iPad, Android or any browsers. You can also install it in your project: System Designer requires no backend to work, it is a full web application.

System Designer has a GitHub module to synchronize your work between all these apps. You can begin your design on your Mac and then continue it on your iPad.

Build

Installation

Clone the repository:

git clone https://github.com/design-first/system-designer.git

Once you have cloned the repository, install the dependencies:

npm i

Build for web

Here are the different tasks you can use to build and start System Designer as a Progressive Web App (PWA):

npm run web

Then you can start the server:

npm run start

Once server started, go to http://localhost:8080/.

Build for macOS / Windows / Linux

To build System Designer for Electron:

npm run electron

Copy the content of /dist directory into your System Designer for Electron project.

Then in your System Designer for Electron project:

# build for macOS
npm run macOS

# build for Windows
npm run windows

# build for Linux
npm run linux

Build for iOS / Android

To build System Designer for Cordova:

npm run cordova

Copy the content of /dist directory into your System Designer for Cordova project.

Then in your System Designer for Cordova project:

# build for ios
npx cordova build ios

# build for android
npx cordova build android

Development

Web

To start System Designer in development mode for web:

npm run dev

Once server started, go to http://localhost:9001/. All the modifications to the source code of System Designer will rebuild the solution and refresh the page.

Mobile devices

To start System Designer in development mode for mobile devices:

npm run dev-cordova

Once server started, go to http://localhost:9001/. All the modifications to the source code of System Designer will rebuild the solution and refresh the page.

Documentation

• Quick Start
• Documentation

Community

• Code of Conduct
• Contributing Guidelines

License

Copyright © 2024 Erwan Carriou

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Do not use System Designer if you do not believe in Equality and Diversity.

System Designer is not for people of hate.

system-designer's Issues

Error when exporting on IE

When exporting a system on Internet Explorer, we get an error in the console.

Adapt UI for iPhone

For the moment iOS version of System Designer is limited to iPad. We want to make the app usable to at least on a iPhone 6 screen.

[Cordova] show keyboard on input focus (iOS)

On iOS, show the keyboard when an input as the focus.

Allow copy of function header and parameters.

Now in behavior we forbid any update of the header of the function.
We need to be more permissive and allow copy of function header and parameters.

A schema can not have the same name as the current system

When we create a schema that have the same name as the system, there is a mix between behaviors in behaviors tab.

Complete tutorial documentation

On tutorial documentation, explain how to install the created package.

Update link defaultValue

When creating a link, the default value is now "" instead of {}.

Remove too technical informations

update tabs:

• MSON => Schema / Model / Type
• action => Behavior
• JSON => Component

Add more checks on schema edition

When editing a schema, add warnings if:

• attribute name contains a space and
• attribute name begins with '_' : in JavaScript, we generally use the '_' notation in the name of an attribute to express that it is private, we forbid that.

Add quick start video in the build

Because vimeo seems blocked in some countries, the quick start video will be added in the build.

Create a system for the editor

In order to complete task #34, we need to extract the code that manage the editor into a system. This system will be load by System Designer as an add-on, so the switch between the 2 editors engine (ace and codeMirror will be easy)

Stop and start methods of the system are merged in Composition

Stop and Start methods of the system are merged during the Composition process.

Improve UI of component

• remove " in components when displayed in Components tab

Avoid to create 2 start/stop methods.

Avoid to create 2 start/stop methods for the system.

Update System Runtime to v1.8.10

Update System Runtime library to v1.8.10.

Can not set a 'date' property

Due a model validation issue we can not set a date property.

Order RuntimeComponent method and event name

events/ method of schema / model * RuntimeComponent* are not is the good order.

Add system name in the title of the page

Add system name in the title of the page.

Force save when switching tab on system edition

When switching tab on system edition, force save when changing tab.

Some UI / UX improvements

• on Cordova, make some test with an editor with a full height,
• rename Github into GitHub (typo fix),
• on Cordova, add some autocomplete ?
• Compose button management : not primary and hidden,
• Check why there is an error on Internet Explorer with export and
• add a message on Safari to explain how to export.

Add an option to show advanced features

Add option to show advanced features (example: JSON tab in behavior).

Error if the running app uses jQuery

When running an application with Electron, there is an error if the application contains jQuery library.

Add 'default' property for type definition

Add default property for type definition.

example: { "name": "address", "type": "object", "schema": { "city": { "type": "string", "mandatory": false, "default": "Paris" } } }

Keep the context when switching tab

When we switch from one tab to another tab we need to keep the context.

For example:

• if I am on Schemas tab and if I selected Jedi schema, when click on Models tab, I need to be on Jedi model.

Check accessibility

After testing accessibility with Voice Over, here is a list to task to be done:

• Fix accessibility on System Designer web site
• Fix toolbar navigation
• Fix menu navigation
• Fix element selection focus on workspace with tab
• Add font size control
• Check accessibility level of Ace / Code Mirror editors

Improve Github sync dialog

Proposal:

• Github Pages [] Add page

|-> combo with 'info' as default log

• NPM module [] Add package.json

And maybe remove Add Node.js file choice.

Add behaviors on components

Now we can add behaviors to the system and/or models. We need to add behaviors on components.

Update components when we update default property in model

When we update default property in model, we need to update components that have that default value.

Use CodeMirror editor for mobile versions

System Designer uses ace for editing schemas/models/behaviors/.... We use this library for the web / desktop and mobile versions of the IDE. It seems that it is not optimize for touch screens.
To fix this issue, we will use CodeMirror instead for mobile device.

It means:

• Electron and web versions will use ace editor,
• Cordova version will use CodeMirror and
• they will be used threw the editor component that will choose the correct editor depending of the context.

Invalid manifest

I've been getting the following error since last evening.

ergonomics(buttons): tooltip on button icon

To know what the buttons really do, you need to click on them - even if they have a shape that can give some insights, the actions they trigger changes between the context they are displayed (system, shema ...).

Simple way would be to add a title="..." attribute.

[UI] Hide 'Compose' button when no current system to compose with

In import dialog, hide the Compose button when there is no current system to compose with.

Improve UI when drag/drop a system

When user drag/drop a system (in JSON format) on System Designer:

• a dialog is shown and
• if there is a current system, a Compose system is shown.

Fixed some UI glitches on resize

Fixed some UI glitches on resize.

Add a contextual menu on editor

Add a contextual menu on editor:

• for copy / past / cut
• maybe navigation if on a schema to go to the model
• ...

[Cordova] To gain space on small devices, remove 'help' area

To gain space on small devices, remove 'help' area for small resolutions.

Improve exportation

• Add header on Node.js exportation

Set log level to 'info' by default

By default, when exporting to HTML or to Node.js, we log all the messages (from debug level). It is better to set this level to info by default.

Remove advanced mode on Cordova version

Remove Advanced mode on Cordova version.

Bug on chinese / korean input

There is a regression with the current editor based on ace: there is a strange behavior when typing in chinese or korean in the editor.

First we fix the issue and maybe in a next release we migrate to CodeMirror

Update Bootstrap and jQuery versions in dvd-collection example system

Update Bootstrap and jQuery versions in dvd-collection example system.

Update templates used for exportation

• Update templates used for exportation

Many small improvements

• update videos that are shown on first start of System Designer
• update Grunt scripts
• fix markup of Cordova and Electron app
• fix bug that happens sometimes when focusing the app on Electron
• update HTML on export
• fix typo on readme

HTML exportation failed when system contains special characters

When making some tests to create a ToDoMVC application, I get some errors on HTML export because the template contains special characters that behave like pattern when using in replace API: $$, $&, $`, $', $n and $n.

Improve UI

• Separate models and system component
• description of system keeps return

On schema creation dialog, add a checkbox to generate name

When creating a schema, on schema creation dialog, add a checkbox to generate the name. The name will be a UUID that insure that the name is unique.

Update System Runtime to v1.8.7

Update System Runtime to its latest version.

Fix minor UI / UX bugs

• improve the context of help
• format HTML on export
• a schema can not have the same name as the system
• a system or a schema can not have # in the name
• fix typo error on example-dvd-collection system

Add doc on how to install System Designer via npm

• Add a documentation on how to install System Designer via npm

Always allow search for systems

Use case to solve: System Designer is deployed on the same server as the application and user want to design "on the fly" the running app.

Todo:

• if user click on 'design' button, add a dialog if no configuration set for designing
• propose choice to user to search for running system or not.