Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ProtoPie with Electron
Scotty Kim@Studio XID
About me
• NHN & Naver
• Web mail services
• Javascript Framework & Components
• Service Front-end
• Samsung Electronics
•...
About ProtoPie
• Interaction prototyping tools for designers
• 1st target market
• US & English region
• Greater China reg...
Background & History (1)
• 2012 Google HackFair – Cbox Console
• HTML5 & CSS3
• NaCl
• Serial port
• Special thanks to Jim...
Background & History (2)
• ApplePie – 1st Project
• 2015.3 – 2015.9
• Alpha
• Closed test with limited partners
• AWS & Az...
Background & History (3)
• BananaPie – 2nd Project
• 2015.10 – 2015.12
• Closed Beta with Partners
• Electron & File based...
Background & History (4)
• ChocoPie – 3rd Project
• 2016.1 – current
• Open Beta (Target : 2016.3)
• Electron + Local Serv...
BananaPie structure
• Basic structure with the documents
• Packaging with Asar
• Pure Javascript
• Unhelpful code review
•...
IPC – Client event listen structure
Model
Model watcherCommand
Receive Event
IPC Controller
Send Message
UI Controller
Vie...
IPC – Client event listen example
• Changing X position value
Chrome
Input onChange
Set Properties
Server.command(layerId,...
Electron with Enclose JS
• Compile your Node.js project. No sources aboard.
• http://enclosejs.com/
• Good things
• Easy t...
ChocoPie structure
• Based on BananaPie
• Separating local server from Electron
• Compiled local server with enclose.
Elec...
IPC – Local server connection
• Spawn for child process
Model
Model watcherCommand
API server
Server
(binary)
Electron
Spa...
Summary
• High growth hybrid application toolkit for developers based on web skillset
• Distribute package on Multi-platfo...
Q&A
Thank you!
Upcoming SlideShare
Loading in …5
×

ProtoPie with Electron

1,140 views

Published on

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

Published in: Software
  • Be the first to comment

ProtoPie with Electron

  1. 1. ProtoPie with Electron Scotty Kim@Studio XID
  2. 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. 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. 4. Background & History (1) • 2012 Google HackFair – Cbox Console • HTML5 & CSS3 • NaCl • Serial port • Special thanks to Jimmy Moon
  5. 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. 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. 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. 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. 9. IPC – Client event listen structure Model Model watcherCommand Receive Event IPC Controller Send Message UI Controller View Node.js Chrome
  10. 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. 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. 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. 13. IPC – Local server connection • Spawn for child process Model Model watcherCommand API server Server (binary) Electron Spawn Controller IPC Controller
  14. 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. 15. Q&A Thank you!

×