Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Munchkin
Jaewe Heo · !iiid! · @importre
Jan 27, 2016
About me
• !iiid!
• @importre
• Kotlin
• Electron
Goal
• Electron과 react-photonkit을 이용하여 앱 같은 앱 만들기
Agenda
• photonkit
• react-photonkit
• munchkin
photonkit
react-photonkit
History
• Oct 15, 2015
• 첫 커밋
• Oct 29, 2015
• Electron Korea Meetup #1 에서 소심하게 프로젝트 공개
• @ragingwind(Jimmy Moon)님과 협업 시작
...
Todo
• coffescript -> es2015
• webpack -> ???
• improvement of tests
• issues
Munchkin 🐈
Android Finder
• 한 것
• 단말기 연결 목록 실시간 업데이트
• 폴더 이동 가능
• 텍스트 뷰어
• 할 것
• …
Demo 🔬
Skeleton 💀
app.jsx
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />...
Details
• import Rx from ‘rxjs/Rx’;
• import electron from ‘electron’;
• electron.ipcMain;
• electron.ipcRenderer;
IPC
ADB
ipcRenderer
// In renderer process (web page).
const ipcRenderer = require('electron').ipcRenderer;
componentDidMount() {
...
ipcMain
// In main process.
const ipcMain = require('electron').ipcMain;
ipcMain.on('check-devices', function (event, arg)...
IPC
ADB
Load data
Subject
Open/close ViewerNavigation
Contents
Subject
Update viewer
Send data Viewer
Troubleshooting
Cannot resolve module 'electron'
ERROR in ./app/header.jsx
Module not found: Error: Cannot resolve module 'electron' in /p...
[webpack] config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: …,
output: …,
targ...
Conclusion
Conclusion
• 정말 앱 같이 보이긴 함
• photon에 의존적이어서 콤포넌트가 부족함
• 웹 개발자가 아니어도(Native 개발자?) 도전해볼만 함
¯_(ツ)_/¯
Thank you 🌷
Munchkin
Munchkin
Munchkin
Munchkin
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

Munchkin

Download to read offline

Electron Korea Meetup #2 발표자료

Electron과 react-photonkit을 이용하여 앱 같은 앱 만들기

- https://github.com/importre/munchkin
- http://react-photonkit.github.io

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Munchkin

  1. 1. Munchkin Jaewe Heo · !iiid! · @importre Jan 27, 2016
  2. 2. About me • !iiid! • @importre • Kotlin • Electron
  3. 3. Goal • Electron과 react-photonkit을 이용하여 앱 같은 앱 만들기
  4. 4. Agenda • photonkit • react-photonkit • munchkin
  5. 5. photonkit
  6. 6. react-photonkit
  7. 7. History • Oct 15, 2015 • 첫 커밋 • Oct 29, 2015 • Electron Korea Meetup #1 에서 소심하게 프로젝트 공개 • @ragingwind(Jimmy Moon)님과 협업 시작 • Nov 3, 2015 • v0.4.1 릴리즈
  8. 8. Todo • coffescript -> es2015 • webpack -> ??? • improvement of tests • issues
  9. 9. Munchkin 🐈
  10. 10. Android Finder • 한 것 • 단말기 연결 목록 실시간 업데이트 • 폴더 이동 가능 • 텍스트 뷰어 • 할 것 • …
  11. 11. Demo 🔬
  12. 12. Skeleton 💀
  13. 13. app.jsx <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  14. 14. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  15. 15. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  16. 16. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  17. 17. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  18. 18. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  19. 19. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  20. 20. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  21. 21. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
  22. 22. Details • import Rx from ‘rxjs/Rx’; • import electron from ‘electron’; • electron.ipcMain; • electron.ipcRenderer;
  23. 23. IPC ADB
  24. 24. ipcRenderer // In renderer process (web page). const ipcRenderer = require('electron').ipcRenderer; componentDidMount() { ipcRenderer.on('on-add-device', (event, arg) => { var devices = this.state.devices; devices[arg.id] = arg; this.setState({ devices: devices }); }); ipcRenderer.on('on-change-device', (event, arg) => { var devices = this.state.devices; devices[arg.id] = arg; this.setState({ devices: devices }); }); ipcRenderer.on('on-remove-device', (event, arg) => { var devices = this.state.devices; delete devices[arg.id]; this.setState({ devices: devices }); }); ipcRenderer.send('check-devices'); }
  25. 25. ipcMain // In main process. const ipcMain = require('electron').ipcMain; ipcMain.on('check-devices', function (event, arg) { const devices = client.trackDevices(); Rx.Observable.fromPromise(devices) .subscribe(tracker => { tracker.on('add', device => { event.sender.send('on-add-device', device); }); tracker.on('change', device => { event.sender.send('on-change-device', device); }); tracker.on('remove', device => { event.sender.send('on-remove-device', device); }); }, error => { console.log(error); }); });
  26. 26. IPC ADB Load data
  27. 27. Subject Open/close ViewerNavigation Contents
  28. 28. Subject Update viewer Send data Viewer
  29. 29. Troubleshooting
  30. 30. Cannot resolve module 'electron' ERROR in ./app/header.jsx Module not found: Error: Cannot resolve module 'electron' in /path/to/app @ ./app/header.jsx 15:16-35 ERROR in ./app/sidebar.jsx Module not found: Error: Cannot resolve module 'electron' in /path/to/app @ ./app/sidebar.jsx 15:16-35 … …
  31. 31. [webpack] config var path = require('path'); var webpack = require('webpack'); module.exports = { entry: …, output: …, target: 'electron', module: { loaders: [ … … webpack… 싫음
  32. 32. Conclusion
  33. 33. Conclusion • 정말 앱 같이 보이긴 함 • photon에 의존적이어서 콤포넌트가 부족함 • 웹 개발자가 아니어도(Native 개발자?) 도전해볼만 함 ¯_(ツ)_/¯
  34. 34. Thank you 🌷
  • underbellpark

    Jan. 28, 2016
  • ssuserb3c32f

    Jan. 28, 2016

Electron Korea Meetup #2 발표자료 Electron과 react-photonkit을 이용하여 앱 같은 앱 만들기 - https://github.com/importre/munchkin - http://react-photonkit.github.io

Views

Total views

764

On Slideshare

0

From embeds

0

Number of embeds

23

Actions

Downloads

3

Shares

0

Comments

0

Likes

2

×