“Building for a bigger world than mobile”

Wouter van den Broek

@wbroek

WHO IS WOUTER

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

CHALLENGE

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);
  },
};

to Mac OS

to Mac OS

to windows

  • visual studio (windows 10)

  • react-native-windows

  • create windows project

  • set right windows 10 sdk

  • react not up to date

  • not many native modules

to windows

 outcome

Building for a bigger world than mobile

By Wouter van den Broek

Building for a bigger world than mobile

  • 847