Overview
This first article of our new series map.apps 4 for developers is aimed at anyone who wants to learn more about the possibilities and tools provided by map.apps 4 development. Here, we first provide an overview of the topics that will be dealt with in more detail in separate articles:
- Overview (this article)
- JavaScript language levels and build process
- Vue.js – Create and test UI widgets
- Vuetify.js – Integrate prefabricated UI components
In addition to the new possibilities - introduced with line 4 of map.apps - the usual well-known mechanisms and programming paths are still supported. The distiction between line 3 and lin 4 in map.apps 4 is explained in this article.
In addition to this article series, we have released the GitHub repository mapapps-4-developers. This can be used to familiarize yourself with the possibilities and innovations in practical examples before the other articles appear. In addition, it can be used as a template for first own steps as a map.apps 4 developer, since it is immediately after the git clone.
JavaScript language levels and build process
The standardization of the language JavaScript itself develops as much as the software written with it. With map.apps 4 JavaScript can now be used according to the standard in the sixth version. Since this sixth version was released in 2015, the standard is ECMAScript 2015 / ES2015 (partly ECMAScript 6 / ES6).
Each language version brings new possibilities, expressions and constructs with it – including ES2015. Among the many innovations are (see "Learn ES2015" on babeljs.io):
- Arrows and Lexical This
- Classes
- Template Strings
- Destructuring
- Let + Const
The current browsers supported by map.apps 4, however, are only gradually implementing these new language versions. In order to be able to benefit from the new language features as a map.apps 4 developer, the JavaScript source code is transposed to a language version, which is executable in all browsers, using Babel. This is done automatically and in the background, so the developer has no effort and can still develop and debug in ES2015.
In the following, second article of this series, we will look more closely at the possibilities of ES2015. We also discuss the conventions and recommendations for building bundles. Other aspects of the build process for JavaScript will be in the same topic. This includes, for example, the matching of the manifest.json format to the style of package.json files, and generally the use of npm as a JavaScript package manager.
Vue.js - Create and test UI widgets
Vue.js is a JavaScript framework for creating interactive user interfaces. Vue.js places the focus on the view layer and can be easily integrated with other libraries (see next section).
In map.apps 4, Vue.js widgets are declaratively described. Through an easy-to-read template syntax (similar to HTML), the appearance and behavior of a widget are defined and controlled by means of loops, conditions and directives. All this is connected in a single file and thus well structured and better testable. It is especially easy to maintain when using this mechanism to define smaller and reusable UI components. A complex UI can thus be simply constructed from many such components.
Such UI components summarize the description of their appearance and the JavaScript code necessary for their own behavior well in a .vue file - the development of the business logic can then take place elsewhere. Thus, programming patterns such as Model-view-viewmodel (MVVM) can be easily implemented with Vue.js. map.apps 4 saves developers from repetitive programming work (for example, to synchronize data between View and Model) with tools such as their own binding class.
In the third article that appears in this series, we will look at the details of the structure of a .vue file, how they can be used as components, and how the map.apps 4 binding can be used.
Vuetify.js – Integrate prefabricated UI components
Vuetify.js is a Vue.js component library that allows you to create UI components. Vuetify.js was implemented according to the specifications of the Material design specification. map.apps developers can easily develop new user interfaces from the individual components according to the modular principle. The appearance and behavior of the individual components can be adapted by means of various possibilities for adjustment of the individual components.
We will also publish a separate article about Vuetify.js with explanations for use in map.apps 4.