Multithreaded React Native code running in a browser via WebAssembly

综合技术 2018-05-18 阅读原文

React Native DOM · https://circleci.com/gh/vincentriemer/react-native-dom
https://badge.fury.io/js/react-native-dom
https://lernajs.io/

An experimental, comprehensive port of React Native to the web.

  • Multithreaded by default:
    Following the exact same architecture as React Native on mobile, all of your react components/app logic are run in web worker, leaving the main thread to entirely focus on rendering.
  • Same layout behavior as React Native on mobile:
    Powered by custom bindings to Yoga and compiled to Web Assembly, avoid layout inconsistencies between your native and web projects.
  • Built with the same bundler used for existing React Native platforms:
    Build both the "native" main and JS threads with the Metro Bundler along with all the developer experience features it provides.
  • Ecosystem compatible escape hatch to the DOM:
    Using the same native module bridge, expose DOM-specific APIs in a more generic way that can easily be made into a cross-platform module.

To see it in action, check out these live demos:

WARNING

This project is still highly experimental and many aspects of it are subject to
breaking changes, continue at your own risk.

Getting Started

Getting your React Native project configured to use react-native-dom
is a lot
like the process for other 3rd party platforms such as react-native-windows
.

If you're starting a new project from scratch: ensure you have the react-native
CLI installed globally.

npm install -g react-native-cli
# or
yarn global add react-native-cli

Next, initialize your React Native project.

react-native init [project name]

Then, cd
into your project and install rnpm-plugin-dom
into your devDependencies
, after which you can initialize your React Native DOM
scaffolding with the react-native dom
command.

npm install --save-dev rnpm-plugin-dom
# or
yarn add --dev rnpm-plugin-dom

# Add DOM support to your React Native project
react-native dom

To run your initialized project in your browser, you can either:

  • Start the packager yourself using react-native start
    and navigate open your browser to localhost:8081/dom
  • Leverage the builtin rnpm command react-native run-dom
    which will start the packager and open the browser to the correct URL for you

Overview of files generated by the RNPM plugin

  • dom/bootstrap.js
    - Entrypoint to the main thread bundle where you can set runtime configuration options, register custom native modules, or any other JS initialization you would like to do.
  • dom/entry.js
    - Entrypoint to the JS thread bundle, will likely only be importing your App's entrypoint from the top-level folder of your project.
  • dom/index.html
    - HTML file which is what references and loads the JS bundles.
  • (conditionally) rn-cli.config.js
    - Depending on if the project already has one, the rnpm plugin will either create it with the proper configuration options to support the DOM platform or will simply add the necessary entries to your existing one.

Building for Production

A builtin script for performing a production build is still in the backlog but
here is a manual script which does so (assuming the same directory structure
that gets generated from the rnpm plugin).

# Ensure development-speecific code is stripped from the bundle
export NODE_ENV=production

# Build the main thread bundle
react-native bundle 
  --config $(pwd)/rn-cli.config.js 
  --dev false 
  --platform dom 
  --entry-file ./dom/bootstrap.js 
  --assets-dest ./dom/dist 
  --bundle-output ./dom/dist/bootstrap.bundle

# Build the JS thread bundle
react-native bundle 
  --config $(pwd)/rn-cli.config.js 
  --dev false 
  --entry-file ./dom/entry.js 
  --platform dom 
  --bundle-output ./dom/dist/entry.bundle 
  --assets-dest ./dom/dist

# Copy the index.html file to the build destination
cp dom/index.html dom/dist/index.html

The resulting folder in dom/dist
will contain static HTML & JS ready to be
deployed to your provider of choice.

Writting Native Modules/Views

Work In Progress

The API for this is going to be overhauled soon with accompanying documentation.
If you want to see what it currently looks like take a look at some of the built
in native modules such as AsyncLocalStorage

Repository Structure

This project is a lerna-managed monorepo with all the projects living in the packages
folder.

Package Overview

  • react-native-dom
    - The library itself (this is most likely the package you're interested in).
  • rnpm-plugin-dom
    - RNPM plugin primarily used for bootstrapping DOM support into a React Native project.
  • rndom-*
    - Custom web components (built with svelte
    ) used for some of the built-in widgets/views in react-native-dom
    .

One noticeable omission to the list of packages is the custom build of Yoga
which can be found in this seperate repo
. yoga-dom
is
not included in this monorepo due to requiring a signifigantly different build
environment than this repo's entirely JS codebase.

Running RNTester/Examples

To run the examples located in the react-native-dom
source, run the following
commands from the root of the monorepo:

# be sure to update the git submodules to pull the RNTester code
git submodule update --init

# install dependencies
yarn && yarn compile

# start the react-native packager
yarn run-examples

Then navigate to localhost:8081/Examples
and choose which example you would
like to see.

A live deployment of the RNTester project (used primarily for manually testing
changes) can be found at rntester.now.sh

Github

责编内容by:Github阅读原文】。感谢您的支持!

您可能感兴趣的

React Native开发环境搭建 最近开始全面使用React技术栈开发,耳听得团队不久的将来有计划使用React Native开发app,迫不及待来尝试一波,首先搭建好开发环境并跑起来咱们程序界的经典程序,期间也有一些坑,在这里记录分享给大家。 索引 安装包管理工具...
WebAssembly gets its own IDE Mozilla is developing an online IDE for the WebAssembly portable code format . The beta version is now available. ...
Issue 15: iPhone X It has arrived Issue 15: iPhone X :iphone: React Native Monthly #5 Note...
Easier React Native Development With Expo Expo is a collection of tools that make it easier to code React Native apps. In this tutorial, I'm going to show you how...
20分钟上手 webAssembly Web应用的蓬勃发展,使得JavaScript、Web前端,乃至整个互联网都发生了深刻的变化。前端开始承担起了更多的职责,于是对于执行效率的诉求也就更为急迫。除了在语言本身的进化,Web从业者以及各大浏览器厂商,也在不停地进行探索。2012...