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:
- Open source, giving you full control over the app code
- Works cross-platform
- 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
- 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.
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
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.
Make the App Logic Just Right with Custom Actions
- 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.
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.