Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a ProtoPie with Electron
Semelhante a ProtoPie with Electron (20)
Último
Último (20)
ProtoPie with Electron
- 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!