Why You Should Use a Low-Code Visual Tool Instead of PhoneGap

Mobile app backlogs are mounting, and the pressure to deliver is increasing. It’s necessary to build apps faster, but at the same time, quality should not be compromised. There are many players working to solve this dilemma, but an undisputed leader in the cross-platform app development race is Adobe’s PhoneGap, in one package or another.

As early entrant to the space, PhoneGap can almost be considered the de-facto platform for achieving productivity gains in building mobile apps. It has many advantages:

  • Speed of development with HTML5 and modern JavaScript frameworks
  • Open source, giving you full control over the app code
  • Works cross-platform
  • No need to reinvent the wheel: there’s an open source JavaScript library for pretty much everything
  • Access to native device functionalities via the many available open source PhoneGap plugins, with the possibility to code your own
  • Established dependency management such as Bower and npm
  • Many methods for easy code reuse, from RequireJS to Angular directives and React components

Grunt Work Still Required

Even with all the benefits PhoneGap delivers, mobile app developers are still spending a lot of their time in creating the boring-but-necessary parts of their apps over and over again: CRUD views, user authentication, list filters and search, pagination, and so on. Smart code reuse and library utilization makes this faster, but it still takes precious time.

Then, there’s the whole backend and app delivery side: data connectors to APIs and legacy systems, keeping data in sync between the apps and the backend, handling business logic, sending push notifications, testing and delivering the apps to client devices…

Of course, none of this has to be coded from scratch. PhoneGap is built around web technologies, so it’s easy (and even fun) to glue together the different libraries, microservices, X-as-a-Service cloud offerings, and other backend components required for your app. Still, that’s development time that’s not strictly producing unique value for your company.

...that’s development time that’s not strictly producing unique value for your company.

In any case, it is only after all the above has been done that the developers can concentrate on the final 20% of the app: the code that’s a delight to write and produces the greatest business benefits.

We believe great coding takes time. This craftsmanship should be valued and given space. Even the most brilliant developer goes to waste if she has to do the same foundational, routine grunt work over and over again for every app project. The 80-20 rule should hold for mobile app development too: developers should be able to concentrate 80% of their time on the unique 20% of the app.

What Would a Visual Tool Need to Beat PhoneGap?

Many visual app builders out there certainly can get a large percentage of your app done with no coding required. It is very much faster to drag-and-drop your app together, but very often you lose some of the benefits listed above: there’s no code-level control over your app, access to native functionalities is limited, there’s no real way to reuse code, there’s a vendor lock-in… Using a visual tool becomes more trouble than it’s worth.

For a visual tool to be a worthy competitor to PhoneGap, it would need at least the following:

  • No limits on the kinds of UIs and app structures that can be created
  • HTML5-based, code-level extendability on all aspects of the app, so you can code your way around any platform limitation
  • Utilize mobile CSS libraries like Ionic
  • Support for PhoneGap plugins
  • Support for third-party JavaScript libraries
  • Efficient code reuse through a package/dependency management system

Even if all of the above were available, a lot of grunt work is still required to build an app’s foundation and get it to the “80% complete” state – that is, the point where you can really start working on the unique aspects of the app.

...the tooling needs to be powerful enough that you’re not just drag-and-dropping boxes of code around, but really creating 80% of your app visually.

An optimal visual mobile app builder would also include a strong platform/backend aspect, either by integrating with third-party solutions, providing its own functionalities, or a mix of both. This would make it possible to set up and configure at least the following without coding:

  • User management and authentication
  • Cloud databases for your app
  • Backend data connectors
  • Business logic
  • Process automation
  • Push notifications
  • Data security
  • App delivery

Of course, the above features are not part of PhoneGap per se, but fall into the Mobile-Backend-as-a-Service (MBaaS) or Rapid Mobile Application Development (RMAD) platform territory. Still, having visual tooling and a managed platform that are built to work together can save a lot of time and grey hairs.

Logic Editor for AppGyver Composer

Finally, the tooling needs to be powerful enough that you’re not just drag-and-dropping boxes of code around, but really creating the 80% of your app visually. It’s not really a visual app builder if you need to write custom JavaScript to handle the every button tap in your app or write raw XML for your data schema.

A Visual Tool That’s Better Than PhoneGap

With Composer 2, we feel that we’ve really achieved it: a visual app building tool that’s a better and faster alternative to PhoneGap, at least for a large part of your app backlog. It has everything listed above – and when something is missing, you can code it yourself.

When you click “New app”, Composer 2 sets up a whole backend for you, including user authentication, and presents you with an empty canvas for creating the first page of your app. You can start creating your UI by dragging in buttons, text fields, toggle switches, lists, and so on. Adding extra pages and creating navigation links is a snap. You’ll have a working version of your app in minutes, running on iOS and Android (our companion app technology means you won’t need to compile binaries to get started – rather, your app is updated over-the-air as you develop).

To make the app come alive, you need to bring in business data. Composer lets you provision databases for your app or connect existing data sources with a few clicks. If you want, you can easily utilize your existing MBaaS with Composer, or mix and match.

You can then utilize the data in your views. For example, you can make a list component repeat itself on a page, based on a data collection you’ve defined. A title text component can show the name of the current record, or an image can be displayed based on a stored URL.

The next step is adding logic. You can attach actions to individual components: when I tap a button, a barcode scanner opens. The logic can be chained: after scanning the barcode, you can fetch the related product details and show them on a separate page. Input from text fields can be easily used to modify data records, and multiple input fields can be combined to create custom forms.

And then, inevitably, you need to implement a feature that’s not possible with just the visual tools.

Coding Through the Roadblocks

This part is where Composer 2 really starts to shine: you can code your own custom actions and components, so you’ll never be stuck. The JavaScript APIs available through our Supersonic library give you full access to the device’s native functionalities, app data, page navigation and more. And since the code lives inside the visual tool, you can effortlessly switch between coding and building your app visually.

For example, let’s say we are creating a product catalogue app that will let your company’s sales reps view browse through your products with a customer, add them to a shopping basket and then create an order.

Craft the UI You Want with Custom Components

Custom components let you use HTML and CSS to define a visual element on the page. This can be anything: a slider for selecting product quantity, a thumbnail in the product image gallery or a custom report view of sales performance. You can define custom properties for your components, so their contents change dynamically. For example, a thumbnail component would require an URL for the displayed picture.

Reusable custom components for the AppGyver Composer low-code app platform

Developing custom components with Composer

Properties can be entered manually or referenced from the page data: the image gallery could be created by setting the thumbnail component to repeat itself on the page, based on the data from your Products resource. Finally, components can include JavaScript for even greater control over what’s displayed: for example, render an analytics graph from your data or calculate new prices based on an inputted discount percentage.

Make the App Logic Just Right with Custom Actions

Custom actions let you use JavaScript to create reusable pieces of app logic. We could create separate actions to:

  • Add the currently open product to a shopping basket (stored locally on the mobile device in JSON format)
  • Display sections of a multi-part form when collecting customer data
  • Send the order to the fulfilment

All custom actions and components are fully reusable between apps, allowing you to quickly create a full library of functionalities specific to your company’s use cases.

And if tactical coding in the browser is not enough for you, you can create your own modules – full-fledged functionalities that provide things like CRUD views, comments, chat, task management, embedded maps and more. Modules can utilize any JavaScript libraries, so you can create anything from custom analytics dashboards to an IoT control center. Composer 2 also has full support for PhoneGap plugins, so your actions and modules can utilize any native functionalities you like.

Drag-and-drop components for the AppGyver Composer low-code app builder

Drag-and-dropping an app together

Composer combines all the development power of PhoneGap and raw coding with the speed of visual tooling – and tops it off with a world-class Mobile-Backend-as-a-Service and app delivery/management platform. Give it a try today. We promise you’ll be surprised.

Stay tuned for the next part of this blog series, where we explore the backend and business logic side of Composer, and how they can be extended with our Node.js based cloud code environment.

Marko Lehtimaki, CEO AppGyver

As CEO & Co-Founder of AppGyver, Marko possesses a deep understanding of emerging technologies and their implications to enterprise businesses.

San Francisco, CA