Electron React Webpack! Junyoung Choi github.com/rokt33r
Speaker / Junyoung Choi (2017.3 ) Node.js. MAISIN&CO. Boostnote 2015.11~2016.10 2!
Agenda. / HMR,
Electron
Github Atom Node.js Chromium Javascript / HTML / CSS. Slack VSCode.
Node.js v6.5.0. ES2015! http://kangax.github.io/compat-table/es6/
Chromium
Electron Main/Renderer processes Globals IPC & Remote WebFrame Native API
Main/Renderer processes 2. Node.js OS GUI API (,,, ). HTML/CSS/Javascript. Node.js API.
Globals. Node.js Browser. window require <script> var content = fs.readfilesync(./readme.md ).tostring( utf-8 ) // Node.js document.write(content) // Browser </script>
Globals :! require. <script src= http://dedly-script.com/app.js ></script> http://dedly-script.com/app.js const cp = require( child_process ) cp.exec( rm -Rf *** ) //?!
Globals : HTTPS, NodeIntegration http://electron.atom.io/docs/tutorial/security
IPC / Remote IPC Remote. IPC : socket.io Remote : API.
IPC examples ipcmain.on('check-request', (event, arg) => { console.log(arg) // prints ping" autoupdater.checkforupdates() Ping event.sender.send('check-done', 'pong') }) Pong ipcrenderer.on( check-done', (event, arg) => { console.log(arg) // prints "pong" }) ipcrenderer.send( check-request', 'ping')
Remote examples. ipcmain. electron.autoupdater.checkforupdates() remote.autoupdater.checkforupdates()
Remote : BAD PRACTICE.,( + R / F5) ipcmain.! remote.ipcmain.on( check-request', (event, arg) => { console.log(arg) // prints ping" autoupdater.checkforupdates() event.sender.send('check-done', 'pong') }) ipcrenderer.on( check-done', (event, arg) => { console.log(arg) // prints "pong" }) ipcrenderer.send( check-request', 'ping')
<webview> <iframe>. <iframe>., ipc. Slack
Native API
Tray Desktop env Tray!
Dialog,
Menu, OS X Ubuntu Unity.
Others GlobalShortcuts Notifications JumpList / Dock menu / Unity Launcher Shortcuts Recent documents(macos & Windows).
Fragmentation OS
/ OS. macos Squirrel.Mac Windows Squirrel.Windows / NSIS Linux
/, macos OS. Linux macos Windows Wine Mono electron-builder
( ) Windows macos. Windows. 6 / 20~100 macos. Apple Developer program 12
: Windows, macos. electron-builder.
: Mac App Store / Windows Store.,. MAS / /
: Linux.. Snap AppImage!
1 :! Uglify ASAR edge-atom-shell https://github.com/electron/electron/issues/3041
2 : Chromium Node.js 100Mb. 40~50Mb Windows macos
1 : AWS Mobile analytics. Javascript api.
2 : Node.js API.,. electron-rebuild. ( yarn.)
3 : Browser API localstorage : ( 5mb ) IndexedDB : 1/3 Node.js Library leveldb, NeDB
4 : Devtool : Devtron IPC API Lint!.
4 : Devtool : Others. electron-devtools-installer.
Webpack
Webpack?
require <scrpt> We cannot hold on!
Electron Webpack require/module.exports import/export OK output: { librarytarget: 'commonjs2' }, externals: [ electron', // CommonJS 'levelup', leveldown', // Native module } ], { react: 'var React, // Global 'react-dom': 'var ReactDOM', 'react-redux': 'var ReactRedux', 'redux': 'var Redux //, //!!.
Electron Webpack Node.js NodeTargetPlugin. plugins: [ new webpack.hotmodulereplacementplugin(), new webpack.namedmodulesplugin(), // `fs`, `http` new NodeTargetPlugin() ],
! Electron Node.js Webpack process.env.node_env!== global.process.env.node_env DefinePlugin!
Webpack->Webpack2 ES6 & import/export! ES6 React Babel Loader...(JSX, HMRv3) import/export HMR / ex) loader (x) `babel` / (o) `babel-loader` Linter! CLI v1 (?).
HMR React App
Hot Module Replacement. babel-preset-react-hmre 1 Deprecated React Hot Loader v3!! https://webpack.js.org/guides/hmr-react/
React Hot Loader v3-beta import { AppContainer } from 'react-hot-loader' import App from./app' const render = () => { let NextApp = require(./app ).default } ReactDOM.render( <AppContainer> <NextApp store={store} history={history} /> </AppContainer>, document.getelementbyid('content') ) render()./app render. HMR./App require. // Hot Module Replacement API if (module.hot) { module.hot.accept('./app', render) }
React Hot Loader v3-beta import { AppContainer } from 'react-hot-loader' import App from./app' const render = () => { // let NextApp = require(./app ).default } ReactDOM.render( <AppContainer> <App store={store} history={history} /> </AppContainer>, document.getelementbyid('content') ) render() // Hot Module Replacement API if (module.hot) { module.hot.accept('./app', render) } Webpack 2.* import/export require!, babel-preset-es2015 Babel import/export! "presets": [ [ es2015", {"modules": false}], "stage-2", "react" ],
React Hot Loader v3-beta import reducers from './reducers' import { createstore } from 'redux' const store = createstore(reducers) if (module.hot) { module.hot.accept('./reducers', () => store.replacereducer(reducers) ) } Redux! export default store
React Hot Loader v3 : 1 Node v6.5.0 es2015, babel-preset-es2015. React this... HMRv3
React Hot Loader v3 : 2 cachedirectory Hot Module Replacement.
5: Styled-components ES2015 Template Literal PostCSS CSS Javascript CSS import styled from 'styled-components' const NavButton = styled(link)` ${p => p.theme.navbutton} &.active.octicon { fill: white; } ` <NavButton to={storageurl}> {storagename} </NavButton>
5: Styled-components import styled from 'styled-components' const NavButton = styled(link)` ${p => p.theme.navbutton} &.active.octicon { fill: white; } `.hyqbqi { height: 24px; line-height: 24px; margin: 0; padding: 0 10px; -webkit-cursor: pointer; cursor: pointer; }.hyqbqi.active.octicon { fill: white; } <NavButton to={storageurl}> {storagename} </NavButton>
Styled-components: Radium :hover React onmouseenter/leave, key ref
6: Atom/Etch Github. ( )!
!!!
API.!
PR?! => : / / ES6!! => : Electron / Awesome-electron!! Roadmap! Help Wanted! => / /! =>.
...
Carbon Stack.!....
Carbon Stack : Inpad. https://github.com/carbonstack/inpad.
Carbon Stack : Ghost desktop Github pages CMS jekyll???
!!