SlideShare a Scribd company logo
1 of 26
Cross-Platform Desktop Apps
with JavaScript
Blagoja Evkoski
Building an E-Mail Client
2
Building an E-Mail Client
3
Building an E-Mail Client
3
Building an E-Mail Client
3
?
Reducing the Complexity
5
Built with Electron
7
Under the Hood
11
Under the Hood
12
Minimal Example
package.json main.js index.html
13
package.json
{
“main”: “main.js”
}
14
main.js
const {app, BrowserWindow} = require(‘electron’)
let window
App.on(‘ready’, () => {
window = new BroserWindow()
window.loadURL(`file://${__dirname}/index.html`)
})
15
index.html
<html>
<body>
<script>
const fs = require(‘fs’)
document.body.innerHTML =
fs.readFileSync(‘message.txt’)
</script>
</body>
</html>
16
Install and Start Electron
npm install –g electron
electron .
17
Minimal Example
18
Minimal Example
19
Modules
20
Installers
Automatic Updates
Dialogs
Clipboard
Menus
Webcam
Native Notifications
etc.
Advantages
21
Cross-Platform
Increased Code Reuse
No Native Skills Required
No Cross-Browser
Compatibility Issues
Latest CSS and
JavaScript Features
Disadvantages
22
Distribution SizeMemory and CPU Usage
Build Something with Electron!
23
Thank you!

More Related Content

What's hot

Khmer unicode for mac
Khmer unicode for macKhmer unicode for mac
Khmer unicode for macSeng Sly
 
[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015Kobkrit Viriyayudhakorn
 
ClusterDesktop how-to use the site
ClusterDesktop how-to use the siteClusterDesktop how-to use the site
ClusterDesktop how-to use the siteEmil Parashkevov
 
The art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsThe art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsBartłomiej Pisulak
 

What's hot (6)

Web sockets Introduction
Web sockets IntroductionWeb sockets Introduction
Web sockets Introduction
 
Khmer unicode for mac
Khmer unicode for macKhmer unicode for mac
Khmer unicode for mac
 
[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015
 
ClusterDesktop how-to use the site
ClusterDesktop how-to use the siteClusterDesktop how-to use the site
ClusterDesktop how-to use the site
 
Gutenberg 4.0
Gutenberg 4.0Gutenberg 4.0
Gutenberg 4.0
 
The art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsThe art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid Apps
 

Similar to Cross-Platform Desktop Apps with JavaScript

Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?Denny Biasiolli
 
Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?Commit University
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronChris Ward
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyUlrich Krause
 
Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Chris Ward
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with ElectronLeo Lindhorst
 
Mocks, Proxies, and Transpilation as Development Strategies for Web Development
Mocks, Proxies, and Transpilation as Development Strategies for Web DevelopmentMocks, Proxies, and Transpilation as Development Strategies for Web Development
Mocks, Proxies, and Transpilation as Development Strategies for Web DevelopmentESUG
 
Local SQLite Database with Node for beginners
Local SQLite Database with Node for beginnersLocal SQLite Database with Node for beginners
Local SQLite Database with Node for beginnersLaurence Svekis ✔
 
Bringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with ElectronBringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with ElectronNir Noy
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발영욱 김
 
Dot net guide for beginner
Dot net guide for beginner Dot net guide for beginner
Dot net guide for beginner jayc8586
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End WorkflowDimitris Tsironis
 

Similar to Cross-Platform Desktop Apps with JavaScript (20)

Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?
 
Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
 
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
 
Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?
 
Java script
Java scriptJava script
Java script
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with Electron
 
Mocks, Proxies, and Transpilation as Development Strategies for Web Development
Mocks, Proxies, and Transpilation as Development Strategies for Web DevelopmentMocks, Proxies, and Transpilation as Development Strategies for Web Development
Mocks, Proxies, and Transpilation as Development Strategies for Web Development
 
Local SQLite Database with Node for beginners
Local SQLite Database with Node for beginnersLocal SQLite Database with Node for beginners
Local SQLite Database with Node for beginners
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
METEOR 101
METEOR 101METEOR 101
METEOR 101
 
Asp.net tips
Asp.net tipsAsp.net tips
Asp.net tips
 
handout-05b
handout-05bhandout-05b
handout-05b
 
handout-05b
handout-05bhandout-05b
handout-05b
 
Bringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with ElectronBringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with Electron
 
Nuxt.js - Introduction
Nuxt.js - IntroductionNuxt.js - Introduction
Nuxt.js - Introduction
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발
 
Java script
Java scriptJava script
Java script
 
Dot net guide for beginner
Dot net guide for beginner Dot net guide for beginner
Dot net guide for beginner
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End Workflow
 

Recently uploaded

Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsSafe Software
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Angel Borroy López
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfkalichargn70th171
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identityteam-WIBU
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxRTS corp
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
A healthy diet for your Java application Devoxx France.pdf
A healthy diet for your Java application Devoxx France.pdfA healthy diet for your Java application Devoxx France.pdf
A healthy diet for your Java application Devoxx France.pdfMarharyta Nedzelska
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Anthony Dahanne
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 

Recently uploaded (20)

Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data Streams
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identity
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtime
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
A healthy diet for your Java application Devoxx France.pdf
A healthy diet for your Java application Devoxx France.pdfA healthy diet for your Java application Devoxx France.pdf
A healthy diet for your Java application Devoxx France.pdf
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 

Cross-Platform Desktop Apps with JavaScript