React Native: Architecture work

Please vote if you like this issue, it help us to plan our road map. 😉

Background

Provide an architectural diagram on existing packages. And a new diagram with intention to move us to React Native and reusing as much existing components as possible.

Today

This diagram represents most of the functional components, but not every of them.

Interim

This is for architectural change before implementation.

Tomorrow

After React Native package is implemented. TBC.

Push notification may requires service change or a community adapter.

Thoughts

• Higher priority thoughts
  • Styling iOS and Android could be very different, or may be very indifferent
    • Some shops may want to have different styles (better UI/UX because iOS != Android)
    • Some shops may want uniformity (corporate branding)
    • Some shops may want a cheaper way (less labor)
  • What kind of visual regression test could we do?
    • VRT is bread-and-butter of Web Chat
    • We can redo our DOM as long as we have VRT in-place, and this is super important
  • What style options could not be shared from web to iOS/Android?
    • Should we still call them "style options"? Or "platform options"?
    • Could we eliminate them?
  • Facebook Metro bundler doesn't like lerna and npm symlink
    • https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417
    • https://www.npmjs.com/package/@carimus/metro-symlinked-deps
• Lower priority thoughts
  • How to do speech in native apps? Today, we use Web Audio API + Web Speech API
  • How about thumbnail downscaler? We use Web Worker and <canvas> today
  • Should we use native Adaptive Card renderer?
  • Do people still interested in building a smart display out of the native version of Web Chat?

Prototype

Click here to see the prototype.

Work items

This is unbuffered. Please add 20-40% buffer as needed.

Priority	Area	Work items	Assignee	Resources
P0
	Engineering excellence
		#3316: Split bf-wc-component into bf-wc-dom	@compulim	5d
		#3317: Investigate: how to do VRT on mobile devices?		3d (may need procurement)
		#3318: Test harness		5d
		#3319: Write playground app		3d
		#3320: CI/CD pipeline		2d
		#3321: Investigate: can we not bump to React 16.9?		½d
	Design
		Meet with customers to understand MVP	@compulim	?
		#3322: Find out which styleOptions are good for RN		1d
	MVP
		#3323: Investigate: Adaptive Card web vs. native renderer		2d
		#3324: Investigate: how to implement scroll-to-bottom?		2d
		#3325: Transcript: implement transcript/activities		5d
		#3326: Transcript: support RTL		3d
		#3327: Transcript: support accessibility		?
		#3328: Transcript: implement text/image attachment		1d
		#3329: Transcript: implement Markdown		?
		#3330: Transcript: implement Adaptive Card native renderer		?
		#3331: Transcript: implement activity status		½d
		#3332: Transcript: implement scroll-to-bottom		?
		#3333: Transcript: implement typing indicator		½d
		#3334: Send box: implement text box		1d
		#3335: Send box: implement file upload		2d
		#3336: Chat adapter: make DLJS cross platform		3d
		#3337: Chat adapter: message middleware		1d
		#3338: Implement styleOptions		1d
		#2892: Implement window.open middleware		?
P1
	Engineering excellence
		#3339: Investigate: React Native conflicts with symlink		2d
		#3340: Investigate: DLJS incompatibility with React Native	(BF SDK team)	?
	UI
		#3341: App: localization		2d
		#3342: Transcript: avatar		1d
		#3343: Transcript: scroll-to-bottom indicator		2d
		#3344: Send box: implement downscaler for thumbnailing		4d
		#3345: Notification		5d
		#3346: App: pluggable telemetry		2d
P2
	Embed
		#3347: iOS: native component wrapper and sample		2d
		#3348: Android: native component wrapper and sample		2d
		#3349: Sample apps		2d
	UI
		#3350: Investigate: speech support		2d
P3
	Embed
		#3351: Android/iOS: Cordova wrapper		2d
		#3352: Android/iOS: Xamarin wrapper		5d