playnode.key

Size: px

Start display at page:

Download "playnode.key"

서현 채
5 years ago
Views:

1 Electron React Webpack! Junyoung Choi github.com/rokt33r

2 Speaker / Junyoung Choi ( ) Node.js. MAISIN&CO. Boostnote ~ !

3 Agenda. / HMR,

4 Electron

5 Github Atom Node.js Chromium Javascript / HTML / CSS. Slack VSCode.

6 Node.js v ES2015!

7 Chromium

8 Electron Main/Renderer processes Globals IPC & Remote WebFrame Native API

9 Main/Renderer processes 2. Node.js OS GUI API (,,, ). HTML/CSS/Javascript. Node.js API.

10 Globals. Node.js Browser. window require <script> var content = fs.readfilesync(./readme.md ).tostring( utf-8 ) // Node.js document.write(content) // Browser </script>

11 Globals :! require. <script src= ></script> const cp = require( child_process ) cp.exec( rm -Rf *** ) //?!

12 Globals : HTTPS, NodeIntegration

13 IPC / Remote IPC Remote. IPC : socket.io Remote : API.

14 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')

15 Remote examples. ipcmain. electron.autoupdater.checkforupdates() remote.autoupdater.checkforupdates()

16 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')

17 <webview> <iframe>. <iframe>., ipc. Slack

18 Native API

19 Tray Desktop env Tray!

20 Dialog,

21 Menu, OS X Ubuntu Unity.

22 Others GlobalShortcuts Notifications JumpList / Dock menu / Unity Launcher Shortcuts Recent documents(macos & Windows).

23 Fragmentation OS

24 / OS. macos Squirrel.Mac Windows Squirrel.Windows / NSIS Linux

25 /, macos OS. Linux macos Windows Wine Mono electron-builder

26 ( ) Windows macos. Windows. 6 / 20~100 macos. Apple Developer program 12

27 : Windows, macos. electron-builder.

28 : Mac App Store / Windows Store.,. MAS / /

29 : Linux.. Snap AppImage!

30 1 :! Uglify ASAR edge-atom-shell

31 2 : Chromium Node.js 100Mb. 40~50Mb Windows macos

32 1 : AWS Mobile analytics. Javascript api.

33 2 : Node.js API.,. electron-rebuild. ( yarn.)

34 3 : Browser API localstorage : ( 5mb ) IndexedDB : 1/3 Node.js Library leveldb, NeDB

35 4 : Devtool : Devtron IPC API Lint!.

36 4 : Devtool : Others. electron-devtools-installer.

37 Webpack

38 Webpack?

39 require <scrpt> We cannot hold on!

40 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 //, //!!.

41 Electron Webpack Node.js NodeTargetPlugin. plugins: [ new webpack.hotmodulereplacementplugin(), new webpack.namedmodulesplugin(), // `fs`, `http` new NodeTargetPlugin() ],

42 ! Electron Node.js Webpack process.env.node_env!== global.process.env.node_env DefinePlugin!

43 Webpack->Webpack2 ES6 & import/export! ES6 React Babel Loader...(JSX, HMRv3) import/export HMR / ex) loader (x) `babel` / (o) `babel-loader` Linter! CLI v1 (?).

44 HMR React App

45 Hot Module Replacement. babel-preset-react-hmre 1 Deprecated React Hot Loader v3!!

46 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) }

47 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" ],

48 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

49 React Hot Loader v3 : 1 Node v6.5.0 es2015, babel-preset-es2015. React this... HMRv3

50 React Hot Loader v3 : 2 cachedirectory Hot Module Replacement.

51 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>

52 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>

53 Styled-components: Radium :hover React onmouseenter/leave, key ref

54 6: Atom/Etch Github. ( )!

56 !!!

57 API.!

58 PR?! => : / / ES6!! => : Electron / Awesome-electron!! Roadmap! Help Wanted! => / /! =>.

59 ...

60 Carbon Stack.!....

61 Carbon Stack : Inpad.

62 Carbon Stack : Ghost desktop Github pages CMS jekyll???

63 !!

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)