Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Munchkin

585 Aufrufe

Veröffentlicht am

Electron Korea Meetup #2 발표자료

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

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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 🌷

×