Electron을 이용한 ProtoPie 서비스 제작 내용입니다.

1. ProtoPie with Electron
Scotty Kim@Studio XID

2. About me
• NHN & Naver
• Web mail services
• Javascript Framework & Components
• Service Front-end
• Samsung Electronics
• Hybrid cloud system
• Skill set
• Network & Cloud system development
• Front-end skills
Check here.

3. About ProtoPie
• Interaction prototyping tools for designers
• 1st target market
• US & English region
• Greater China region
• Feature
• Micro-interaction prototyping for smart devices (Phone, Wearable, Car ..)
• H/W & Sensor-aided prototyping
• IoT devices prototyping
• Demo
• https://www.youtube.com/watch?v=Sh_XhAW8IsY
• https://www.youtube.com/watch?v=xGZULNeoHuc
Check here.

4. Background & History (1)
• 2012 Google HackFair – Cbox Console
• HTML5 & CSS3
• NaCl
• Serial port
• Special thanks to Jimmy Moon

5. Background & History (2)
• ApplePie – 1st Project
• 2015.3 – 2015.9
• Alpha
• Closed test with limited partners
• AWS & Azure + AngularJS
• Good things
• No package & More easy maintenance
• Anti-cracking
• Weakness
• Heavy App & Dependent network status
• Trust problem (Public Cloud service)

6. Background & History (3)
• BananaPie – 2nd Project
• 2015.10 – 2015.12
• Closed Beta with Partners
• Electron & File based
• Good things
• Good performance
• Easy development
• Using user resources
• Weakness
• Not easy maintenance
• Easy cracking

7. Background & History (4)
• ChocoPie – 3rd Project
• 2016.1 – current
• Open Beta (Target : 2016.3)
• Electron + Local Server (based node.js) & File based
Coming Soon with new features

8. BananaPie structure
• Basic structure with the documents
• Packaging with Asar
• Pure Javascript
• Unhelpful code review
• Atom – Complex & Coffee Script
• Slack – binary packaging
• Build with elementary structure
• ES 6&7, and jQuery
• IPC – Event driven
• Exclude AngularJS & React
Electron
Node.js
Data Model
Control & Logic Layer
Event Listen Layer
View Layer
Chrome
IPC

9. IPC – Client event listen structure
Model
Model watcherCommand
Receive Event
IPC Controller
Send Message
UI Controller
View
Node.js
Chrome

10. IPC – Client event listen example
• Changing X position value
Chrome
Input onChange
Set Properties
Server.command(layerId, options)
Node.js
Layer.editCommand(id,options)
LayerModel.change()
LayerModel.onChange(x,value)
Canvas.setPosition
CanvasArea.onChangeEvent
Server.recevieEventLayerChanged

11. Electron with Enclose JS
• Compile your Node.js project. No sources aboard.
• http://enclosejs.com/
• Good things
• Easy to use
• Protecting sources
• Reasonable paid plan - $9/month
• Weakness
• Increasing packaging size
• Not enough documents
• ex. compile for old CPU : --features=no

12. ChocoPie structure
• Based on BananaPie
• Separating local server from Electron
• Compiled local server with enclose.
Electron
Event Listen Layer
View Layer
Chrome
Node.js
Data Model
Control & Logic Layer
Node.js
Delivery Layer
IPC
Command
Compiled
With
Enclose

13. IPC – Local server connection
• Spawn for child process
Model
Model watcherCommand
API server
Server
(binary)
Electron
Spawn Controller
IPC Controller

14. Summary
• High growth hybrid application toolkit for developers based on web skillset
• Distribute package on Multi-platform
• For normal applications
• Using basic method (Asar package)
• Using easy ways to make you comfortable (ex. AngularJS, React)
• For commercial applications
• Using node.js for business logic as much as possible
• Protect your source with enclose, 3rd party solution

15. Q&A
Thank you!