WHO IS WOUTER

Web developer since 1998
Mobile developer since 2001
From Nokia Symbian to React Native
Freelance consultant/developer

twitter.com/wbroek

github.com/wbroek

linkedin/in/wbroek

CHALLENGE

start small

why

enterprise

convergence

UWP (Universal windows platform)

marzipan (ios on Mac OS)

Electron (web for desktop)

androd desktop (players / chrome os)

others

getting to work

to electron

react-native-electron

react-native-web

webpack

lower react version

not all electron reachable

no native modules

to electron

AppRegistry.runApplication('Sample', {
  rootTag: document.getElementById('root'),
})

to electron

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: {
    app: ['babel-regenerator-runtime', './index.js'],
  },
  output: {
    path: path.resolve(__dirname, 'electron', 'dist'),
    filename: 'bundle.js',
  },
  node: {
    __filename: true,
    __dirname: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.(png|ttf)$/,
        loader: 'file-loader',
        options: {
          publicPath: 'dist/',
        },
      },
    ],
  },
  resolve: {
    alias: {
      'react-native': 'react-native-electron',
    },
    extensions: ['.web.js', '.js', '.json'],
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(true),
    }),
  ],
  target: 'electron-renderer',
}

to electron

const path = require('path')

module.exports = {
  clipboard: false,
  content: [path.resolve(__dirname, 'electron')],
  port: 8082,
  dev: { publicPath: '/dist' },
}

to electron

const { app, BrowserWindow } = require('electron')

let mainWindow = null

const createWindow = () => {
  mainWindow = new BrowserWindow({
    minWidth: 300,
    minHeight: 400,
    maxWidth: 400,
    width: 300,
    height: 600,
    show: false,
  })

  mainWindow.on('closed', () => {
    mainWindow = null
  })
  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  })

  mainWindow.loadURL(`file://${__dirname}/index.html`)
}

app.on('ready', () => {
  createWindow()
})

to Mac OS

react-native-mac

adjust metro bundler

update xcode project

react not up to date

no native modules

to Mac OS

const sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  'downstream/core/invariant.js',
  /website\/node_modules\/.*/,
  'Libraries/Relay/relay/tools/relayUnstableBatchedUpdates.js',
];

const platformBlacklists = {
  web: [
    '.ios.js',
    '.android.js',
  ],
  ios: [
    '.web.js',
    /node_modules\/react-native-macos\/.*/,
  ],
  android: [
    '.web.js',
    '.ios.js',
    /node_modules\/react-native-macos\/.*/,
  ],
  macos: [
    '.ios.js',
    '.android.js',
    /node_modules\/react-native\/.*/,
  ],
};

function blacklist(platform, additionalBlacklist) {
  return new RegExp('(' +
    (additionalBlacklist || []).concat(sharedBlacklist)
      .concat(platformBlacklists[platform] || [])
      .map(escapeRegExp)
      .join('|') +
    ')$'
  );
}

module.exports = {
  getProvidesModuleNodeModules: () => ['react-native-macos'],
  getPlatforms: () => 'macos',
  getBlacklistRE(platform) {
    if (process && process.argv.filter(a => a.indexOf('react-native-macos') > -1).length > 0) {
      return blacklist('macos')
    }
    return blacklist(platform);
  },
};