Build cross-platform native apps without any lines of code

Build cross-platform native apps without any lines of code

No-code platform AppGyver

Let's have a look together at the no-code development platform AppGyver.

This should be particularly interesting for people with no pre-existing knowledge about mobile development but who are curious about how to get started. For developers who are contributing to ReactNative, I hope you get a feeling if/how/when you can plan to get involved in AppGyver's ecosystem.

Disclaimer: I am a native iOS SDK developer working for SAP and SAP acquired AppGyver in February 2021 but this blog post represents my personal research/experience based on publicly available information and products.

What is AppGyver

AppGyver is a no-code platform to build apps for all form factors, including mobile, desktop, browser, TV, and others.

Composer Pro allows to

  • define your app's structure and navigation logic
  • build pixel-perfect user interfaces
  • create complex logic with visual programming
  • integrate with external data resources
  • bind data to your components to create dynamic views, and more.

App Builder

Flow Handling

A good way to familiarize yourself with its capabilities is to watch this introductory video on how to compose a TODO app with AppGyver

It is free and easy to sign-up for AppGyver to explore its capabilities.

Free for all indie developers and organizations with less than $10 Million (USD) in revenue or funding

Source: appgyver.com/pricing

Technology

The solution is built on React Native.

Developer Experience

App Gyver is very user-friendly for beginners. There is still quite a learning curve as visual programming is essentially programming but in a different form.

For experienced native mobile developers, the platform is too restrictive but more on this subject in the chapter about 3rd party integration.

What I personally ❤️ is the live hot-reload on the device for preview.

Live Preview

App Logic

App logic in Composer apps consists of two main concepts: app state and logic flows. Modeling app logic follows the pattern: event – logic – state change.

Events

  • App lifecycle events (e.g. App brought to foreground via URL)
  • Page lifecycle events (e.g. Page mounted)
  • Component events (e.g. Component tap)
  • Custom events for composite components

Logic Flow

It's easy to connect the nodes (here: triggering event and attached flow functions) on the logic canvas:.

logicFlowExample

Sometimes you need more than just the flow and formula functions that are available. Then you can write custom ES6 JavaScript code:

const filteredEmployees = inputs.rawEmployees.filter(employee => {
  const firstName = employee.firstName.toLowerCase();
  const lastName = employee.lastName.toLowerCase();
  const searchString = inputs.searchString.toLowerCase();

  return firstName.includes(searchString) ||
    lastName.includes(searchString);
});

return { filteredEmployees };

State

App state consists of variables state and component state.

All different kind of variables

  • data variables
  • page parameters
  • page variables
  • app variables
  • translation variables

are maintained with the Variable Editor

The component state is linked to variables state by binding a component property to a variable.

You can also bind formulas to component properties for the purpose of data formatting. Example: FORMAT_DATETIME_LOCAL(pageVars.lastPurchaseAt, "MM/DD/YYYY HH:mm")

See AppGyver's documentation around Data Binding for more info.

Native device capabilities

Native device capabilities are limited to what AppGyver offers out-of-the-box. Primarily device sensor data, such as geolocation and accelerometer.

  • Accelerometer – device's current acceleration
  • Barometer – current atmospheric pressure
  • Compass – device's current heading
  • Geolocation – device's current GPS position
  • Gyroscope – device's current orientation
  • Magnetometer – strength and direction of the Earth's magnetic field relative to the device

Push Notifications are supported :)

No app/custom-specific native capabilities can be developed/use at this point in time.

Data Sources

  • Client-side storage
  • Rest API direct integration
  • AppGyver Cloud Storage (hoppy use only)
  • AppGyver Cloud Integration
  • from Marketpace (e.g. GoogleMapsGeocoding)

Authentication

  • AppGyver hosted user management
  • Hosted custom auth integration
  • Direct third party authentication

See docs.appgyver.com/data/authentication for more information.

Theming

It is possible to provide a custom look-and-feel with the Theme Editor and apply styling information

ThemeEditor

3rd Party Integration

No reuse of custom React Native code

In my opinion, this is the biggest obstacle for people who want to switch from their hybrid development infrastructure to AppGyver. Also, this slows down innovation from external contributors. I totally understand that AppGyver has to carefully plan the support model and it is great to know that it is on their agenda. App Gyver is just not yet there.

Due to how the platform is structured and the highly optimized nature of our runtime, importing a whole React Native project is not feasible – a project can be set up in so many different ways that importing e.g. the whole state management code and mapping it onto our state management code would be essentially impossible.

Source: forums.appgyver.com/t/react-native-code-imp..

Our original plan was to get custom plugins in Q1/21, but as we have been running into complications and delays, it might be delayed as well. Nothing more exact at this moment, I’m afraid.

Source: forums.appgyver.com/t/custom-react-componen..

Our upcoming plugins feature will allow you to define React Native and web plugins for your project. Once defined, their JavaScript interfaces can be made available inside a JavaScript node, allowing you to code your app-specific implementation logic directly in Composer.

Source: docs.appgyver.com/app-logic/custom-javascript

Component Market / Logic Market

Composed components and logic flows can be published by app developers in AppGyver's marketplace.

Distribution

You have to use AppGyver Build Service to package and distribute your mobile application.

Distribution is difficult but that is more the fault of Apple and Android. iOS developers know that you an own Apple distribution certificate and setup the app on App Store Connect. After the build is done processing, you can use Apple's TestFlight service to distribute it to members of your Apple Developer organization.

When I tried to use their build service but I got a mysterious error and the only helpful on-screen information was to get in touch with AppGyver support to find a resolution.

Conclusion

If AppGyver seems of interest to you then check out their documentation, stay up-to-date by observing their changelog and roadmap and engage with the community.

Did you find this article valuable?

Support Marco Eidinger by becoming a sponsor. Any amount is appreciated!