< Introduction to app development

Introduction to app development

by Gisle Hannemyr

This chapter is an introduction to the app development.

Table of contents

Introduction

Generally, there are three ways for a service to render contrent on a remote, and otherwise interact with a user of the device:

  1. Web page: This uses HTML, rendered by a standard browser (e.g. MS Edge, Google Chrome). See below for what distinguishes this from a native app.
  2. Web app: This uses HTML rendered by browser window placed inside an app.
  3. Native app: This does not use HTML, but custom code for the specific operating system running on the device (e.g Android or iOS).

Web page vs. web app

Using a library function to run a browser window inside an app allows for a hybrid between a web page and a native app, but adds the overhead of running a mini-browser inside the app.

Web apps can be designed to periodically cache the HTML when online, and show the cached data when the device is offline. A web page cannot do this.

A web app also allows placing an icon on the device's desktop to activate the web app. From a purely marketing standpoint, this may be attractive. The icon makes the service more visible to the end user, compared to getting the user to click on a bookmark or type in the URL of the service in a standard browser. However, the same marketing effect can be achieved by adding a website booksmark icon to the device's home screen, but without the offline access discussed above.

Web page vs. native app

Web pages are built using HTML. HTML is designed to let a standardized client side program (a “browser”) render a document (a “web page”) delivered by a web server. Since both the browser and the web server have no prior knowledge of each other, the following things need to be transported from the server to the browser with each page request:

  1. Data: The data on the document (web page) being viewed. It is usually a single data item (like a node) or a list of items (like nodes).
  2. Structure: How the data will be laid out on the device screen, with variations according to whether the browser is running on a device with large or small screen.
  3. Style: The colors, fonts, images, etc. on the web page
  4. Actions: How the content reacts to changes (such as user input, or timers, or requests and responses from the server, etc.).

All of the four items above are provided in an HTML document. HTML is simply a standardized data format that allows developers to create websites without knowing anything about the browser that will render the website – beyond knowing that is capable of handling HTML.

This is different than “apps”. Apps are designed to work with data they have prior knowledge of. For example, to an create app specific to rendering a event calendar, the app need to know the address of the server it will need to contact to get the data, and the format of the calendar data (dates, times and events). This is the major difference between a browser and an app. Due to prior knowledge of the data, the app does not need to download #2 (structure), #3 (style) or #4 (actions), as this knowledge can be built into the app as code. An app can also process local data, such the input from the device's camera and microphone. A web page have a much harder time processing local data (there are now certain mechanisms do to this as part of HTML5, but support from browsers for this is not great at the moment).

So while HTML are great for rendering web pages for browsers, there are more advanced mechanisms for transporting data to apps, such as JSON, XML and others. These only need to transport the data (number 1 in the list above), making for quicker data transfer and more specialized processing of data structure, style and actions.

Drupal is no longer just a CMS. Drupal 9 can be considered a locus capable of bringing together multiple methods of input (user input, remote APIs, timestamped logs etc), creating data entities from that input, and then rendering (formatting) that data into output.

DI.Forum:What technology to use to build a mobile app (Android & iOS).

Finally, to tie this together, and answer your questions. Fortunately, Drupal is build to render data into various formats. HTML, JSON, XML and more, and is extensible so that additional rendering methods can be added by third party modules and/or developers.

Using Drupal 8 as a headless CMS in combination with React Native looks attractive:

  https://dropsolid.com/en/blog/drupal-8-and-react-native (2017)
  https://reactnative.dev/

Video tutorials

2017-12-13: React Native Tutorial for Beginners - Getting Started. React Native is a great library that allows you to build native mobile apps. Time to get started!
Join the full React Native course: https://acad.link/react-native.
Exclusive discount also available for our React course: https://acad.link/reactjs
Join our Academind Community on Discord for free: https://discord.gg/gxvEWGU.

2019-05-30: F8 2019: Mobile Innovation with React Native, ComponentKit, and Litho.
The Facebook platform helps many developers create compelling mobile applications. This session will cover how we use - and open source - our mobile development stack to deliver beautifully designed and super responsive apps on both Android and iOS.

Final word

[TBA]

Last update: 2020-04-25 [gh].