1. The document discusses building an app called Munchkin using Electron and React-Photonkit. It describes setting up the app skeleton with different components like a header, sidebar, and viewer. 2. It then covers using IPC to communicate between the main and renderer processes to update device data from ADB in real-time. Methods for sending and receiving IPC messages are demonstrated. 3. Troubleshooting resolving the Electron module is discussed, along with ensuring the proper webpack configuration is set up for an Electron target.

1. Munchkin
Jaewe Heo · !iiid! · @importre
Jan 27, 2016

2. About me
• !iiid!
• @importre
• Kotlin
• Electron

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

4. Agenda
• photonkit
• react-photonkit
• munchkin

5. photonkit

7. react-photonkit

9. History
• Oct 15, 2015
• 첫 커밋
• Oct 29, 2015
• Electron Korea Meetup #1 에서 소심하게 프로젝트 공개
• @ragingwind(Jimmy Moon)님과 협업 시작
• Nov 3, 2015
• v0.4.1 릴리즈

10. Todo
• coffescript -> es2015
• webpack -> ???
• improvement of tests
• issues

11. Munchkin 🐈

12. Android Finder
• 한 것
• 단말기 연결 목록 실시간 업데이트
• 폴더 이동 가능
• 텍스트 뷰어
• 할 것
• …

14. Demo 🔬

15. Skeleton 💀

16. app.jsx
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

17. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

18. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

19. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

20. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

21. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

22. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

23. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

24. Skeleton
<Window>
<Header subj={subj} />
<Content>
<PaneGroup>
<Sidebar />
<Contents subj={subj} />
<Viewer subj={subj} />
</PaneGroup>
</Content>
<Footer />
</Window>

25. Details
• import Rx from ‘rxjs/Rx’;
• import electron from ‘electron’;
• electron.ipcMain;
• electron.ipcRenderer;

26. IPC
ADB

27. 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');
}

28. 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);
});
});

29. IPC
ADB
Load data

30. Subject
Open/close ViewerNavigation
Contents

31. Subject
Update viewer
Send data Viewer

32. Troubleshooting

33. 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
…
…

34. [webpack] config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: …,
output: …,
target: 'electron',
module: {
loaders: [
…
…
webpack… 싫음

35. Conclusion

36. Conclusion
• 정말 앱 같이 보이긴 함
• photon에 의존적이어서 콤포넌트가 부족함
• 웹 개발자가 아니어도(Native 개발자?) 도전해볼만 함
¯_(ツ)_/¯

38. Thank you 🌷