Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

Munchkin

571 visualizaciones

Publicado el

Electron Korea Meetup #2 발표자료

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

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

Publicado en: Software
  • Sé el primero en comentar

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 🌷

×