Challenge Overview
This challenge is part of a new project involving React Native. The eventual goal is to have a way to build React Native apps for Hercule's embedded devices that communicate with the device over websockets. A previous challenge added on support for drawing and bootstrapping to the pxscene app, instead of an XRE receiver. This code challenge will fix a few issues and will expand that integration to include new features that have been added to the React Native --> XRE mapping.
Pxscene
We are using a framework called pxscene for a number of current projects. You can find more details here:
Recently documentation was added that describes how to integrate Visual Studio code debugger with pxscene for debugging local scripts:
https://github.com/johnrobinsn/pxCore/blob/master/examples/pxScene2d/VSCODE_DEBUG.md
General requirements
The goal of this challenge is to add in new support for functionality we have recently added to the XRE mapping.
As an overview, when a request is made to an app, like "http://{react-server}/{app_name}", we'll send down Javascript to pxscene that will handle the UI generation based on what the server sends down, and will also send events back to the server. Basically, the Javascript sent down from the server will act similar to how the XRE receiver works, where it sits between the graphics layer and the server, handling events that are sent down from the server, and raising events back up to the server based on user actions.
Branch
This challenge will target the "pxscene-support" branch in Git.
Single server
The previous challenge that implemented the main React-->pxscene integration required two servers - one for the server and another to host a basic Javascript redirect that can be loaded in pxscene. That's not what we're looking for - the end goal is a single server that can handle both pxscene and XRE clients. Please make sure that the routing and other pieces are updated to include everything necessary to run this as a single server, with the exact same React Native code serving both XRE and pxscene clients.
This is already properly implemented in the "pxscene-support" branch, but you shouldn't do anything to break this functionality.
Fast-forward branch
Your patch file should bring the code up to date to the commit hash 3bf27a972d9149c5015fe2b68d4b88463b38fb63 of the develop branch, to ensure that we'll have less trouble merging in the future.
Examples
Your submission should support the all examples in the current codebase, and they should work as expected.
* AnimationsTest
* Dynamic
* CompleteLayouts
* TimersTest
Note that MovieFetcher example is not finished and is not in scope.
If something isn't going to be fully supported due to limitations with pxscene, please mention that in the forum and README.
React Native server
It's important that the server still work properly for XRE apps, and that code is properly shared and encapsulated.
The server also needs to be able to transparently handle the requests and respond accordingly. This means that a request from pxscene should be responded to with pxscene data, but a request from an XRE server should respond with XRE data. There should be no difference in the React Native code required for an app that runs in either XRE or pxscene.
Redundancy:
You must refactor the code if it makes sense to split things out so they can be reused and consumed by either the pxscene piece or the XRE piece.
Pxscene
We are using a framework called pxscene for a number of current projects. You can find more details here:
Recently documentation was added that describes how to integrate Visual Studio code debugger with pxscene for debugging local scripts:
https://github.com/johnrobinsn/pxCore/blob/master/examples/pxScene2d/VSCODE_DEBUG.md
General requirements
The goal of this challenge is to add in new support for functionality we have recently added to the XRE mapping.
As an overview, when a request is made to an app, like "http://{react-server}/{app_name}", we'll send down Javascript to pxscene that will handle the UI generation based on what the server sends down, and will also send events back to the server. Basically, the Javascript sent down from the server will act similar to how the XRE receiver works, where it sits between the graphics layer and the server, handling events that are sent down from the server, and raising events back up to the server based on user actions.
Branch
This challenge will target the "pxscene-support" branch in Git.
Single server
The previous challenge that implemented the main React-->pxscene integration required two servers - one for the server and another to host a basic Javascript redirect that can be loaded in pxscene. That's not what we're looking for - the end goal is a single server that can handle both pxscene and XRE clients. Please make sure that the routing and other pieces are updated to include everything necessary to run this as a single server, with the exact same React Native code serving both XRE and pxscene clients.
This is already properly implemented in the "pxscene-support" branch, but you shouldn't do anything to break this functionality.
Fast-forward branch
Your patch file should bring the code up to date to the commit hash 3bf27a972d9149c5015fe2b68d4b88463b38fb63 of the develop branch, to ensure that we'll have less trouble merging in the future.
Examples
Your submission should support the all examples in the current codebase, and they should work as expected.
* AnimationsTest
* Dynamic
* CompleteLayouts
* TimersTest
Note that MovieFetcher example is not finished and is not in scope.
If something isn't going to be fully supported due to limitations with pxscene, please mention that in the forum and README.
React Native server
It's important that the server still work properly for XRE apps, and that code is properly shared and encapsulated.
The server also needs to be able to transparently handle the requests and respond accordingly. This means that a request from pxscene should be responded to with pxscene data, but a request from an XRE server should respond with XRE data. There should be no difference in the React Native code required for an app that runs in either XRE or pxscene.
Redundancy:
You must refactor the code if it makes sense to split things out so they can be reused and consumed by either the pxscene piece or the XRE piece.
Native validation
To prove out the solution, we need to ensure that a native mobile build of an app matches what is displayed in pxscene. Please provide documentation on how to compile each example and run it in Android or iOS, and please also provide this information as part of your submission video. This is already done in the codebase, but we need to make sure nothing gets broken. Ideally, the examples shouldn't have to be changed at all.
Submission
Your submission should be a patch file in Git against commit hash b98b02ff284413923f5ee3e1570487d7cecfa313 in the "pxscene-support" branch
NOTE: You are free to change, reorganize, and refactor the code as you see fit. You are not required to stick to any past decisions on architecture.
Please make sure your updated README covers:
1. How to deploy the server-side to Heroku (note the build pack documentation in the forum)
2. How to configure the client pxscene app to connect to the server and work with the different apps available
3. What the React Native app looks like
A video is required, but it only needs to cover the validation (pxscene and native), not the setup. Having the setup details only in the README is fine.
Links:
https://facebook.github.io/react-native/���
https://www.youtube.com/watch?v=hDviGU-57lU
To prove out the solution, we need to ensure that a native mobile build of an app matches what is displayed in pxscene. Please provide documentation on how to compile each example and run it in Android or iOS, and please also provide this information as part of your submission video. This is already done in the codebase, but we need to make sure nothing gets broken. Ideally, the examples shouldn't have to be changed at all.
Submission
Your submission should be a patch file in Git against commit hash b98b02ff284413923f5ee3e1570487d7cecfa313 in the "pxscene-support" branch
NOTE: You are free to change, reorganize, and refactor the code as you see fit. You are not required to stick to any past decisions on architecture.
Please make sure your updated README covers:
1. How to deploy the server-side to Heroku (note the build pack documentation in the forum)
2. How to configure the client pxscene app to connect to the server and work with the different apps available
3. What the React Native app looks like
A video is required, but it only needs to cover the validation (pxscene and native), not the setup. Having the setup details only in the README is fine.
Links:
https://facebook.github.io/react-native/���
https://www.youtube.com/watch?v=hDviGU-57lU