Linux, Windows, MacOS?
One framework to rule them all!
Torino Coding Society
Denny Biasiolli
WHO AM I
Denny Biasiolli
Software Developer @ Maieutical Labs, Turin
@dennybiasiolli
denny.biasiolli@gmail.com
dennybiasio...
GOOGLE > BUILD CROSS PLATFORM DESKTOP APP
Java --> different language
QT --> different language
CEF --> hybrid approach
NW...
NW.js Electron
Version 0.20.x Version 1.4.x
30000 star on GitHub 41000 star on GitHub
Updated 2017-01-31
ELECTRON APPS
         
                             
(Electron website)
“If you can build a website, you can build
a desktop app.”
WEBSITE STRUCTURE
.
+-- www/
+-- css/
| +-- style.css
|
+-- js/
| +-- script.js
|
+-- index.html
+-- page1.html
+-- page2....
INSTALLING ELECTRON
# globally
npm install -g electron
# or
# local dependency
npm install --save-dev electron
CONFIGURING ELECTRON
package.json
{
"name": "electron_sample",
"version": "0.1.0",
"main": "electron/main.js"
}
CONFIGURING ELECTRON
electron/main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const ...
CONFIGURING ELECTRON
electron/main.js
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 })
win.l...
CONFIGURING ELECTRON
electron/main.js
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
...
LAUNCHING ELECTRON
# global installation
electron .
# or
# local installation
node_modules/.bin/electron .
PACKAGING
create asar archive
copy archive in electron folder
rename electron
con gure icon
compile
ecc...
INSTALLING ELECTRON-PACKAGER
# globally
npm install -g electron-packager
# use with `electron-packager`
# or
# local depen...
USING ELECTRON-PACKAGER
electron-packager . myFirstApp 
> --platform=all  # darwin, linux, mas, win32
> --arch=all  # ia32...
TIP: LINKS
const {shell} = require('electron')
// ...
function createWindow() {
// ...
win.webContents.on('new-window', (e...
LINKS
SlideShare:
CONTACTS
github.com/dennybiasiolli/electron_sample
https://goo.gl/j3maof
@dennybiasiolli
denny.biasiolli...
Electron: Linux, Windows, MacOS? One framework to rule them all!
Electron: Linux, Windows, MacOS? One framework to rule them all!
Electron: Linux, Windows, MacOS? One framework to rule them all!
Upcoming SlideShare
Loading in …5
×

Electron: Linux, Windows, MacOS? One framework to rule them all!

157 views

Published on

"If you can create a website, you can create a desktop application." This is the slogan of Electron, a framework for building desktop applications using web technologies such as JavaScript, HTML and CSS. But is that really so? Let's find out with a practical example.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
157
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Electron: Linux, Windows, MacOS? One framework to rule them all!

  1. 1.   Linux, Windows, MacOS? One framework to rule them all! Torino Coding Society Denny Biasiolli
  2. 2. WHO AM I Denny Biasiolli Software Developer @ Maieutical Labs, Turin @dennybiasiolli denny.biasiolli@gmail.com dennybiasiolli.com
  3. 3. GOOGLE > BUILD CROSS PLATFORM DESKTOP APP Java --> different language QT --> different language CEF --> hybrid approach NW.js Electron
  4. 4. NW.js Electron Version 0.20.x Version 1.4.x 30000 star on GitHub 41000 star on GitHub Updated 2017-01-31
  5. 5. ELECTRON APPS                                        
  6. 6. (Electron website) “If you can build a website, you can build a desktop app.”
  7. 7. WEBSITE STRUCTURE . +-- www/ +-- css/ | +-- style.css | +-- js/ | +-- script.js | +-- index.html +-- page1.html +-- page2.html +-- ...
  8. 8. INSTALLING ELECTRON # globally npm install -g electron # or # local dependency npm install --save-dev electron
  9. 9. CONFIGURING ELECTRON package.json { "name": "electron_sample", "version": "0.1.0", "main": "electron/main.js" }
  10. 10. CONFIGURING ELECTRON electron/main.js const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') let win app.on('ready', createWindow)
  11. 11. CONFIGURING ELECTRON electron/main.js function createWindow() { win = new BrowserWindow({ width: 800, height: 600 }) win.loadURL(url.format({ pathname: path.join(__dirname, '../www/index.html'), protocol: 'file:', slashes: true })) win.on('closed', () => { win = null }) }
  12. 12. CONFIGURING ELECTRON electron/main.js app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } })
  13. 13. LAUNCHING ELECTRON # global installation electron . # or # local installation node_modules/.bin/electron .
  14. 14. PACKAGING create asar archive copy archive in electron folder rename electron con gure icon compile ecc...
  15. 15. INSTALLING ELECTRON-PACKAGER # globally npm install -g electron-packager # use with `electron-packager` # or # local dependency npm install --save-dev electron-packager # use with `node_modules/.bin/electron-packager`
  16. 16. USING ELECTRON-PACKAGER electron-packager . myFirstApp > --platform=all # darwin, linux, mas, win32 > --arch=all # ia32, x64, armv7l > --icon 'icons/icon' > --out=dist-desktop > --overwrite # for more info electron-packager --help
  17. 17. TIP: LINKS const {shell} = require('electron') // ... function createWindow() { // ... win.webContents.on('new-window', (e, url) => { e.preventDefault(); shell.openExternal(url); }); }
  18. 18. LINKS SlideShare: CONTACTS github.com/dennybiasiolli/electron_sample https://goo.gl/j3maof @dennybiasiolli denny.biasiolli@gmail.com dennybiasiolli.com

×