Front-End

1 How Does Mendix Support Multi-Channel Applications?

Mendix allows you to combine web and mobile applications into the same app model using common development tools and a single code base. This increases productivity, reduces maintenance costs, and also reduces the need for differing skillsets to build web and mobile apps.

With Mendix, you can build responsive user interfaces that adapt automatically to the end-user’s device. By default, Mendix provides a full set of layouts, pages, building blocks, and widgets. There is a flexible grid system that can be easily nested and configured for different screen sizes. The Mendix front-end is based on Bootstrap, which is also fully responsive, making it easy for (new) users to build responsive user interfaces.

Mendix Web Modeler

To gain more flexibility and optimize the user experience, Mendix allows you to specify a user interface per device type (desktop, tablet, and mobile). In addition, it is possible to distinguish between a mobile website and a mobile app that can be installed. This can be done for both phones and tablets, which means you can build a mobile website and a native mobile app from a single model. Using the concept of navigation profiles, you can configure the channels and corresponding user flow for the app. Besides these navigation profiles, it is also possible to use the device type in the logic for other scenarios.

This multi-channel approach allows developers to optimize the user experience by using different channels while quickly building user interfaces by reusing UI components and building responsive interfaces.

The JavaScript-based Mendix Client renders the front-end while handling the actions and communication with the server. Mendix uses ReactJS and Dojo to optimally render and update the UI. The client is highly optimized, using optimal page reload (OPR) to only reload those elements of the page that have been changed. This is combined with asynchronous data transport for all widgets and the ability to cache the assets required to render pages and data on the device/browser, reducing round-trips to the server and improving app performance.

For more information, see the section Runtime in Architecture Principles.

2 How Can I Build the Front-End of My App?

With Mendix, you can create pages for the front-end user interface of your application from blank or predefined configurable layouts and templates, allowing you to consistently deliver great and responsive UX for all the apps in your landscape.

The Atlas UI framework offered on the Mendix Platform comes with diverse layouts, templates, and building blocks you can easily implement to design beautiful applications. You can leverage standard Mendix resources to create rich user experiences or create your own company building blocks, layouts, and templates that can be reused in other apps.

Mendix offers various UI elements (called widgets) out of the box that can be used to build these rich user interfaces. Widgets can be placed directly on the page or combined in building blocks. Mendix provides widgets that include basic inputs, buttons, and text boxes as well as widgets for Google Maps, rich text, slider functionality, and much more. The Mendix community also develops, releases, and maintains over 600 hundred open-source custom widgets for use in app development via the Mendix App Store. Next to this, it is also possible to extend Mendix with your own custom widgets

Responsive Templates

Mendix apps can be fully styled (as discussed in User Interface Design) and extended (as discussed below in the section How Can I Extend the Mendix Front-End?).

You can learn more about the possibilities of Mendix app UX in the Mendix Academy learning path Creating Engaging UX.

3 How Does Mendix Support Client-Side Logic?

With Mendix, you can visually model client-side logic via nanoflows, which can be used in both web and mobile apps. Nanoflows do not require a connection, making them also very useful in offline mobile apps. They have the same language and editor as microflows, but they contain a different set of activities that is focused on client-side possibilities. Nanoflows fully run on the device or in the browser, making them very fast. Here is an example nanoflow:

Nanoflow Logic Example

For more information, see Nanoflows in the Mendix Reference Guide.

In addition to nanoflows, it is possible to directly use client-side expressions on pages for validations, conditional visibility, and editability in order to create highly interactive pages.

4 How Can I Extend the Mendix Front-End?

Mendix makes it possible to extend the front-end by creating custom widgets that have a seamless integration with the Modeler and making them part of your app’s model. You can define all types of parameters and make these widgets reusable. The input parameters are transformed into easy-to-use settings screens that can be configured from the Modeler. In addition, custom widgets have preview capabilities for a WYSIWYG effect, making it easy to get an impression of the widget and quickly verify its configuration.

You can version custom widgets and upload them to a Mendix Private App Store so that other developers can easily use them. It is also possible to share widgets manually or embed them in (company) starter apps.

Custom widgets are based on JavaScript and can be used to create custom inputs, visualizations, and logic as well as utilize device capabilities. Mendix offers an extensive Client API to leverage Mendix functionality. For other functionality, third-party libraries and Cordova plugins can easily be integrated.

Developers can use their preferred IDE and the standard available integrations with NPM, Gulp, and Grunt for a simple and flexible workflow.

For more information, see the Custom Widget Development how-to’s in the Mendix documentation.

5 Does Mendix Support Multilingual Apps?

Mendix fully supports multilingual apps. In the Modeler, you can configure multiple languages per app, and texts and captions can all be configured for multiple languages. Per language, default number and date formats can be configured for the whole app. When you use numbers and dates they are automatically applied, but it is also possible to locally specify custom formats.

For more details, see the section How Does Mendix Support Multilingual Apps? in User Interfaces.

Mendix, Win in a software-driven world.