Category: javascript

Within my Node.js / yarn project I run into a strange problem. Suddenly my lerna build tool did no longer build my app module.

I am using a monorepo with module/directory structure like this

├── .gitignore
├── lerna.json
├── open-bpmn-app
├── open-bpmn-glsp
├── open-bpmn-theia
├── package.json
└── yarn.lock

The module ‘open-bpmn-app’ was ignored. As it turns out newer nx versions of lerna parse the .gitignore file in the root folder. You have to make sure that the root folder of your workspace packages is not excluded via .gitignore. In my case I had the following instructions included:

**/*-app/**
!**/*-app/package.json

By removing these two lines the problem was solved!

See also here and here.

JsonForms is a powerful and very flexible framework to build complex forms just from a JSON Schemata. A form can contain various different controls and controls can be separated into categories and layout sections. This makes JsonForrms a first-hand framework if you have to deal with dynamic forms in a JavaScript application.

JsonForms already provides different so called Renderer Sets to handle complex input widgets. But further more you can also create easily you own widget if you have special needs not supported by JsonForms out of the box.

Continue reading “JsonFroms – Custom Component for SelectItems”

In my last tutorial I gave a short introduction into Eclipse GLSP and how you can get started with your own Domain specific source model. Eclipse GLSP provides a powerful and rich feature set to solve different kind of problems in the modelling area. Today I would like to show a solution to a not so rare problem in graphical modelling.

In BPMN 2.0 and other modelling languages, elements often have labels outside of the element – e.g a label below an symbol. In BPMN labels are also moveable and can be placed at any position in a diagram even if the label is associated with the symbol:

How can this be realised with GLSP? It took me a long time, but the solution is quite simple. Let’s assume you have followed my first tutorial creating your GNode Elements out from your source model. In that case you have a GModelFactory creating the GNode elements.

Continue reading “Eclipse GLSP – Nodes and Moveable Labels”

Today I worked on the new release 0.3.0 of Ben.JS. This new release now contains no longer eval() calls. This makes the framework more secure. The old calls were replaced by direct method calls. You can test the new release by downloading the latest version from the Download site.

Another improvement is the possibility to provide a application specific release version to Ben.JS. A release version makes sure, that URIs used  in internal load() events will be extend by the release version as a custom parameter. This avoids the annoying browser caching of html templates when you upgrade your application. You simply can start Ben.JS in your application with a custom version number like this:

var myTemplate = benJS.createTemplate({
    id : "my-template",
    url : "view.html"
});
var benJS = BENJS.org.benjs.core;
    benJS.start({
        appVersion : "1.0.0"
    });

A template URI like “view.html” will be extended with the version number to “view.html?appVersion=1.0.0”

 

JavaScript FrameWork BenJS  – Version 0.2.0 released!

Today I released the latest version 0.2.0 of the JavaScript FrameWork Ben.JS. You can take a look at the idea and concept of Ben.JS on the project homepage.

My main goal for this project is to provide a tiny small and simple alternative for the big players in the area of Singe-Page-Application Frameworks (SPA Frameworks) –   especially Angular and Ember.

Today JavaScript is not only a widespread programming language, but also a platform to develop clean and stable web applications. But first of all, this is not the merit of frameworks, but of the language itself. A good way to learn using JavaScript in the right manner is the Book ‘JavaScript Patterns’ from Stoyan Stefanov.

I am convinced that for a good JavaScript application it’s enough to know the most important patterns and to understand the right usage of jQuery. And here is the most important reason for BenJS:  The core function of this framework is to transport data models into a Web page and to manage user inputs according to the data model. But in my eyes it is also important to understand, that the business logic should be encapsulated into a Web- or MicroService. For my understanding it is not the task of JavaScript to implement business logic! If you follow this principle and hide your business logic into a WebService, BenJS will be the right alternative to bring your business data into your Web application.

If you have any ideas, questions and feedback join the project on GitHub!

 

Today I started the release 0.1.0 of the JavaScript Framework Ben.JS. The new release includes improvements of handling view templates and for-each blocks. We tested the framework within the latest version of the Imixs-Workflow AdminClient which is now based on Ben.JS and the Imixs Rest API.

Ben.JS is a plain small and easy-to-learn JavaScript framework for single-page-applications (SPA). The framework simplifies the way to create powerful JavaScript Web Applications with a lightweight MVC framework. Read more about Ben.JS here.

 

Today, I discussed with some capable developers the pros and cons of SPA frameworks. This discussion resulted in a debate about the business logic in SPAs, which brought me to the following thoughts about a SPA architecture. In one sentence: Don’t think about the business logic!

Why? Take a moment and remember about the basic idea of a Singe Page Application, what is the general concept behind all that? Basically it is the fact that we can represent any kind of information in modern web browsers. Using HTML5, CSS3 and JavaScript enables us to deal with information in a very easy way. Browsers were build to present information – noting else!. JavaScript on the other hand is just a way to deal with some behaviour how to represent information to the user. For example: fade in some very important message, or show a bubble information text when the user moves the mouse over a picture.

On the other hand we today know very well the concept of REST Services. This is one of the major enablers of Singe-Page-Applications. All frameworks, like Backbone, React, AngularJS, Emer.JS or Ben.JS deal with REST Services and help us to handle the information which we want to show to the user. But if you think about that – these frameworks were build on the following problem: how to present data in a Web Browser using JavaScript?

Today the most SPA frameworks also deal with a heavy load of functionality which makes it hard to understand most of these frameworks. This is because people began to think about another problem: How can we process information? But this the domain of business logic. In the past this business logic was placed in server side frameworks like JEE or Spring. I think this is the right place for this kind of logic. A server should think about how data should be stored in a database, validate data, transform data or update data depending on various business rules. But the time when the Single-Page-Frameworks become more and more common in modern development, many people begun to believe that JavaScript is now the place for business logic. And so we began to use REST Services just to store and fetch data entities. But this is absolutely wrong! Business Logic means to deal with business data in a way  going conform with the business process. So business logic is something which is related to the data and not to the representation of data!

So at the end this means that you should put all your business logic into your REST Service API which is the interface between your Browser front-end and your database back-end. And now you will see what Singe-Page-Applications are really good for: they just represent the data provided by your REST Services. No business logic here! Just show the user the data provided by the back-end. This means: if there is data – show it to the user – if there was something going wrong with the data – show the error message to the user. A Singe-Page-Application can be as dumb as a Terminal application in the 1980s. Put your business logic into the back-end, and use SPA to represented your data. The result will be a  be scale-able, flexible and modern Web Application. And the best: You don’t need to worry about which framework you choose on the front-end. No matter if Angular 2.0 brings up a new concept. The goal of your Web Application is just to represent information – nothing else!

Take a look at the open source project Ben.JS which solves the problem of representing data in a web browser….