System Designer

System Designer

  • Languages iconPortuguês (Brasil)
    • English
    • Ελληνικά
    • Svenska
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Tutorials

Introduction

  • What is System Designer?
  • O que é Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Manage Extensions
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Bundle your HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Listen to a model event
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Articles about the project

About

  • Quem está por trás do System Designer?
  • Privacy Policy
  • License
Translate

Bundle your JavaScript

In this tutorial we will show:

  • how to define a JS model,
  • how to create a JS component and
  • how to use it in your application and
  • how to install it in another application.

There are many ways to bundle JavaScript files

This is one example on how to bundle and install JavaScript libraries with System Designer. But it is not the only way. Find the one that matches your needs.

Define a JS model

First create a schema that:

  • has for name JS
  • has a source property and
  • a render method.

Image Alt

Then edit the model:

  • change the type of source in from any to javascript and
  • empty params array of render method.

Image Alt

Code the behavior of render method

Edit the render method of the model as follow:

function render() {
  var div = document.createElement('script');

  div.innerHTML = this.source();
  document.head.appendChild(div);
}

Image Alt

Create a JS component

Now create a JS component from the interface.

Image Alt

Then edit the component. You will notice that a source tab appears. It will allow you to add your javascript in your component. Put the JavaScript you want. In this example we set:

alert('Hello World');

Image Alt

What happens?

Because in the model you tell that source property has for type javascript. System Designer let you edit this property as JavaScript. It means that System Designer will check that the JavaScript you write is correct.

Then click on the Component tab to edit the _id property value of the component:

Image Alt

Render your component in your application

Edit the start method of your system and:

  • require the JS component and
  • call the render method.
function start() { 
  this.require('alertComponent').render();
}

Image Alt

Run your bundle

Now you can run your system and see the result.

Image Alt

Install your bundle in another system

First, export your bundle by clicking on the export button. Choose JSON to export your bundle in a JSON file. Your bundle is ready then to be imported in another system.

Client-side example

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- your bundle -->  
        <link rel="system" type="application/json" href="myjs.json">

        <!-- other systems --> 
        <link rel="system" type="application/json" href="system1.json">
        <link rel="system" type="application/json" href="system2.json">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.min.js"></script>
    </body>
</html>

Server-side example

let runtime = require('system-runtime');

// install your bundle
runtime.install('myjs.json');

// install other systems
runtime.install('system1.json');
runtime.install('system2.json');

To be able to work on the server, your system must not use the DOM APIs.

More details

See in this guide to have more details on how to install your bundle client-side or client-side.

You can bundle any JavaScript library

System Designer allows you to easily import JavaScript libraries like React in your system.

← Bundle your CSSBundle your HTML →
  • Define a JS model
  • Code the behavior of render method
  • Create a JS component
  • Render your component in your application
  • Run your bundle
  • Install your bundle in another system
    • Client-side example
    • Server-side example
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou