Review: OutSystems makes React apps drag-and-drop easy

Low-code application development platform lowers the bar to building web apps, mobile apps, and responsive mobile hybrid apps

Review: OutSystems makes React apps drag-and-drop easy
Thinkstock
At a Glance

Everyone wants software development to be easier and faster, even many developers. Unfortunately, the complexity of powerful programming languages isn’t always compatible with speed. Hence the popularity of “low-code” development tools, which allow you to assemble applications by dragging and dropping icons for interface elements and logical operators onto a canvas. The code gets generated behind the scenes.

OutSystems is a low-code platform that lets you visually develop your entire application, integrate with existing systems, and add your own custom code when you need it. OutSystems primarily targets web and mobile hybrid apps, and its development tools run on Windows. It also offers a beta-stage web-based development platform, which I did not test extensively, and exposes RESTful APIs for use as an MBaaS (mobile back end as a service).

OutSystems claims to have “unbeatable speed” for visually developing and deploying full-stack apps. I deplore such claims, as proving them is impossible, and my own informal tests don’t really support this one. What OutSystems does have is a pre-configured back end and a good set of “scaffolding accelerators,” i.e. drag-and-drop components.

In general, drag-and-drop development environments target “aspiring” or “citizen” developers rather than experienced programmers. I, for one, prefer to generate scaffolding from the command line and then edit actual code, but I am probably not a typical new OutSystems developer. There is an ecosystem of experienced OutSystems consultants who not only understand the product’s visual development paradigm, but also know when and how to code custom components for the product’s front and back ends.

The OutSystems back end runs on Windows, .Net, and SQL Server by default, and with RHEL, Java, and Oracle as alternatives. The front end code generator uses the metadata from your drag-and-drop design to create HTML5, JavaScript, and React for the web and Cordova hybrid apps (wrapping the React web app) for Android and iOS. If you build native apps with Xcode or Android Studio, you can call into the OutSystems APIs to integrate them with your back-end data.

outsystems 01 IDG

The OutSystems starter tutorial works with the actual OutSystems Service Studio app on Windows. Here I’m looking at the steps.

An app called OutSystems Now, available on the Apple App Store and Google Play, is a pre-compiled Cordova shell including the most common options. If you need your app to support functionality not baked into OutSystems Now, such as push notifications, you can assemble your customized set of capabilities, enter your Apple and Android developer credentials into the tools, and OutSystems will compile a new shell app for you on demand in the OutSystems Cloud for you to download and test on your device.

outsystems 02 IDG

The starter tutorial also works with the web-based OutSystems development environment, which is still in a beta-test phase.

The OutSystems development environment

The standard OutSystems development environment runs on Windows, as shown below. A web development environment is in open beta test. In either case, you can build apps for the web, iOS, and Android.

outsystems 03 IDG

The standard Windows-based OutSystems development environment implements a drag-and-drop design paradigm. As you can see from this screen shot, it is common to use multi-level context menus to perform design actions in OutSystems.

Designing an OutSystems app is mostly a drag-and-drop process that generates metadata that describes the app. On publication, OutSystems generates code from the metadata to create a responsive React app. You don’t have to start from a blank environment. If your app is similar to one of the samples in the OutSystems Forge, you can use the sample as a starting point.

OutSystems is a low-code platform, not a no-code platform. As far as I am concerned, that’s a plus. If you need to write your own code for either the front end or the back end, you can. To extend the web front end, you can write JavaScript. To extend the back end, you can write C#. To extend a mobile app, you can add existing plugins from the Forge, wrap existing Cordova modules for OutSystems, or write your own new Cordova modules with OutSystems wrappers.

OutSystems includes workflow modeling as part of the design environment, as shown in the screenshot below. So, in addition to dragging and dropping controls onto a design surface, you can drag and drop actions, UI patterns, business process flows, and activities onto a flowchart to create program logic. Using subprocesses to keep the main flow simple is considered a best practice, in much the same way as programmers refactor their code to extract functions.

outsystems 04 IDG

One of the strengths of OutSystems is its workflow modeling. Here we are implementing program logic by dragging actions from the Data tree into a flowchart.

OutSystems uses a customized version of React that it calls Silk UI. You can “bootstrap” your look near the beginning of the app creation process, as shown in the screenshot below. You can also use Silk UI templates, samples, and patterns in your apps, match your CSS to your corporate colors using the Theme Customizer, or edit the CSS yourself.

outsystems 05 IDG

Near the beginning of the app creation process, you can choose a color or an icon. You can also edit the CSS for your app yourself at any point, or generate CSS visually using the theme customizer.

Mobile Development Options

OutSystems supports three kinds of mobile apps: mobile web, hybrid web, and native apps that call your OutSystems back end. Pretty much any OutSystems website will also function as a mobile web app, because the React user interface is responsive. You can easily test your site in different mobile form factors and in both horizontal and vertical orientations from within the OutSystems IDE, as shown in the screenshot below.

outsystems 06 IDG

The OutSystems device preview screen makes it easy to test the responsive web UI and see how it will look on different mobile devices, both in vertical and horizontal orientations. This applies both to mobile web and mobile hybrid apps.

If you want to connect to your OutSystems back end from a native app built in Xcode, Android Studio, or Visual Studio, you’ll basically expose REST services from OutSystems and call them from your app. The OutSystems back end itself can consume other services, such as external databases, through connectors or REST interfaces.

The most interesting kind of mobile app to create with OutSystems is hybrid, meaning that the responsive website runs inside a native shell app that uses Cordova to expose native capabilities to the JavaScript code. If you scan the QR code target for your custom app on the website (as shown in the screenshot above) with your phone or tablet, you’ll be able to download the OutSystems Now app for your iOS or Android device. Scan the target again from OutSystems Now, and it will run your custom app on the device from within OutSystems Now. As I discussed earlier, you can build customized versions of OutSystems Now with more plugins in the OutSystems Cloud, without needing Xcode or Android Studio.

One of the hardest situations to handle in mobile apps is intermittent connectivity during data entry. For example, take the case of the elevator inspector who can’t get service inside the elevator but has to record his observations, fill out forms, and take pictures inside the elevator shaft and upload them when his device reconnects. Now think about the case where the site information downloaded before he leaves his office changes on the back-end database while he’s in the field (to fix an error, for example) before he can upload his report. Whoops! Better hope that the developers did an intelligent job of building the conflict resolution logic.

OutSystems has several options for handling offline mobile data entry. It has accelerators to let you do the simple stuff quickly but then leaves the model open for you to take it where needed to tackle more complex scenarios. Among the strong points:

  • One-click design of offline storage data (e.g. quickly replicate back-end table schemas in the local storage)
  • One-click creation of sync logic, both for read-only and read/write patterns
  • Built-in sync triggers and APIs, e.g. sync on log-in, sync when online, sync on demand, periodic sync, sync on errors, retry mechanisms, and so on.

The Offline Data Sync Patterns plugin goes as far as offering a Read/Write Data With Conflict Detection pattern, which handles the case I worry about the most. The Field Services Mobile sample for iPads shows how to create an app that works completely offline and synchronizes all data when connected.

Overall, OutSystems has one of the better offline mobile implementations, possibly competitive with Alpha Anywhere.

Device and enterprise integrations

OutSystems Now, the stock iOS and Android shell app, includes support for the device camera, local notifications, QR and barcode scanning, location (GPS), contacts, in-app browser, Touch ID, calendar, local key store, and network status. You will find more than a hundred more supported mobile OutSystems plugins in the Forge, and more than two thousand more Cordova plugins that you can wrap for OutSystems.

The OutSystems back end already knows about many of the most common databases and services, such as SAP, SQL Server, Oracle, MySQL, DB2, REST services, and SOAP services. You can find at least a thousand connectors in the Forge. In addition, OutSystems has a database integration SDK, and allows for custom C# code. The OutSystems Integration Studio integrates with Microsoft Visual Studio for the development of custom code.

outsystems 07 IDG

OutSystems knows how to integrate with common databases. Here we are configuring a connection to a MySQL database.

The screenshot above shows how to connect to a MySQL database. In the case of a database behind a firewall, you would use the VPN feature of the OutSystems Cloud to bridge the firewall.

outsystems 08 IDG

If you know how to write SQL for your database, the OutSystems IDE gives you a dialog for editing your SQL. Here we are calling a SQL Server stored procedure using T-SQL and turning that call into a flow that we can use in an app.

If you know how to write SQL, OutSystems lets you do that within its IDE, as shown in the screenshot above. If you don’t know how, you can use OutSystems’ Visual SQL, shown below.

outsystems 09 IDG

OutSystems offers a visual SQL interface that makes quick work of constructing database joins. Here we have created an inner join between two tables and added a count aggregate.

At a Glance
  • OutSystems is a very good, moderately priced platform for responsive mobile hybrid, mobile web, and web applications. Its sweet spot is the creation of responsive mobile hybrid apps that use Apache Cordova.

    Pros

    • Available in the OutSystems Cloud and for on-premises deployments
    • Hosted on Windows/.Net or RHEL/Java
    • Fairly easy low-code IDE
    • Allows for the addition of custom code at many points
    • Generates responsive React apps with Cordova wrappers
    • Good integration with external databases and web services

    Cons

    • Development environment runs only on Windows, although a web IDE is in beta test
    • Lacks WYSIWYG design option
    • There is a lot to learn before you can use OutSystems effectively
1 2 Page 1
Page 1 of 2