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

Notes

• The Web Bluetooth API is currently available on a limited number of browsers/platforms (primarily Chrome and ChromeOS)

  • https://caniuse.com/#feat=web-bluetooth

• In addition to NativeScript, there is also Vue Native

Technology Notes

Capacitor

• https://capacitor.ionicframework.com/

• https://github.com/ionic-team/capacitor

• https://ionicframework.com/blog/announcing-capacitor-1-0/

• Capacitor and React

  • https://www.thepolyglotdeveloper.com/2018/06/getting-started-capacitor-using-react/

  • https://alligator.io/ionic/building-with-capacitor/

Cordova/PhoneGap

• https://cordova.apache.org/

• https://phonegap.com/

Electron

• https://electronjs.org/

Flutter

• https://flutter.dev/

• https://flutter.dev/web

  • "Warning: Flutter for web is currently available as a technical preview. When trying Flutter for web, you can expect to experience crashes and missing features."

• https://github.com/flutter/flutter/wiki/Desktop-shells

  • "The current Windows shell is a GLFW placeholder, to allow early experimentation. It will be replaced in the future with a Win32 or UWP shell that allows view-level embedding of Flutter within an application. Expect the APIs for the final shell to be radically different from the current implementation."

• https://www.thurrott.com/dev/206522/you-can-create-flutter-apps-on-chrome-os

Ionic

• https://ionicframework.com/

Progress Web Apps

• Chrome

  • https://developers.google.com/web/progressive-web-apps/desktop

  • ChromeOS

  • Linux

  • Mac

  • Windows

• Windows 10 / Edge

  • https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/get-started

React

• https://reactjs.org/

• React Accessibility

• React state management notes

  • https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

  • MobX: https://mobx.js.org/

  • Redux: https://redux.js.org/

React Native

• https://facebook.github.io/react-native/

• Expo

  • https://expo.io/

  • https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native

  • https://docs.expo.io/versions/v34.0.0/introduction/managed-vs-bare/

  • https://docs.expo.io/versions/latest/distribution/building-standalone-apps/

  • https://docs.expo.io/versions/latest/sdk/gl-view/

  • Expo does not currently include a Bluetooth API, but it looks like one is in development

    • https://expo.canny.io/feature-requests/p/bluetooth-api

    • https://github.com/expo/expo/pull/3131

  • ExpoKit

    • https://docs.expo.io/versions/latest/expokit/overview/

    • "However, if you need something very custom--like on-the-fly video processing or low level control over the Bluetooth radio to do a firmware update--we do have early/alpha support for using Expo in native Xcode and Android Studio projects." [https://docs.expo.io/versions/latest/introduction/faq/]

• React Native on Windows

  • https://github.com/microsoft/react-native-windows

  • Skype on Windows uses React Native

    • https://dev.skype.com/react

• React Native Accessibility

• React Native Native Modules

• Sharing Code Between React Web and React Native Application

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

• https://svelte.dev/

SwiftUI

• https://developer.apple.com/xcode/swiftui/

• SwiftUI Essentials (video)

• https://news.ycombinator.com/item?id=20087168

Vue.js

• https://vuejs.org/

• Accessibility Guide PR: https://github.com/vuejs/vuejs.org/pull/1002

• NativeScript

  • https://www.nativescript.org/vue

  • https://www.nativescript.org/faq#nativescript-vs-others

  • https://www.quora.com/What-are-the-key-difference-between-ReactNative-and-NativeScript/answer/Valentin-Stoychev

• Vue Native: https://vue-native.io/

iOS Notes

• Other options for running on iOS

  • Write a custom iOS application that hosts a web application in a web view

    • https://developer.apple.com/documentation/webkit/wkwebview

    • This would require the ability to expose platform functionality, such as Bluetooth access, in a form accessible to the JavaScript running in the web view

      • https://robkerr.com/using-webkit-to-call-wkwebview-javascript-from-swift-and-swift-from-javascript/

• https://developer.apple.com/bluetooth/

Alan's Adjustr Preferences Work

• https://codepen.io/waharnum/pen/YvWBja

• https://github.com/benetech/DIAGRAM-Code-Sprint-2018/wiki/Accessibility-Lightweight--Options-Framework

Exploratory Projects

• React: https://github.com/simonbates/c2lc-react

  • React with Capacitor: https://github.com/simonbates/c2lc-react/tree/capacitor

• React Native with Expo: https://github.com/chosww/c2lc-react-native

• React Native without Expo: https://github.com/simonbates/c2lc-react-native-without-expo

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/