Coding Environment Software Technology Assessment

Owned by Simon Bates
Last updated: Aug 15, 2019
4 min read

Potential Target Platforms

  • Android phones and tablets
  • Apple iOS iPhones and iPads
  • Chromebooks (ChromeOS)
  • Linux
  • macOS
  • Web browser
  • Windows

Platform Integration Features

  • An installable application that can be run without an internet connection
  • Distributable via the platform 'store'
  • Integration with platform accessibility features and assistive technologies
  • Text-to-speech and Speech-to-text
  • Bluetooth for integrating with robots and other devices
  • Ability to integrate/use 'native' code, for example to access a platform accessibility API or to make use of a vendor-provided API library
  • Media
    • Graphics
    • Sound
    • Music
  • Access to device hardware
    • Camera
    • Microphone
    • Accelerometer
    • Gyroscope
    • Haptic feedback / vibration
  • Drag and drop

Programming Features

  • Shared model/state management (to support multiple notations for the same program)
  • Support for rich and dynamic UIs
  • Media
    • Graphics
    • Sound
    • Music

Technology Types and Platform Matrix

Technology Types Being Considered

  • Cross-Platform Native UI: A cross-platform layer on top of platform features, but using native UI components (rather than a web view; an example would be React Native)
  • Web: A web application using HTML, CSS, and JavaScript
  • Web View Wrapper: Runs a web application inside a platform application using an embedded web browser (for example Cordova or Electron), also known as "hybrid" mobile applications

Matrix

TechnologyTypeAndroidApple iOSChromeOSLinuxmacOSWeb browserWIndows
CapacitorWeb View WrapperYYAs PWAWith ElectronWith ElectronYAs PWA/Electron
Cordova/PhoneGapWeb View WrapperYY




ElectronWeb View Wrapper


YY
Y
FlutterCross-Platform Native UIYY




IonicWeb View WrapperYYAs PWAWith ElectronWith ElectronYAs PWA/Electron
PWAWeb-standards based packaging of web applications

Y

YY
ReactWeb




Y
React NativeCross-Platform Native UIYY


With react-native-webWith react-native-windows
SwiftUIApple-Specific Declarative UI
Y

Y

Vue.jsWeb




Y
Vue.js NativeScriptCross-Platform Native UIYY




Notes

  • The Web Bluetooth API is currently available on a limited number of browsers/platforms (primarily Chrome and ChromeOS)
  • In addition to NativeScript, there is also Vue Native

Technology Notes

Capacitor

Cordova/PhoneGap

Electron

Flutter

Ionic

Progress Web Apps

React

React Native

Reactive Native Scenarios

  • Without Expo (react-native-cli)

    • Mac, Android Emulator

    • Mac, iOS Simulator (error, see below)
    • Windows, Android Emulator ('react-native run-android' works)
  • With Expo
    • Mac, with Expo App, Android Emulator
    • Mac, without Expo App, Android Emulator
    • Mac, with Expo App, iOS Simulator
    • Mac, without Expo App, iOS Simulator
    • Windows, with Expo App, Android Emulator
    • Windows, without Expo App, Android Emulator ('expo build:android -t apk' builds on Expo remote servers, queue/build time: 20 minutes)

Error Running React Native iOS on Mac (non-Expo)

$ react-native run-ios
...
In file included from /Users/daniel/Desktop/c2lc-react-native-without-expo/c2lc-react-native-without-expo/ios/C2lcReactNative/main.m:10:
/Users/daniel/Desktop/c2lc-react-native-without-expo/c2lc-react-native-without-expo/ios/C2lcReactNative/AppDelegate.h:8:9: fatal error: 'React/RCTBridgeDelegate.h' file not found
#import <React/RCTBridgeDelegate.h>
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~
...

Not able to load npm module 
...

Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager.



...

Svelte

SwiftUI

Vue.js

iOS Notes

Alan's Adjustr Preferences Work

Exploratory Projects

Tasks

  • Make a React Native with Expo project with same functionality as c2lc-react
    • Add one label per text editor (Done, requires additional style fix)
    • Get running in iOS Simulator or physical iOS devices with Expo App (Done on Simulator, iPad, iPhone)
    • Get running in iOS Simulator without Expo App (expo build:ios -t simulator) (Done)
    • Get running in Android Emulator or physical Android device with Expo App (Done on Emulator)
    • Configure Flow types
    • Test with VoiceOver on iOS (Done, requires additional support for relationship between components)
    • Test permission to access location (Done)
  • Make a React Native without Expo project with same functionality as c2lc-react
    • Get running in iOS Simulator (blocked right now by error, see above) – update : After downloading cocoapods, was able to run it on iOS simulator; however there's an issue with loading required module (react-native-svg). When components from the module are commented out, the issue is solved.
    • Get running in Android Emulator (Done with some difficulties; though, android build didn't run into the issue calling react-native-svg module)
    • Configure Flow types
  • Select which technology/technologies to explore next
  • Make notes on experiences and issues encountered
    • With Expo App, running on both iOS Simulator and Android Emulator are functioning as expected, but there was difference in styles in components
    • It is hard to connect relationship between label and contents for text to speech feature, since react-native does not support 'htmlfor' property
    • When iOS simulator failed due to unable to load npm modules, problem can be solved by linking required modules in iOS library – refer to https://facebook.github.io/react-native/docs/linking-libraries-ios
    • There were few errors, that I encountered when I tried to run the project without Expo on Android Emulator:
      1. SDK location not found – go to the android/ directory of the react-native project and create a file named 'local.properties' with a line 'sdk.dir = /Users/USERNAME/Library/Android/sdk
      2. adb: command not found – on terminal, type 'export PATH=$PATH:~/Library/Android/sdk/platform-tools/