An experiment to build a React-based app on multiple platforms
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
android Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
ios Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
lib Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
.editorconfig Initial .gitignore and .editorconfig Jun 2, 2015
.flowconfig Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
.gitignore Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
.npmignore Move NativeApp and WebApp files both into project root Jun 2, 2015
.watchmanconfig Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
README.md Add an image for overall LoC Sep 21, 2015
index.android.js Rework things to add Android support and upgrade react-native Sep 17, 2015
index.html Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
index.ios.js Turn off uglify, turn on browserify debug, enable livereloading in Gulp Jun 5, 2015
index.web.js Split index.web.js into separate modules Jun 5, 2015
loc-metrics.sh Add an image for overall LoC Sep 21, 2015
manifest.webapp Try adding Firefox OS auto-deployment Jun 9, 2015
package.json Upgrade to the latest React Native; switch from Gulp to Webpack; upgr… Mar 10, 2016
photo.png Adding a photo of work in progress Jun 9, 2015
shared-models.svg Rewrite loc-metrics.sh to generate SVG Sep 21, 2015
shared-overall.svg Add an image for overall LoC Sep 21, 2015
shared-views.svg Rewrite loc-metrics.sh to generate SVG Sep 21, 2015

README.md

react-multiplatform

This is an experiment to build a React web app and a React Native iOS app that share as much as possible.

Work in progress photo

Hacking

¯\(ツ)

npm install
gulp server
# Open NativeApp.xcodeproj in XCode, hit Run

Testing

¯\(ツ)

Working Notes

Here are some notes to myself (and others) as I bungle my way through this.

Code sharing

One of the goals of this thing is to see how much code can be shared between platforms using React for web and React Native. So, I counted some lines of code using loc-metrics.sh:

TODO / Questions

  • Deploy web app to gh-pages

  • node-firefox deployment in gulp is a rough story right now

    • Would be nice if I could somehow make it live-reload rather than completely uninstalling, re-installing, and re-launching
  • Build a non-dev version of the iOS app

    • Never built / deployed an iOS app before, no idea how to do that.
  • Button to purge completed items

  • Should inline styles actually live with respective components rather than in a central styles.js?

  • Exercise some more APIs?

    • Add saving to a remote server?

    • Add websocket sync to a multiplayer server for the hell of it?

    • Geo for place-specific todos?

  • Building & launching the iOS dev app requires launching XCode. I wonder if I could just run that all from the command line, ideally from gulp

  • Try merging React Native packager.js stuff into gulp build?

  • Live-update of inline styles without full reload would be great.

  • How to handle localization? General JS gettext stuff?

  • Arrays of inline styles - thought React supported them, maybe not?

Pros & Cons

  • Pros

    • React base component API is (mostly) the same between web & native

    • Many common pieces of view/model integration can be shared via mixins

    • Live Reload & Debug in Chrome are neat features for Native

  • Cons

    • Component set differs between web & native

    • Inline styles work in both, share similar CSS syntax, but cannot be practically shared

Decisions & Choices

  • Using gulp + browserify + babelify (es6) for web app build chain

Random Observations

  • View is the new div

Issues & Papercuts

  • React native live reload pulls away focus from editor & forces Chrome to the foreground on every save.

  • Web APIs are mostly unavailable in React Native

    • There are polyfills for timers, network, geo, and flexbox
  • The web buildchain is producing a 3.1mb JS bundle - WTF?!

    • Turning off debug in browserify and adding uglify reduces to ~265k, but that's still pretty huge.