AuraQ has vast experience helping organisations find the gaps that can be filled to enhance their business. This could be to improve efficiency, integrate legacy systems or deliver new portals and strategic applications to create competitive advantage. Contact us to request a free, no obligation Gap Analysis.
React Native: Exciting new features in Mendix Studio 8!
Mendix is a low-code software development environment that allows users to rapidly produce applications for the business. Their latest major platform release (Mendix Studio 8) has introduced new and exciting native mobile features to cater for emerging business needs. This blog post will talk about some of the use cases that mobile applications can support and how to get started making your own pluggable native widget.
Mobile apps
Businesses can benefit hugely from having a mobile app, whether it be for customers or employees, but there are key considerations to be thought through before starting development e.g. what will be the main method used to build the mobile app; hybrid, web or native? And what operating system will you develop for?
There are always trade-offs when making these kinds of decisions. Web mobile apps are fast to develop and typically have a low development cost but are more difficult to optimise. Hybrid apps are slightly more costly and slower to produce but have better performance than a web app. Native apps typically have the best performance but are costly and difficult to develop as it usually requires developing for two operating systems. However, there is a resolution to these trade-offs without having to compromise, using Mendix to build truly native mobile apps based on React Native.
React Native
Facebook announced in 2015 that they were making their framework “React Native” opensource to allow developers to create applications for both operating systems with one codebase. React is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities. This a great solution for anyone who wants to reap the benefits of a native app without requiring two teams of developers to make it.
Mendix has now started using React Native to allow developers to create their pluggable widgets. Some of the new features that Mendix now offer out-of-the-box include fingerprint authentication, GPS, camera, push notifications, swipe gestures and QR code scanner, just to name a few. These new features increase the diverse range of applications that are possible for businesses but there is almost certainly going to be a point when a custom widget would be a good solution.
Preparing to build your pluggable widget
If you have experience with React then there will be almost no learning curve for you and even if you have no React experience, there is an abundance of resources online to get started. I will now give you a quick guide on how to start making a pluggable widget for Mendix. So, grab your favourite text editor, fire up your terminal and we can get started.
There are few dependencies that are required to start building a pluggable widget, these can easily be installed and you can start building within around 10 minutes.
- Firstly, you will need Node.js a JavaScript package manager, which can be found at https://nodejs.org/en/ (they recommend downloading the long term support (LTS) version). If you have done any web development, you will likely be already familiar with this.
- I’d also recommend getting familiar with Gulp (a task running tool) before going beyond this point as you use it to build the widget. To install it you can use the command “npm install -g gulp-cli”.
- Next install Yeoman (a web scaffolding tool). This tool is used to create and setup the environment in which to start developing the widget. This tool can be installed with Node using the command “npm install @mendix/generator-widget -g”.
- It is also recommended to have a basic understanding of Typescript but, in my opinion, for getting started this is not necessary and it is more fun to learn when developing.
Creating your widget
Once you have installed the above requirements you are ready to start creating your widget. To start, have an empty folder ready and open your computers terminal. In windows I recommend using Powershell, right click on it and run as Administrator. Make sure you are in the empty directory, this can be done easily by typing cd and then dragging the folder into the terminal and then press enter.
To create the widget type “yo @mendix/widget” then type the widgets name and press enter.
use the following configuration:
- Widget name: {Your widget name}
- Widget Description: {Your widget description}
- Organization Name: {Your organization name}
- Copyright: {Your copyright date}
- License: {Your license}
- Initial Version:{Your initial version number}
- Author: {Your author name}
- Mendix Project path: ../../
- Programming language: TypeScript
- Widget type: For web and hybrid mobile apps
- Widget template: Empty widget (recommended for more experienced developers)
- Unit tests: No
- End-to-end tests: No
Once the process has completed you can open the project in your text editor or IDE and start exploring the project. For more guidance on how to continue developing the widget please click the following link: https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one.
Mendix developers might ask “Why should I develop a native app when I already have a hybrid or web app that works on mobile devices?” The answer is that a native app differs from a hybrid app in that it is stored on the device itself and has direct access to a device’s features. This allows the app to be developed in an offline first approach where the device does not require to be connected to the internet to be used.
This approach has advantages and disadvantages. An advantage is that there is a performance increase as there is no external limitation of internet bandwidth. The disadvantage is that the developer needs to be considerate when developing as there is no guarantee that the user is connected to the internet or database. For a business this approach could be beneficial, for example, as many businesses are required to pick orders for their customers. The products are stored in large warehouses that may not have a secure or fast internet connection. An offline first approach allows the employee to scan the products for customer orders and then synchronise to the business database when an internet connection can be made.
Another example of how a mobile app could provide efficiencies would be invoice processing. These apps are easy to use and have useful features such as automating tasks, time tracking, tracking expenses etc. These features are only possible using native features such as the camera to take photos of receipts and push notifications for invoices.
Native apps can use some features that are more difficult and less safe for hybrid or web apps. For example, Fingerprint authentication or Face ID can be useful for when developing features that are sensitive or required to be secure. Using React Native’s implementation of these features is far less costly and safer than developing your own solution. For more information about Mendix’s true native mobile apps, please visit https://www.mendix.com/mobile-and-multi-channel-apps/.
Related Blogs
Drag