Low-Code Mobile Basics with OutSystems

This article was sponsored by OutSystems. Thank you for supporting the partners who make SitePoint possible.

If you've never heard of low-code before, join the club. In July of 2016, OutSystems asked me to review a pre-release version of their low-code tool. I had no clue what low-code was or why these people were even talking to me.

Turns out that low-code platforms are essentially drag-and-drop IDEs. They're designed to help developers breeze past a ton of boilerplate work and focus on the meat of their web products. And OutSystems was about to upgrade their offering to include mobile applications.

They reminded me that I was a native mobile developer, and that's when it clicked. They wanted to know if their platform held up to snuff. Suffice it to say that while I enjoyed the speed of low-code, I found a lot of questionable omissions from their product as well as performance issues.

They worked their asses off to make improvements in time for the release, and sorted out a lot of my original concerns. I was, and still am impressed with the final product. And I wanted to show the SitePoint community how to accomplish common mobile patterns using a low-code platform like OutSystems.

While these techniques apply exclusively to OutSystems, competitors such as Mendix, AppGyver, and others offer similar features that loosely map to those you're about to see.

Set Up a Local Database

If you've worked with Core Data on iOS, then the low-code approach to ORM should feel familiar. For those on Android, if you're still writing SQL queries by hand, I've been there. I recommend trying ormlite, greenDAO, SugarORM, or something similar.

In low-code, your back-end and front-end merge into one editor, so they take care to delineate the boundary between cloud and local storage.

I created a database entity, Book, and populated it with some attributes. OutSystems generated CRUD actions for me automatically:

The orange circle icons represent server-side actions, and you'll see how they come into play later on. So, I have a Book entity that exists in the cloud and it can represent a single work with a title, author, and ISBN.

If you've been around the client-side block long enough, you know that clients don't replicate central databases. And they don't always require a mirror image of each model, either. Some data can remain on the server to reduce response sizes.

In OutSystems, I can create a local entity based on an existing cloud entity in two clicks. When I did that, the IDE automated a few additional steps for me:

The IDE prepended Local to the entity's name. This nomenclature helps me keep track of which database I'm touching: server or client. The IDE also generated similar CRUD actions to those available on the server, except these white-orange icons indicate local actions.

I fleshed out my data model by adding an Author entity and forming a relationship between Book and Author. Here's the current map:

To use the data, the IDE lets me define custom actions to retrieve the data, cache it to the local database, then read those values into local variables. Here's an example of a local action that fetches books from the central database, then caches them as local versions:

Their tool also enables developers to implement offline capabilities using an offline-sync paradigm. After time spent off the grid, the app will execute a custom local sync action when it detects the presence of an Internet connection.

Thankfully, we get to implement the syncing logic ourselves. But the approach may be as simple as refreshing the cache or as advanced as data merging with conflict resolution.

Handle Universal Layouts

As mobile developers, we have two approaches when it comes to supporting multiple screen sizes: separate apps for tablet and phone or a universal app. OutSystems handles both tactics:

In universal applications, the platform provides two client methods, isTablet() and isPhone(). These permit us to navigate the user to an interface we've optimized for their device. Here's how that logic looks in the starting template:

Neither a phone nor a tablet? Set your hair on fire.

Here's a video of that logic in action:

Continue reading %Low-Code Mobile Basics with OutSystems%

by Stanley Idesis via SitePoint