SlideShare a Scribd company logo
1 of 29
© Copyright SELA Software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
JUNE 19-23, 2016
Nir Noy
Consultant, Web, Sela
@noynir
Bringing Javascript to the Desktop with Electron
Why Desktop?
Offline
Local hardware
(printers, devices etc…)
Security
On-premise
App store
Local Access
Kiosk
It Just ”Feels Right”
Desktop Apps
Development Tools
Tasks
Media players
Email client
Calendar
Time management
Mapping
Social media clients
File management
Backup
Audio and Video Conferencing
Gaming
What is Electron
A framework for building cross
platform Desktop Applications
using web technologies
What is Electron
Created by GitHub as the shell
for the Atom text editor.
Road to Electron
Chromium
Embedded
Framework
NW.JS
What’s Under the Hood
NodeJS Chromium
Cool Stuff
Web Technologies – No Native Skills needed
Javascript, HTML, CSS only.
One Browser
Chrome compatible only
Latest Features – ES 2015 & Chrome goodies.
Built-In NodeJS
All Node Capabilities - File system, networking etc..
npm ecosystem
Cross platform
Packaging for Windows, OS X, Linux
Native UX
Native Dialogs, Menus, Notifications etc…
Uncool Stuff
Web Technologies
Seriously it’s Javascript, HTML and CSS all the way.
Native Modules
Native Modules are written in C/C++ .
Debugging
Certain parts of the application are hard to debug.
Tooling
Some of the tooling is immature.
How Does it Work?
A Tale Of Two processes
A Tale Of Two processes
Main
Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer
Web page
ipc webFrame
Node.js
DOM remote
Creates
A Tale Of Two processes
Main
Application lifecycle
Browser window ipc
Node.js menu dialog
Renderer
Web page
ipc webFrame
Node.js
DOM remote
Creates
A Tale Of Two processes
Main
Application lifecycle
Renderer
Web page
Renderer
Web page
Renderer
Background Worker
Getting Started
Hello Electron App
Getting Started
Create a main.js file
...
app.on('ready',() => {
mainWindow=new BrowserWindow({width:800, height:600});
mainWindow.loadURL('file://'+ __dirname +'/index.html');
mainWindow.on('closed',function(){
mainWindow=null;
});
});
app.on('window-all-closed',() => {
if (process.platform != 'darwin') { app.quit(); }
});
Getting Started
Create an index.html file
...
<body>
<h1>Hello Electron!</h1>
We are using node
<script>
var dv=document.createElement('div');
dv.innerHTML=`We are using node ${process.versions.node}
<br/>Chrome ${process.versions.chrome}<br/>
Electron ${process.versions.electron}`;
document.body.appendChild(dv);
</script>
</body>
...
Project Setup
Create a Package.json file
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
Running Your App
Install Electron prebuilt binaries using npm.
$ npm install electron-prebuilt --save-dev // -g
Run your app with the Electron Command
$ electron your-app/
Demo
Hello Electron
Processes Communication
The Main and Renderer Processes can communicate using their
ipc modules.
Each type of processes has it’s own ipc module.
In the Renderer process use the ipcRenderer module to send
and listen to messages
const ipcRenderer = require('electron').ipcRenderer; ipcRenderer.on('asynchronous-
reply', function(event, arg) { console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');
Processes Communication
In the Main process use the ipcMain module to listen and reply
to messages.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
console.log(arg); // prints "ping"
event.sender.send('asynchronous-reply', 'pong');
});
Processes Communication
The remote module provides a simple way to do inter-process
communication (IPC) between the renderer process (web page) and
the main process.
It allow method invocation 0f main process objects without explicitly
using the ipc modules.
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');
Demo
Advanced Demo
Packaging and Distributing
Install Electron packager using npm.
$ npm install electron-packager --save-dev / -g
Run your app with the Electron Command
$ electron-packager app-name
--platform=win32
--arch=x64
Built With Electron
Visual Studio Code
Atom
SlackWhat’s App
Electron Tools
Electron API Demos app
Electron App for interactively exploring the Electron API.
Devtron
Electron Extension for Chrome’s Devtools.
Allow inspection and monitoring of your app.
Spectron
Framework for writing integrations tests.
Built on top of ChromeDriver and WebDriverIO.
Community Electron Tools & Resources
electron-builder - Create installers.
electron-boilerplate
generator-electron - yeoman generator
Awesome electron
https://github.com/sindresorhus/awesome-electron
Questions
Thank you
Nir Noy | @noynir | nirn@sela.co.il
https://github.com/noynir/ElectronExamples

More Related Content

What's hot

Getting started with .net on openSUSE (asp.net with c#)
Getting started with .net on openSUSE  (asp.net with c#)Getting started with .net on openSUSE  (asp.net with c#)
Getting started with .net on openSUSE (asp.net with c#)Alin Alifah
 
Docker Tooling for Eclipse
Docker Tooling for EclipseDocker Tooling for Eclipse
Docker Tooling for EclipseMax Andersen
 
Introduction to Express and Grunt
Introduction to Express and GruntIntroduction to Express and Grunt
Introduction to Express and GruntPeter deHaan
 
Labels, Labels, Labels
Labels, Labels, Labels Labels, Labels, Labels
Labels, Labels, Labels Docker, Inc.
 
Using Minikube for Node.js development
Using Minikube for Node.js developmentUsing Minikube for Node.js development
Using Minikube for Node.js developmentTroy Connor
 
Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!Milindu Sanoj Kumarage
 
Production Ready Javascript With Grunt
Production Ready Javascript With GruntProduction Ready Javascript With Grunt
Production Ready Javascript With GruntXB Software, Ltd.
 
Dockerize WordPress on Mac/Windows
Dockerize WordPress on Mac/WindowsDockerize WordPress on Mac/Windows
Dockerize WordPress on Mac/WindowsKite Koga
 
ASP.NET 5 auf Raspberry PI & docker
ASP.NET 5 auf Raspberry PI & dockerASP.NET 5 auf Raspberry PI & docker
ASP.NET 5 auf Raspberry PI & dockerJürgen Gutsch
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with GruntVlad Filippov
 
Frasco: Jekyll Starter Project
Frasco: Jekyll Starter ProjectFrasco: Jekyll Starter Project
Frasco: Jekyll Starter ProjectKite Koga
 
How To Build and Run Node Apps with Docker and Compose
How To Build and Run Node Apps with Docker and ComposeHow To Build and Run Node Apps with Docker and Compose
How To Build and Run Node Apps with Docker and ComposeDocker, Inc.
 
Infrastructure development on windows ldn cd meetup
Infrastructure development on windows   ldn cd meetup Infrastructure development on windows   ldn cd meetup
Infrastructure development on windows ldn cd meetup Owain Perry
 
Docker, developers take power
Docker, developers take powerDocker, developers take power
Docker, developers take powerEnalean
 
Package Management on Windows with Chocolatey
Package Management on Windows with ChocolateyPackage Management on Windows with Chocolatey
Package Management on Windows with ChocolateyPuppet
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Gruntbenko
 
Generating Visual Studio Code Extensions for Xtext DSLs
Generating Visual Studio Code Extensions for Xtext DSLsGenerating Visual Studio Code Extensions for Xtext DSLs
Generating Visual Studio Code Extensions for Xtext DSLsKarsten Thoms
 

What's hot (20)

Getting started with .net on openSUSE (asp.net with c#)
Getting started with .net on openSUSE  (asp.net with c#)Getting started with .net on openSUSE  (asp.net with c#)
Getting started with .net on openSUSE (asp.net with c#)
 
Docker Tooling for Eclipse
Docker Tooling for EclipseDocker Tooling for Eclipse
Docker Tooling for Eclipse
 
Grunt and Bower
Grunt and BowerGrunt and Bower
Grunt and Bower
 
Introduction to Express and Grunt
Introduction to Express and GruntIntroduction to Express and Grunt
Introduction to Express and Grunt
 
Labels, Labels, Labels
Labels, Labels, Labels Labels, Labels, Labels
Labels, Labels, Labels
 
Using Minikube for Node.js development
Using Minikube for Node.js developmentUsing Minikube for Node.js development
Using Minikube for Node.js development
 
Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!
 
Production Ready Javascript With Grunt
Production Ready Javascript With GruntProduction Ready Javascript With Grunt
Production Ready Javascript With Grunt
 
Dockerize WordPress on Mac/Windows
Dockerize WordPress on Mac/WindowsDockerize WordPress on Mac/Windows
Dockerize WordPress on Mac/Windows
 
ASP.NET 5 auf Raspberry PI & docker
ASP.NET 5 auf Raspberry PI & dockerASP.NET 5 auf Raspberry PI & docker
ASP.NET 5 auf Raspberry PI & docker
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
 
Frasco: Jekyll Starter Project
Frasco: Jekyll Starter ProjectFrasco: Jekyll Starter Project
Frasco: Jekyll Starter Project
 
How To Build and Run Node Apps with Docker and Compose
How To Build and Run Node Apps with Docker and ComposeHow To Build and Run Node Apps with Docker and Compose
How To Build and Run Node Apps with Docker and Compose
 
Jenkins Job DSL plugin
Jenkins Job DSL plugin Jenkins Job DSL plugin
Jenkins Job DSL plugin
 
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
 
Infrastructure development on windows ldn cd meetup
Infrastructure development on windows   ldn cd meetup Infrastructure development on windows   ldn cd meetup
Infrastructure development on windows ldn cd meetup
 
Docker, developers take power
Docker, developers take powerDocker, developers take power
Docker, developers take power
 
Package Management on Windows with Chocolatey
Package Management on Windows with ChocolateyPackage Management on Windows with Chocolatey
Package Management on Windows with Chocolatey
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
 
Generating Visual Studio Code Extensions for Xtext DSLs
Generating Visual Studio Code Extensions for Xtext DSLsGenerating Visual Studio Code Extensions for Xtext DSLs
Generating Visual Studio Code Extensions for Xtext DSLs
 

Similar to Bringing Javascript to the Desktop 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 easyUlrich Krause
 
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
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with ElectronLeo Lindhorst
 
Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!*instinctools
 
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Fwdays
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed AssafAhmed Assaf
 
Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Lars Vogel
 
Native client
Native clientNative client
Native clientzyc901016
 
WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014Minko3D
 
Node.js: A Guided Tour
Node.js: A Guided TourNode.js: A Guided Tour
Node.js: A Guided Tourcacois
 
Minko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko3D
 

Similar to Bringing Javascript to the Desktop with Electron (20)

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 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?
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with Electron
 
Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!
 
Taking The Cloud Native
Taking The Cloud NativeTaking The Cloud Native
Taking The Cloud Native
 
Electron
ElectronElectron
Electron
 
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
 
Proposal
ProposalProposal
Proposal
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
 
.NET Core on Mac
.NET Core on Mac.NET Core on Mac
.NET Core on Mac
 
Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11
 
Native client
Native clientNative client
Native client
 
Intro to Android Programming
Intro to Android ProgrammingIntro to Android Programming
Intro to Android Programming
 
Electron presentation
Electron presentationElectron presentation
Electron presentation
 
WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014
 
SynapseIndia dotnet development framework
SynapseIndia  dotnet development frameworkSynapseIndia  dotnet development framework
SynapseIndia dotnet development framework
 
Node.js: A Guided Tour
Node.js: A Guided TourNode.js: A Guided Tour
Node.js: A Guided Tour
 
Building desktop applications for fun with electron
Building desktop applications for fun with electronBuilding desktop applications for fun with electron
Building desktop applications for fun with electron
 
Minko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.js
 

Recently uploaded

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services
 
How To Manage Restaurant Staff -BTRESTRO
How To Manage Restaurant Staff -BTRESTROHow To Manage Restaurant Staff -BTRESTRO
How To Manage Restaurant Staff -BTRESTROmotivationalword821
 
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)jennyeacort
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Matt Ray
 
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...OnePlan Solutions
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationBradBedford3
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...Akihiro Suda
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalLionel Briand
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
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
 
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
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfDrew Moseley
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfFerryKemperman
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Mater
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 

Recently uploaded (20)

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
 
How To Manage Restaurant Staff -BTRESTRO
How To Manage Restaurant Staff -BTRESTROHow To Manage Restaurant Staff -BTRESTRO
How To Manage Restaurant Staff -BTRESTRO
 
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
 
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion Application
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive Goal
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
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
 
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
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdf
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdf
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 

Bringing Javascript to the Desktop with Electron

  • 1. © Copyright SELA Software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE JUNE 19-23, 2016 Nir Noy Consultant, Web, Sela @noynir Bringing Javascript to the Desktop with Electron
  • 2. Why Desktop? Offline Local hardware (printers, devices etc…) Security On-premise App store Local Access Kiosk It Just ”Feels Right”
  • 3. Desktop Apps Development Tools Tasks Media players Email client Calendar Time management Mapping Social media clients File management Backup Audio and Video Conferencing Gaming
  • 4. What is Electron A framework for building cross platform Desktop Applications using web technologies
  • 5. What is Electron Created by GitHub as the shell for the Atom text editor.
  • 7. What’s Under the Hood NodeJS Chromium
  • 8. Cool Stuff Web Technologies – No Native Skills needed Javascript, HTML, CSS only. One Browser Chrome compatible only Latest Features – ES 2015 & Chrome goodies. Built-In NodeJS All Node Capabilities - File system, networking etc.. npm ecosystem Cross platform Packaging for Windows, OS X, Linux Native UX Native Dialogs, Menus, Notifications etc…
  • 9. Uncool Stuff Web Technologies Seriously it’s Javascript, HTML and CSS all the way. Native Modules Native Modules are written in C/C++ . Debugging Certain parts of the application are hard to debug. Tooling Some of the tooling is immature.
  • 10. How Does it Work? A Tale Of Two processes
  • 11. A Tale Of Two processes Main Application lifecycle Browser window ipc Node.js menu dialog Renderer Web page ipc webFrame Node.js DOM remote Creates
  • 12. A Tale Of Two processes Main Application lifecycle Browser window ipc Node.js menu dialog Renderer Web page ipc webFrame Node.js DOM remote Creates
  • 13. A Tale Of Two processes Main Application lifecycle Renderer Web page Renderer Web page Renderer Background Worker
  • 15. Getting Started Create a main.js file ... app.on('ready',() => { mainWindow=new BrowserWindow({width:800, height:600}); mainWindow.loadURL('file://'+ __dirname +'/index.html'); mainWindow.on('closed',function(){ mainWindow=null; }); }); app.on('window-all-closed',() => { if (process.platform != 'darwin') { app.quit(); } });
  • 16. Getting Started Create an index.html file ... <body> <h1>Hello Electron!</h1> We are using node <script> var dv=document.createElement('div'); dv.innerHTML=`We are using node ${process.versions.node} <br/>Chrome ${process.versions.chrome}<br/> Electron ${process.versions.electron}`; document.body.appendChild(dv); </script> </body> ...
  • 17. Project Setup Create a Package.json file { "name" : "your-app", "version" : "0.1.0", "main" : "main.js" }
  • 18. Running Your App Install Electron prebuilt binaries using npm. $ npm install electron-prebuilt --save-dev // -g Run your app with the Electron Command $ electron your-app/
  • 20. Processes Communication The Main and Renderer Processes can communicate using their ipc modules. Each type of processes has it’s own ipc module. In the Renderer process use the ipcRenderer module to send and listen to messages const ipcRenderer = require('electron').ipcRenderer; ipcRenderer.on('asynchronous- reply', function(event, arg) { console.log(arg); // prints "pong" }); ipcRenderer.send('asynchronous-message', 'ping');
  • 21. Processes Communication In the Main process use the ipcMain module to listen and reply to messages. const ipcMain = require('electron').ipcMain; ipcMain.on('asynchronous-message', function(event, arg) { console.log(arg); // prints "ping" event.sender.send('asynchronous-reply', 'pong'); });
  • 22. Processes Communication The remote module provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process. It allow method invocation 0f main process objects without explicitly using the ipc modules. const remote = require('electron').remote; const BrowserWindow = remote.BrowserWindow; var win = new BrowserWindow({ width: 800, height: 600 }); win.loadURL('https://github.com');
  • 24. Packaging and Distributing Install Electron packager using npm. $ npm install electron-packager --save-dev / -g Run your app with the Electron Command $ electron-packager app-name --platform=win32 --arch=x64
  • 25. Built With Electron Visual Studio Code Atom SlackWhat’s App
  • 26. Electron Tools Electron API Demos app Electron App for interactively exploring the Electron API. Devtron Electron Extension for Chrome’s Devtools. Allow inspection and monitoring of your app. Spectron Framework for writing integrations tests. Built on top of ChromeDriver and WebDriverIO.
  • 27. Community Electron Tools & Resources electron-builder - Create installers. electron-boilerplate generator-electron - yeoman generator Awesome electron https://github.com/sindresorhus/awesome-electron
  • 29. Thank you Nir Noy | @noynir | nirn@sela.co.il https://github.com/noynir/ElectronExamples