During the lifetime of the ADempiere project, there have been two standard UI developments (Swing and Ajax ZK). There were also individual developments on other user interfaces (UI HTML, two for UI Mobile). This all has been highly expensive, both in time and resources. Synchronizing the functionality for each UI is now practically impossible.

This issue limits the growth and the implementation of improvements for any of the interfaces. Moreover, according to the document ADempiere Cloud Architecture road map , the path leading to modernizing ADempiere requires the applications be deployed in the cloud. Doing so would require a UI capable of managing much more that the current implementations would allow.

Recently, Oracle has deprecated support for Swing as cloud-based applications increase in popularity and the model of a large client application has lost favour. At the same time, the version of ZK used by ADempiere is becoming obsolete, making the migration to the latest ZK version essential if ZK continues to be used. However, the current implementation of the ZK interface a web based version of the same Swing interface, leading to a non-responsive design that is difficult to migrate to a cloud architecture. A new approach is required.

Given these problems and the challenges of the future documented in the ADempiere road map, a number of consulting companies joined together to finance a project with the goal of developing a new, modern, responsive ADempiere interface for any device, including Mobile Phones, Tablets & Desktops that could drive the move to a cloud-based application

This paper is a request for other companies and individuals to join the effort by providing financing and/or human resources to complete the work..

What work been sponsored?

Developers and Testers : There were 4 developers involved.
Timeline : The initial talks were carried out in August , 2018.
Studies took place in Septem ber-November, 2018.
Development of working prototype was started in September , 2018.
Prototype was finished in October, 2019.
Total months invested: 15 .
Expenditure to Date : The amount invested summed up to $10,790 USD by Dec 2019.

Who has financed the development so far?

Starting from the initial concept, up to testing and development, the following people were involved:

What is needed to finish the work?

Finishing the work means implementing all features still missing, so that ADempiere can be used in a production environment.

A list of the necessary features can be found at the end of this document.

Based on the work already completed, we estimate the resources necessary to complete the features will be:

Developers: 4 Developers.
Costs/month : USD 2,000
Estimated Time: 12 months
Estimated expenditure to date: USD 24,000

What is the status of the project?

The project can be seen in Github ( https://github.com/adempiere/adempiere-vue/projects/1 ) and looks as follows:

How can I contribute?

Interested parties can contribute making donations, or by undertaking part of the remaining work and contributing it to the project.

If you contribute work, the ADempiere project does not require any form of assignment of the copyright in your work to any party but does require the work to be licensed under GPLv3 terms.

To make a donation, please contact the ADempiere Foundation by e-mail at official@adempiere.net . We will send you instructions on making a donation through our PayPal account and also gather information from you that we can post on our website, such as your company name and logo.

The new ADempiere UI

What does the new ADempiere UI contain?

ADempiere UI is the new ADempiere interface for the reactive management of the layer in charge of user interaction. It will replace the existing UIs based on Swing and ZK. It will also supercede the mobile UI and various other partly complete Uis.

ADempiere currently has a very high dependence on a few core classes. The new UI will avoid the need for obsolete class linkages by adopting a server-side service architecture.

The development of the new ADempiere UI delivers many changes including::

Vue as a client-side framework
Vue is a reactive framework written in Javascript for the the client-side UI management.
It is at the forefront in terms of development trends in web interfaces of the SPA type (Single Page Application).
gRPC as a link to remote procedure calls
gRPC is the chosen communication interface for remote procedure calls; superior by far for the serialization level and transmission speed.
gRPC uses http2 as a communication channel and is used in platforms such as Netflix as well as the entire Google cloud communications niche.
Element-UI as a style framework
It was selected because of its simplicity and practicability.
Element-UI is one of the most used UI-KITs within Vue.
Vue-Element-Admin as a set of development tools
For developing SPA business applications, Vue-element-Admin is a collection of different tools for the rapid development of Element-UI-based applications.

Why Vue and not React?

After much research and comparison between the best frameworks for writing Javascript reactive-type pages, two very good options met the project's expectations: Vue and ReactJs.

The main reason why Vue was preferred to ReactJs was that Vue was born in a free world and not under the governance of, nor subject to the interests of any particular company. This is not the case by ReactJs.

Style Framework Selection

After studying and realizing how reactive Vue is, a style framework was chosen.
This was accomplished by comparing the main style framework existing in Vue:

The framework finally selected was Element-UI . Reference comparison: https://www.npmtrends.com/element-ui-vs-vuecidity-vs-iview-vs-bootstrap-vue-vs-vuesax-vs-at-ui-vs-muse-ui-vs-framework7-vue-vs-vuetify

Components Kit

Vue-Element-Admin was chosen because it is complete and provides the features necessary for the development of any SPA application.

For references please read the following : https://panjiachen.github.io/vue-element-admin-site/guide/

Solved Problems

The main objective of developing the new UI is to reduce the maintenance costs of the multiple UIs (Swing, ZK, HTML). Having a single responsive UI adaptable to any device will allow concentrating efforts to improve usability and functionality.

Today, the functionality of the interface cannot evolve rapidly since it is necessary to implement each new feature for all interfaces, which is very expensive.

Another important drawback is that all interfaces are built with obsolete technology, which prevents using the advantages of more modern frameworks to build a responsive application, this situation ties the evolution of the interface to the current frameworks and their limitations.

Many of the current frameworks that offer many advantages to deploy applications in the cloud could be used to improve the user interface. Today this is not possible since they are not compatible with ADempiere's license; Swing, ZK, HTML interfaces are dependent on server-side code with GPL2 licenses because the interfaces were not designed as an independent UI View of the ADempiere's core.

The independence of the User Interface implementation (also called "the View") is one of the most important issues to solve. This is why much attention has been paid to ensuring that the new ADempiere Vue interface should be totally independent of the ADempiere core or the GPL2 license.

This way the communication between the Business Logic and UI will be through gRPC, a high-speed protocol implemented by Google that enables cloud applications to become efficient.

The independence of the UI will also allow it to adopt the GPL3 licence compatible with a wide variety of other free software licenses such as Apache 2, . (See the gnu.org website for a full list of compatibilities.)

Gained Experience During Development

VueJS is a framework based on the Progressive JavaScript Framework.

On Vue Home please watch the video " Why VueJS ". It allows evolution based on the needs of the project since we can move from a small scope to a very large one without the framework becoming insufficient in the future. The short learning curve and the excellent documentation allowed the formation of a a skilled team that became productive quickly.

VueJS is a Framework designed to make component-based applications: it will allow us building in a very orderly and efficient way the components required for an excellent UI for ADempiere.

VueJS has a software ecosystem that is similar to ADempiere, it provides synergies of collaboration and methodology.

Some large companies such as Facebook, Adobe, Xiaomi, Alibaba, Nintendo, etc. have adopted VueJS as their platform to develop applications for the cloud.

We believe Vue will work equally well for Adempiere. Please see the following links. ^[1]