Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
 
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!

224 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.

  • Be the first to comment

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

×