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.
Get that Corner Office
with Angular 2 and Electron
Get acquainted with how to
build native, desktop
applications using Electron
and Angular 2
Agenda
Running Electron
Adding Angular 2
Notifications
IPC
Packaging Electron
The Demo Application
• An Instagram style application that allows us to select
an image, apply a filter and then save it to...
http://bit.ly/ng-electrogram
Hello Electron
The Elevator Pitch
• Use HTML, CSS, and JavaScript with Chromium and
Node.js to build your app.
• Electron is open source;...
The Elevator Pitch Pt. 2
• Automatic updates
• Crash reporting
• Windows installers
• Debugging & profiling
• Native menus ...
http://electron.atom.io/docs/latest/tutorial/quick-start/
➜ npm install electron-prebuilt --save-dev
Install Electron
"scripts": {

"start": "electron main.js"

},
package.json
'use strict';



const electron = require('electron');

// Module to control application life.

const app = electron.app;
...
01-hello-electron-start
Challenges
• Install electron-prebuilt
• Create a main.js file
• Run electron
• In the package.json file, create a start tas...
Adding Angular 2
Adding Angular 2
• Your Angular app generally goes into a sub-folder like
src or app
• If you are using a build system, yo...
02-adding-angular
Notifications
Notifications
• All three operating systems provide means for
applications to send notifications to the user.
• Electron con...
let myNotification = new Notification('Title', {

body: 'Lorem Ipsum Dolor Sit Amet'

});
Notification
03-notifications-start
Challenges
• In the saveFileCallback method in the app.ts file, create
an error notification and a success notification
IPC
IPC
• Inter-process communication (IPC) is handled by two
different modules
• ipcMain in the main process
• ipcRenderer in...
const BrowserWindow = electron.BrowserWindow;
mainWindow = new BrowserWindow({width: 800, height: 600});
fileMenu.submenu
...
import { remote, ipcRenderer } from 'electron';
ipcRenderer.on('open-file', this.open.bind(this));

ipcRenderer.on('save-f...
04-ipc-start
Challenges
• In the main.js file, complete the save and open click
handlers in the setMenu method
• Use app.ts file, add sav...
Packaging Electron
Packaging Electron
• We used to have to worry about all of packaging for
each OS ourselves
• Fortunately, electron-package...
➜ npm i -g electron-packager
Install electron-packager
➜ electron-packager . <appName>
--platform=<platform>
--arch=<architecture>
--out=<outputDirectory>
--overwrite
--icon=pat...
05-packaging-start
Challenges
• In the package.json file, create a distribute task that
uses electron-packager to package the app for your OS
Thanks!
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
Upcoming SlideShare
Loading in …5
×

Get that Corner Office with Angular 2 and Electron

32,115 views

Published on

These are the slides from my workshop at ng-conf 2016 on Angular 2 and Electron. Pull down the demo repository and work through the branches. Check out http://onehungrymind.com/ for additional resources.

Published in: Technology
  • Be the first to comment

Get that Corner Office with Angular 2 and Electron

  1. 1. Get that Corner Office with Angular 2 and Electron
  2. 2. Get acquainted with how to build native, desktop applications using Electron and Angular 2
  3. 3. Agenda Running Electron Adding Angular 2 Notifications IPC Packaging Electron
  4. 4. The Demo Application • An Instagram style application that allows us to select an image, apply a filter and then save it to our computer • Feel free to use the existing code as a reference point • Please explore! Don't be afraid to try new things!
  5. 5. http://bit.ly/ng-electrogram
  6. 6. Hello Electron
  7. 7. The Elevator Pitch • Use HTML, CSS, and JavaScript with Chromium and Node.js to build your app. • Electron is open source; maintained by GitHub and an active community. • Electron apps build and run on Mac, Windows, and Linux.
  8. 8. The Elevator Pitch Pt. 2 • Automatic updates • Crash reporting • Windows installers • Debugging & profiling • Native menus & notifications
  9. 9. http://electron.atom.io/docs/latest/tutorial/quick-start/
  10. 10. ➜ npm install electron-prebuilt --save-dev Install Electron
  11. 11. "scripts": {
 "start": "electron main.js"
 }, package.json
  12. 12. 'use strict';
 
 const electron = require('electron');
 // Module to control application life.
 const app = electron.app;
 // Module to create native browser window.
 const BrowserWindow = electron.BrowserWindow;
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
 
 let createWindow = () => {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600});
 
 // and load the index.html of the app.
 mainWindow.loadURL('file://' + __dirname + '/index.html');
 
 // Open the DevTools.
 // mainWindow.webContents.openDevTools();
 
 // Emitted when the window is closed.
 mainWindow.on('closed', () => {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 mainWindow = null;
 });
 }
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 app.on('ready', createWindow);
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
 // On OS X it is common for applications and their menu bar
 // to stay active until the user quits explicitly with Cmd + Q
 if (process.platform !== 'darwin') {
 app.quit();
 }
 });
 
 app.on('activate', () => {
 // On OS X it's common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 if (mainWindow === null) createWindow();
 });
 main.js
  13. 13. 01-hello-electron-start
  14. 14. Challenges • Install electron-prebuilt • Create a main.js file • Run electron • In the package.json file, create a start task to run electron
  15. 15. Adding Angular 2
  16. 16. Adding Angular 2 • Your Angular app generally goes into a sub-folder like src or app • If you are using a build system, you may have to tweak file references to get everything working • We need target attribute to the webpack config that is set to electron-renderer. This gave us the ability to import node and electron modules without breaking. • Finally, the Angular app is in TypeScript, so we need to install the electron typings to use electron packages in our code.
  17. 17. 02-adding-angular
  18. 18. Notifications
  19. 19. Notifications • All three operating systems provide means for applications to send notifications to the user. • Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
  20. 20. let myNotification = new Notification('Title', {
 body: 'Lorem Ipsum Dolor Sit Amet'
 }); Notification
  21. 21. 03-notifications-start
  22. 22. Challenges • In the saveFileCallback method in the app.ts file, create an error notification and a success notification
  23. 23. IPC
  24. 24. IPC • Inter-process communication (IPC) is handled by two different modules • ipcMain in the main process • ipcRenderer in the renderer process • You can also use webContents to send messages to your renderer process
  25. 25. const BrowserWindow = electron.BrowserWindow; mainWindow = new BrowserWindow({width: 800, height: 600}); fileMenu.submenu
 .find(item => item.label === 'Open')
 .click = () => mainWindow.webContents.send('open-file') webContents.send
  26. 26. import { remote, ipcRenderer } from 'electron'; ipcRenderer.on('open-file', this.open.bind(this));
 ipcRenderer.on('save-file', this.save.bind(this)); ipcRenderer.on
  27. 27. 04-ipc-start
  28. 28. Challenges • In the main.js file, complete the save and open click handlers in the setMenu method • Use app.ts file, add save and open handlers to the App constructor
  29. 29. Packaging Electron
  30. 30. Packaging Electron • We used to have to worry about all of packaging for each OS ourselves • Fortunately, electron-packager abstracts most of the tedium away and allows us to run a one script to build for our OS
  31. 31. ➜ npm i -g electron-packager Install electron-packager
  32. 32. ➜ electron-packager . <appName> --platform=<platform> --arch=<architecture> --out=<outputDirectory> --overwrite --icon=path/to/custom/icon --asar Run electron-packager
  33. 33. 05-packaging-start
  34. 34. Challenges • In the package.json file, create a distribute task that uses electron-packager to package the app for your OS
  35. 35. Thanks!

×