This document discusses ProtoPie, an interaction prototyping tool for designers. It began as various projects - ApplePie used AWS/Azure with AngularJS, BananaPie used Electron and was file-based, and ChocoPie now uses a local server compiled with Enclose and separated from Electron. ChocoPie aims to be a high growth hybrid application toolkit for developers, allowing them to distribute packages across platforms using web skills. It recommends using basic packaging methods for normal apps but protecting commercial sources using a local node.js server and compilation with Enclose.

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!