step7_isomorphism

Step 7: Isomorphic JavaScript API

This step of the tutorial explains isomorphism and how KMF provides isomorphic models for Java and JavaScript.

Isomorphism

Isomorphic models are models providing the same API in different programing languages. This has the advantage that the same model can be used on different platforms. For example, a JavaScript model can be used in the browser and a Java model in the backend. Since the models provide the same API, the code can be easily ported from one to another, and it makes easier the interaction between different platforms, .e.g., client/server, etc. Currently, KMF provides support for Java and JavaScript. KMF generator can be extended to support additional languages if needed.

Isomorphic JavaScript API

JavaScript code is not directly generated by the KMF generator. Instead, the generated Java code is first transpiled to TypeScript, which is in turn compiled to JavaScript. This mechanism ensures the availability of a typing system as long as possible. To activate the JavaScript code generation, we just need to add a flag (<js>true</js>) in the maven configuration:

    <plugin>
        <groupId>org.kevoree.modeling</groupId>
        <artifactId>org.kevoree.modeling.generator.mavenplugin</artifactId>
        <version>${kmf.version}</version>
        <executions>
            <execution>
                <id>ModelGen</id>
                <phase>generate-sources</phase>
                <goals>
                    <goal>generate</goal>
                </goals>
                <configuration>
                    <metaModelFile>smartcity.mm</metaModelFile>
                    <js>true</js>
                </configuration>
            </execution>
        </executions>
    </plugin>    

This will generate a step7_isomorphism-all.js file in the resources folder of our application. It contains everything we need to use the JavaScript model.

For example, in a HTML file the model can be included like this:

<script src="step7_isomorphism-all.js"></script>

After a model is included, it can be used in exactly the same way as in Java:

<script>
    var BASE_UNIVERSE = 0;
    var BASE_TIME = 0;

    var dm = org.kevoree.modeling.memory.manager.DataManagerBuilder.buildDefault();
    var model = new smartcity.SmartcityModel(dm);
    var baseView = model.universe(BASE_UNIVERSE).time(BASE_TIME);

    model.connect(function (connect) {
        var city = baseView.createCity();
        city.setName("MySmartCity");
        var newDistrict_1 = baseView.createDistrict();
        newDistrict_1.setName("District_1");
        var contatDistrict1 = baseView.createContact();
        contatDistrict1.setName("Mr district 1");
        contatDistrict1.setEmail("contact@district1.smartcity");
        newDistrict_1.setContact(contatDistrict1);
        var newDistrict_2 = model.createDistrict(BASE_UNIVERSE, BASE_TIME);
        newDistrict_2.setName("District_1");
        city.addDistricts(newDistrict_1);
        city.addDistricts(newDistrict_2);
        var sensor = model.createSensor(BASE_UNIVERSE, BASE_TIME);
        sensor.setName("FakeTempSensor_0");
        sensor.setValue(0.5);
        newDistrict_2.addSensors(sensor);

        baseView.setRoot(city, function (setRootThrowable) {

            baseView.json().save(city, function (modelStr) {
                console.log(modelStr);
            });

        });
    });
</script>