Primeiros passos com Electron

Transcript

1. Electron JS Primeiros passos
2. Quem sou? Raphael Porto @raphaelpor Cofundador da Desenvolvedor na Concrete solutions Lithium
3. O que é o Electron? Framework para criar aplicações desktop, usando tecnologias web como HTML, CSS e JavaScript.
4. Quem criou? GitHub
5. Para quê? Por isso, também é conhecido como Atom Shell Atom Editor
6. Do que é feito? io.js + Chromium
7. Quem usa?
8. Instalação npm install ‐g electron‐prebuild
9. Estrutura do Projeto electron­testapp/ ├── package.json ├── main.js └── index.html
10. package.json { "name" : "electron­testapp" "version" : "0.1.0", "main" : "main.js" }
11. index.html <!DOCTYPE html> <html> <head> <meta charset="utf­8"> <title>Olá Mundo!</title> </head> <body> <h1>Olá mundo!</h1> <small> io.js <script> </script> <br> Electron v<script> </script> <br> <script> </script> </small> </body> </html> document.write(process.version) document.write(process.versions['electron']) document.write(process.platform)
12. main.js var app = require('app'); var BrowserWindow = require('browser­window'); require('crash­reporter').start(); var mainWindow = null; app.on('window­all­closed', function() { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
14. Acesse o código https://github.com/raphaelpor/electron-CS
15. Conheça mais - Electron Adventures - Awesome Electron - Electron website