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

Contenu connexe

Tendances

ESNext, service workers, and the future of the web
ESNext, service workers, and the future of the webESNext, service workers, and the future of the web
ESNext, service workers, and the future of the webJemuel Young
 
Building Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptBuilding Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptMSDEVMTL
 
9 anti-patterns for node.js teams
9 anti-patterns for node.js teams9 anti-patterns for node.js teams
9 anti-patterns for node.js teamsJeff Harrell
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Fwdays
 
React for .net developers
React for .net developersReact for .net developers
React for .net developersmacsdickinson
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in ClojureTroy Miles
 
Nodejs - Building a RESTful API
Nodejs - Building a RESTful APINodejs - Building a RESTful API
Nodejs - Building a RESTful APISang Cù
 
Understand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksUnderstand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksHengki Sihombing
 
Node, express & sails
Node, express & sailsNode, express & sails
Node, express & sailsBrian Shannon
 
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...Codemotion
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptAustin Ogilvie
 
React talk, GrunnJs 24 September 2014
React talk, GrunnJs 24 September 2014React talk, GrunnJs 24 September 2014
React talk, GrunnJs 24 September 2014_jjoos_
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks ComparisonDeepu S Nath
 
Launch Arguments & NSUserDefaults by Franck Lefebvre
Launch Arguments & NSUserDefaults by Franck LefebvreLaunch Arguments & NSUserDefaults by Franck Lefebvre
Launch Arguments & NSUserDefaults by Franck LefebvreCocoaHeads France
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDBTDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDBValeri Karpov
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 

Tendances (20)

ESNext, service workers, and the future of the web
ESNext, service workers, and the future of the webESNext, service workers, and the future of the web
ESNext, service workers, and the future of the web
 
Building Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptBuilding Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScript
 
9 anti-patterns for node.js teams
9 anti-patterns for node.js teams9 anti-patterns for node.js teams
9 anti-patterns for node.js teams
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
 
React for .net developers
React for .net developersReact for .net developers
React for .net developers
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
Nodejs - Building a RESTful API
Nodejs - Building a RESTful APINodejs - Building a RESTful API
Nodejs - Building a RESTful API
 
Understand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksUnderstand How Node.js and Core Features Works
Understand How Node.js and Core Features Works
 
Electron
ElectronElectron
Electron
 
Node, express & sails
Node, express & sailsNode, express & sails
Node, express & sails
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
 
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...
Mobile Library Development - stuck between a pod and a jar file - Zan Markan ...
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascript
 
JHipster
JHipsterJHipster
JHipster
 
Pre-rendering single page app
Pre-rendering single page appPre-rendering single page app
Pre-rendering single page app
 
React talk, GrunnJs 24 September 2014
React talk, GrunnJs 24 September 2014React talk, GrunnJs 24 September 2014
React talk, GrunnJs 24 September 2014
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks Comparison
 
Launch Arguments & NSUserDefaults by Franck Lefebvre
Launch Arguments & NSUserDefaults by Franck LefebvreLaunch Arguments & NSUserDefaults by Franck Lefebvre
Launch Arguments & NSUserDefaults by Franck Lefebvre
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDBTDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 

Similaire à ProtoPie with Electron

6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012CMC Limited
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeansRyan Cuprak
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in schoolMichael Galpin
 
Full Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesFull Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesInfinite Graphix Technologies
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business HeadsYash Mody
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Arun Gupta
 
Evolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.jsEvolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.jsSteve Jamieson
 
AWS for the Java Developer
AWS for the Java DeveloperAWS for the Java Developer
AWS for the Java DeveloperRory Preddy
 
Getting Started with Docker
Getting Started with DockerGetting Started with Docker
Getting Started with Dockervisual28
 
Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with reduxGaurav Singh
 
Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Ryan Cuprak
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
AWS for Java Developers workshop
AWS for Java Developers workshopAWS for Java Developers workshop
AWS for Java Developers workshopRory Preddy
 
TallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJSTallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJSAndrew Hart
 
Ohio Devfest - Visual Analysis with GCP
Ohio Devfest - Visual Analysis with GCPOhio Devfest - Visual Analysis with GCP
Ohio Devfest - Visual Analysis with GCPWesley Workman
 

Similaire à ProtoPie with Electron (20)

6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeans
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in school
 
Full Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesFull Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix Technologies
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business Heads
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
 
Evolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.jsEvolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.js
 
AWS for the Java Developer
AWS for the Java DeveloperAWS for the Java Developer
AWS for the Java Developer
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
 
Getting Started with Docker
Getting Started with DockerGetting Started with Docker
Getting Started with Docker
 
Node.js
Node.jsNode.js
Node.js
 
DOTNET8.pptx
DOTNET8.pptxDOTNET8.pptx
DOTNET8.pptx
 
Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with redux
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
AWS for Java Developers workshop
AWS for Java Developers workshopAWS for Java Developers workshop
AWS for Java Developers workshop
 
TallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJSTallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJS
 
Ohio Devfest - Visual Analysis with GCP
Ohio Devfest - Visual Analysis with GCPOhio Devfest - Visual Analysis with GCP
Ohio Devfest - Visual Analysis with GCP
 

Dernier

Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 

Dernier (20)

Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 

ProtoPie with Electron

  • 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