SlideShare a Scribd company logo
1 of 25
Download to read offline
electron for emberists
toronto ember.js meet up (mar 2 2017)
© Isle of Code Inc.@anulman
why write hybrid apps?
• app store distribution
• decouple a long-lived app from browser tabs
• use system ui, like alerts & menu / task bars
• use system resources, like fs & gpu
2
© Isle of Code Inc.@anulman
things we will learn
• how do i build my ember app as a native desktop app?
• intro to electron
• disclaimers re: electron / hybrid
• ember-electron
• how does ember-electron (v2.0) work?
• init
• `ember electron`
• `ember electron:package` [`:make`, `:publish`]
• `ember electron:test`
3
© Isle of Code Inc.@anulman
things we will learn (cont’d)
• how do i…
• add global shortcut + dialogs?
• config app icon?
• config autoupdate?
4
© Isle of Code Inc.@anulman
btw hi i’m aidan
• partner & polyglot @ isle of code
• (we’re hiring for ~sr js dev + design-friendly int/jr dev!)
• @anulman on twitter, github, etc
• when not hacking, i’m:
• on my bicycle
• at a concert
• making food
5
how do i build my ember app
as a native desktop app?
© Isle of Code Inc.@anulman
intro to electron
• oss framework to compose cross-platform desktop apps from node.js apis + chromium
windows
• originally extracted from github’s atom editor
• used by apps you use:
• atom
• slack
• brave
• ghost
• whatsapp
• visual studio code
• gitkraken
7
© Isle of Code Inc.@anulman
intro to electron (cont’d)
• offers simultaneous control of node.js & chromium runtimes
• comes pre-packaged with js wrappers for several common
host os apis:
• system tray
• autoupdate
• keyboard shortcuts w/ & w/o focus
• many pre-packaged js wrappers are available only in the
node runtime / are sandboxed in chromium (renderer) procs
8
© Isle of Code Inc.@anulman
disclaimers re: electron / hybrid
• “serves” via fs, so paths should not start with `/`
• architecture should minimize platform-specific code
• be careful! you have full privileges of host OS
• e.g. remote code execution is hecka dangerous
• memory leaks are a major issue, as no req / response cycle to
refresh state:
• unresolved / rejected promises
• lingering refs to dom nodes…
9
© Isle of Code Inc.@anulman
ember-electron
• use ember-cli to wrap electron workflows
• 1.x used `electron` & `electron-packager` directly
• 2.x uses `electron-forge`, i.e. e-cli for electron
• provide electron-aware testing env
• e.g. to test plugin consumption
• h/t @felixrieseberg (slack + electron core)
10
how does ember-
electron (v2.0) work?
© Isle of Code Inc.@anulman
ember-electron init
• `ember install ember-electron`
• beta in use but not yet available via npm
• install instructions at https://github.com/felixrieseberg/ember-electron/
issues/147
• `ember g ember-electron`
• v1.x => v2.0
• introduces `ember-electron` dir
• expects `electron-forge`-conformant package.json config
• moves inspector to embedded chrome devtools, vs. remote via browser
12
© Isle of Code Inc.@anulman
`ember electron`
• electron equivalent to `ember s`
• builds app to `dist` & watches for live reload
• `--output-dir` is configurable, in case of alternate
path in electron.js
• uses prebuilt & compiled electron bin to serve project
via `electron-forge#start`
• https://github.com/felixrieseberg/ember-electron/blob/
master/lib/commands/electron.js
13
© Isle of Code Inc.@anulman
`ember electron:package`
• electron equivalent to `ember build`
• inherits from generic e-electron build cmd, along w/
• `:make` — outputs distributables (.zip, .dmg, .deb)
• `:publish` — publishes distributable to server
• prepares build:
• `ember build`s app to (configurable) tmp dir
• copies additional files
• req’d: .compilerc, package.json, electron.js
• incls anything defined in `package.json[‘config’][‘ember-electron’][‘copy-files’]`
• installs package.json deps
• devDeps need not apply
14
© Isle of Code Inc.@anulman
`ember electron:package`
(cont’d)
• passes built tmp dir to forge commands
• incl configurable `--out-dir` (defaults to `ember-electron/
out`)
• cleans up tmp dir
• to speed up:
• `--skip-build` to cp dist dir as initial tmp build
• `--skip-package` to skip all wrapping and proxy directly
to forge
15
© Isle of Code Inc.@anulman
`ember electron:test`
• equivalent to `ember test`
• passes addl flags to `ember test` cmd + tasks to
support electron envs
• h/t @bendemboski
16
© Isle of Code Inc.@anulman
pending before release…
• update baseURL / rootURL handling
• presently: installs config/environment w/blueprint
• proposed: check config for valid values when cmd called
• proposed: use new `ember-electron/public` dir to copy files
• presently: reads `packageJson[‘ember-electron’][‘copy-files’]`
• proposal intended to simplify platform-specific reqs (e.g. `public/darwin`)
• provide upgrade tooling, via `ember g ember-electron` or `:upgrade`
• update test suite—2.0 gutted old commands
• follow along at https://github.com/felixrieseberg/ember-electron/projects/2
17
how do i…
© Isle of Code Inc.@anulman
add global shortcut + dialog?
• shortcuts & dialogs are restricted to main proc
• preference is to handle in `electron.js`
• if handling in `BrowserWindow`:
`require(‘electron’).remote.globalShortcut(…)`
• dialogs have several types:
• `showOpenDialog`
• `showSaveDialog`
• `showMessageBox`
• `showErrorBox`
19
© Isle of Code Inc.@anulman
config app icon?
• create icon files
• mac: *.icns
• win: *.ico
• linux: *.png
• add config to forge’s packager options (mac / win)
• add `icon: ‘path/to/icon’` to `BrowserWindow` init in electron.js (linux)
• omit extension to auto-configure ext by platform
• n.b. diff shows icons in copy-files; this is only for linux handling
20
© Isle of Code Inc.@anulman
config autoupdate?
• configure app signing:
• mac: `osxSign` param of `electronPackagerConfig`
• win: `electronWinstallerConfig`
• make executable:
• `ember electron:make`
• landing ~2.1: `ember electron:publish`
• forge currently ships with github & s3 publishers
21
© Isle of Code Inc.@anulman
config autoupdate?
(cont’d, mac / win)
• deploy & configure nuts server: https://github.com/GitbookIO/nuts
• proxies & caches distributable assets
• exposes api for e.g.
• `/download/latest`
• `/download/latest/:os`
• `/download/:version`
• in main proc, `electron.autoUpdater.checkForUpdates()`
• n.b. this checks & downloads in one op
• n.b. may want to check update availability manually if app is launched:
recommendation is to `electron.autoUpdater.quitAndInstall()` immediately on
`update-downloaded` event
22
© Isle of Code Inc.@anulman
config autoupdate?
(cont’d, linux)
• “autoupdates” are a bit more manual in linux-land
• like mac / win, first create & publish distributable
(e.g. to apt repo)
• install updates manually, or automate via cron
23
© Isle of Code Inc.@anulman
tl;dr
• electron is a popular and proven lib / framework to
create hybrid desktop applications
• ember-electron offers a painless cli integration
• any system / server node module (e.g. fs) is
available in electron processes
• ember-electron 2.x is already the hotness
24
© Isle of Code Inc.@anulman
links
• https://electron.atom.io
• https://github.com/felixriesberg/ember-electron
• https://github.com/electron-userland/electron-forge
• https://blog.isleofcode.com/building-fully-
functional-mac-pc-linux-apps-in-javascript-pt-1-
intro-to-electron/
25

More Related Content

What's hot

Deployment Automation with Docker
Deployment Automation with DockerDeployment Automation with Docker
Deployment Automation with DockerEgor Pushkin
 
Dockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in RomeDockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in RomeAlessandro Nadalin
 
Building a Desktop Streaming console with Electron and ReactJS
Building a Desktop Streaming console with Electron and ReactJSBuilding a Desktop Streaming console with Electron and ReactJS
Building a Desktop Streaming console with Electron and ReactJSEmanuele Rampichini
 
Docker Containers: Developer’s experience and building robust developer envir...
Docker Containers: Developer’s experience and building robust developer envir...Docker Containers: Developer’s experience and building robust developer envir...
Docker Containers: Developer’s experience and building robust developer envir...Future Cloud Summit
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web DevelopersKyle Cearley
 
A complete guide to Node.js
A complete guide to Node.jsA complete guide to Node.js
A complete guide to Node.jsPrabin Silwal
 
AWS Developer Fundamentals
AWS Developer FundamentalsAWS Developer Fundamentals
AWS Developer FundamentalsJosh Padnick
 
Dockerize node.js application
Dockerize node.js applicationDockerize node.js application
Dockerize node.js applicationSeokjun Kim
 
Provisioning & Deploying with Docker
Provisioning & Deploying with DockerProvisioning & Deploying with Docker
Provisioning & Deploying with DockerErica Windisch
 
Selenium lightning-talk
Selenium lightning-talkSelenium lightning-talk
Selenium lightning-talkStephen Donner
 
Containerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaContainerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaJadson Santos
 
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019Eugene Kurko
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewJosh Padnick
 
Testing with Docker
Testing with DockerTesting with Docker
Testing with Dockertoffermann
 
Docker and Puppet for Continuous Integration
Docker and Puppet for Continuous IntegrationDocker and Puppet for Continuous Integration
Docker and Puppet for Continuous IntegrationGiacomo Vacca
 
Continuous Delivery in Enterprise Environments using Docker, Ansible and Jenkins
Continuous Delivery in Enterprise Environments using Docker, Ansible and JenkinsContinuous Delivery in Enterprise Environments using Docker, Ansible and Jenkins
Continuous Delivery in Enterprise Environments using Docker, Ansible and JenkinsMarcel Birkner
 
Droidcon Nigeria 2021 - Still Sleeping on KMM?
Droidcon Nigeria 2021 - Still Sleeping on KMM? Droidcon Nigeria 2021 - Still Sleeping on KMM?
Droidcon Nigeria 2021 - Still Sleeping on KMM? Emmanuel Kehinde
 

What's hot (20)

Deployment Automation with Docker
Deployment Automation with DockerDeployment Automation with Docker
Deployment Automation with Docker
 
Electron
ElectronElectron
Electron
 
Dockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in RomeDockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in Rome
 
Building a Desktop Streaming console with Electron and ReactJS
Building a Desktop Streaming console with Electron and ReactJSBuilding a Desktop Streaming console with Electron and ReactJS
Building a Desktop Streaming console with Electron and ReactJS
 
Docker Containers: Developer’s experience and building robust developer envir...
Docker Containers: Developer’s experience and building robust developer envir...Docker Containers: Developer’s experience and building robust developer envir...
Docker Containers: Developer’s experience and building robust developer envir...
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
 
A complete guide to Node.js
A complete guide to Node.jsA complete guide to Node.js
A complete guide to Node.js
 
AWS Developer Fundamentals
AWS Developer FundamentalsAWS Developer Fundamentals
AWS Developer Fundamentals
 
Dockerize node.js application
Dockerize node.js applicationDockerize node.js application
Dockerize node.js application
 
Provisioning & Deploying with Docker
Provisioning & Deploying with DockerProvisioning & Deploying with Docker
Provisioning & Deploying with Docker
 
Selenium lightning-talk
Selenium lightning-talkSelenium lightning-talk
Selenium lightning-talk
 
Containerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaContainerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and Java
 
Ansible - A 'crowd' introduction
Ansible - A 'crowd' introductionAnsible - A 'crowd' introduction
Ansible - A 'crowd' introduction
 
Introduce native html5 streaming player
Introduce native html5 streaming playerIntroduce native html5 streaming player
Introduce native html5 streaming player
 
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019
Multiplatform shared codebase with Kotlin/Native - UA Mobile 2019
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level Overview
 
Testing with Docker
Testing with DockerTesting with Docker
Testing with Docker
 
Docker and Puppet for Continuous Integration
Docker and Puppet for Continuous IntegrationDocker and Puppet for Continuous Integration
Docker and Puppet for Continuous Integration
 
Continuous Delivery in Enterprise Environments using Docker, Ansible and Jenkins
Continuous Delivery in Enterprise Environments using Docker, Ansible and JenkinsContinuous Delivery in Enterprise Environments using Docker, Ansible and Jenkins
Continuous Delivery in Enterprise Environments using Docker, Ansible and Jenkins
 
Droidcon Nigeria 2021 - Still Sleeping on KMM?
Droidcon Nigeria 2021 - Still Sleeping on KMM? Droidcon Nigeria 2021 - Still Sleeping on KMM?
Droidcon Nigeria 2021 - Still Sleeping on KMM?
 

Viewers also liked

What I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberWhat I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberSara Raasch
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespaceLearningTech
 
Ember Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkEmber Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkMatthew Beale
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116Manuel Alvarez
 
Testing ember data transforms
Testing ember data transformsTesting ember data transforms
Testing ember data transformsSara Raasch
 
LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017Matthew Beale
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & GoalsBob Lail
 
Nest v. Flat with EmberData
Nest v. Flat with EmberDataNest v. Flat with EmberData
Nest v. Flat with EmberDataRyan M Harrison
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsLeo Hernandez
 
Ember.js the Second Step
Ember.js the Second StepEmber.js the Second Step
Ember.js the Second StepDopin Ninja
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjsMandy Pao
 
Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.jsgavinjoyce
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichMike North
 
Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.jsMatthew Beale
 
Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in EmberMatthew Beale
 
Presentation react
Presentation reactPresentation react
Presentation reactismnoiet
 

Viewers also liked (20)

What I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberWhat I learned in my First 9 months of Ember
What I learned in my First 9 months of Ember
 
Delivering with ember.js
Delivering with ember.jsDelivering with ember.js
Delivering with ember.js
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
 
Ember Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkEmber Community 2016 - Be the Bark
Ember Community 2016 - Be the Bark
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116
 
Masa Israel Programs Overview
Masa Israel Programs OverviewMasa Israel Programs Overview
Masa Israel Programs Overview
 
Testing ember data transforms
Testing ember data transformsTesting ember data transforms
Testing ember data transforms
 
LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & Goals
 
Nest v. Flat with EmberData
Nest v. Flat with EmberDataNest v. Flat with EmberData
Nest v. Flat with EmberData
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js
 
Ember.js the Second Step
Ember.js the Second StepEmber.js the Second Step
Ember.js the Second Step
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs
 
Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js Munich
 
Ember.js firebase HTML5 NYC
Ember.js firebase HTML5 NYCEmber.js firebase HTML5 NYC
Ember.js firebase HTML5 NYC
 
Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.js
 
Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in Ember
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
 
Presentation react
Presentation reactPresentation react
Presentation react
 

Similar to electron for emberists

Docker for Devs - John Zaccone, IBM
Docker for Devs - John Zaccone, IBMDocker for Devs - John Zaccone, IBM
Docker for Devs - John Zaccone, IBMDocker, Inc.
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberAlex Blom
 
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe Sencha
 
macOS Vulnerabilities Hiding in Plain Sight
macOS Vulnerabilities Hiding in Plain SightmacOS Vulnerabilities Hiding in Plain Sight
macOS Vulnerabilities Hiding in Plain SightCsaba Fitzl
 
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
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy VirinCocoaHeads France
 
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...Sencha
 
[OWASP Poland Day] A study of Electron security
[OWASP Poland Day] A study of Electron security[OWASP Poland Day] A study of Electron security
[OWASP Poland Day] A study of Electron securityOWASP
 
From development environments to production deployments with Docker, Compose,...
From development environments to production deployments with Docker, Compose,...From development environments to production deployments with Docker, Compose,...
From development environments to production deployments with Docker, Compose,...Jérôme Petazzoni
 
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?Albert Mietus
 
Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)DECK36
 
Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015Pavel Chunyayev
 
DSpace UI prototype dsember
DSpace UI prototype dsemberDSpace UI prototype dsember
DSpace UI prototype dsemberBram Luyten
 
FullStack London - Cloud Native Node.js
FullStack London - Cloud Native Node.jsFullStack London - Cloud Native Node.js
FullStack London - Cloud Native Node.jsBethany Nicolle Griggs
 
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWER
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWERContinuous Integration with Cloud Foundry Concourse and Docker on OpenPOWER
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWERIndrajit Poddar
 
DevOPS training - Day 2/2
DevOPS training - Day 2/2DevOPS training - Day 2/2
DevOPS training - Day 2/2Vincent Mercier
 
Enabling Hybrid Workflows with Docker/Mesos @Orbitz
Enabling Hybrid Workflows with Docker/Mesos @OrbitzEnabling Hybrid Workflows with Docker/Mesos @Orbitz
Enabling Hybrid Workflows with Docker/Mesos @OrbitzSteve Hoffman
 
Deliver Python Apps with Docker
Deliver Python Apps with DockerDeliver Python Apps with Docker
Deliver Python Apps with DockerAnton Egorov
 

Similar to electron for emberists (20)

Docker for Devs - John Zaccone, IBM
Docker for Devs - John Zaccone, IBMDocker for Devs - John Zaccone, IBM
Docker for Devs - John Zaccone, IBM
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
 
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
 
macOS Vulnerabilities Hiding in Plain Sight
macOS Vulnerabilities Hiding in Plain SightmacOS Vulnerabilities Hiding in Plain Sight
macOS Vulnerabilities Hiding in Plain Sight
 
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
 
Capistrano
CapistranoCapistrano
Capistrano
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy Virin
 
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
 
[OWASP Poland Day] A study of Electron security
[OWASP Poland Day] A study of Electron security[OWASP Poland Day] A study of Electron security
[OWASP Poland Day] A study of Electron security
 
From development environments to production deployments with Docker, Compose,...
From development environments to production deployments with Docker, Compose,...From development environments to production deployments with Docker, Compose,...
From development environments to production deployments with Docker, Compose,...
 
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?
 
Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)
 
Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015
 
DSpace UI prototype dsember
DSpace UI prototype dsemberDSpace UI prototype dsember
DSpace UI prototype dsember
 
Xamarin v.Now
Xamarin v.NowXamarin v.Now
Xamarin v.Now
 
FullStack London - Cloud Native Node.js
FullStack London - Cloud Native Node.jsFullStack London - Cloud Native Node.js
FullStack London - Cloud Native Node.js
 
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWER
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWERContinuous Integration with Cloud Foundry Concourse and Docker on OpenPOWER
Continuous Integration with Cloud Foundry Concourse and Docker on OpenPOWER
 
DevOPS training - Day 2/2
DevOPS training - Day 2/2DevOPS training - Day 2/2
DevOPS training - Day 2/2
 
Enabling Hybrid Workflows with Docker/Mesos @Orbitz
Enabling Hybrid Workflows with Docker/Mesos @OrbitzEnabling Hybrid Workflows with Docker/Mesos @Orbitz
Enabling Hybrid Workflows with Docker/Mesos @Orbitz
 
Deliver Python Apps with Docker
Deliver Python Apps with DockerDeliver Python Apps with Docker
Deliver Python Apps with Docker
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaWSO2
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingWSO2
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceIES VE
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxMarkSteadman7
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 

Recently uploaded (20)

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 

electron for emberists

  • 1. electron for emberists toronto ember.js meet up (mar 2 2017)
  • 2. © Isle of Code Inc.@anulman why write hybrid apps? • app store distribution • decouple a long-lived app from browser tabs • use system ui, like alerts & menu / task bars • use system resources, like fs & gpu 2
  • 3. © Isle of Code Inc.@anulman things we will learn • how do i build my ember app as a native desktop app? • intro to electron • disclaimers re: electron / hybrid • ember-electron • how does ember-electron (v2.0) work? • init • `ember electron` • `ember electron:package` [`:make`, `:publish`] • `ember electron:test` 3
  • 4. © Isle of Code Inc.@anulman things we will learn (cont’d) • how do i… • add global shortcut + dialogs? • config app icon? • config autoupdate? 4
  • 5. © Isle of Code Inc.@anulman btw hi i’m aidan • partner & polyglot @ isle of code • (we’re hiring for ~sr js dev + design-friendly int/jr dev!) • @anulman on twitter, github, etc • when not hacking, i’m: • on my bicycle • at a concert • making food 5
  • 6. how do i build my ember app as a native desktop app?
  • 7. © Isle of Code Inc.@anulman intro to electron • oss framework to compose cross-platform desktop apps from node.js apis + chromium windows • originally extracted from github’s atom editor • used by apps you use: • atom • slack • brave • ghost • whatsapp • visual studio code • gitkraken 7
  • 8. © Isle of Code Inc.@anulman intro to electron (cont’d) • offers simultaneous control of node.js & chromium runtimes • comes pre-packaged with js wrappers for several common host os apis: • system tray • autoupdate • keyboard shortcuts w/ & w/o focus • many pre-packaged js wrappers are available only in the node runtime / are sandboxed in chromium (renderer) procs 8
  • 9. © Isle of Code Inc.@anulman disclaimers re: electron / hybrid • “serves” via fs, so paths should not start with `/` • architecture should minimize platform-specific code • be careful! you have full privileges of host OS • e.g. remote code execution is hecka dangerous • memory leaks are a major issue, as no req / response cycle to refresh state: • unresolved / rejected promises • lingering refs to dom nodes… 9
  • 10. © Isle of Code Inc.@anulman ember-electron • use ember-cli to wrap electron workflows • 1.x used `electron` & `electron-packager` directly • 2.x uses `electron-forge`, i.e. e-cli for electron • provide electron-aware testing env • e.g. to test plugin consumption • h/t @felixrieseberg (slack + electron core) 10
  • 11. how does ember- electron (v2.0) work?
  • 12. © Isle of Code Inc.@anulman ember-electron init • `ember install ember-electron` • beta in use but not yet available via npm • install instructions at https://github.com/felixrieseberg/ember-electron/ issues/147 • `ember g ember-electron` • v1.x => v2.0 • introduces `ember-electron` dir • expects `electron-forge`-conformant package.json config • moves inspector to embedded chrome devtools, vs. remote via browser 12
  • 13. © Isle of Code Inc.@anulman `ember electron` • electron equivalent to `ember s` • builds app to `dist` & watches for live reload • `--output-dir` is configurable, in case of alternate path in electron.js • uses prebuilt & compiled electron bin to serve project via `electron-forge#start` • https://github.com/felixrieseberg/ember-electron/blob/ master/lib/commands/electron.js 13
  • 14. © Isle of Code Inc.@anulman `ember electron:package` • electron equivalent to `ember build` • inherits from generic e-electron build cmd, along w/ • `:make` — outputs distributables (.zip, .dmg, .deb) • `:publish` — publishes distributable to server • prepares build: • `ember build`s app to (configurable) tmp dir • copies additional files • req’d: .compilerc, package.json, electron.js • incls anything defined in `package.json[‘config’][‘ember-electron’][‘copy-files’]` • installs package.json deps • devDeps need not apply 14
  • 15. © Isle of Code Inc.@anulman `ember electron:package` (cont’d) • passes built tmp dir to forge commands • incl configurable `--out-dir` (defaults to `ember-electron/ out`) • cleans up tmp dir • to speed up: • `--skip-build` to cp dist dir as initial tmp build • `--skip-package` to skip all wrapping and proxy directly to forge 15
  • 16. © Isle of Code Inc.@anulman `ember electron:test` • equivalent to `ember test` • passes addl flags to `ember test` cmd + tasks to support electron envs • h/t @bendemboski 16
  • 17. © Isle of Code Inc.@anulman pending before release… • update baseURL / rootURL handling • presently: installs config/environment w/blueprint • proposed: check config for valid values when cmd called • proposed: use new `ember-electron/public` dir to copy files • presently: reads `packageJson[‘ember-electron’][‘copy-files’]` • proposal intended to simplify platform-specific reqs (e.g. `public/darwin`) • provide upgrade tooling, via `ember g ember-electron` or `:upgrade` • update test suite—2.0 gutted old commands • follow along at https://github.com/felixrieseberg/ember-electron/projects/2 17
  • 19. © Isle of Code Inc.@anulman add global shortcut + dialog? • shortcuts & dialogs are restricted to main proc • preference is to handle in `electron.js` • if handling in `BrowserWindow`: `require(‘electron’).remote.globalShortcut(…)` • dialogs have several types: • `showOpenDialog` • `showSaveDialog` • `showMessageBox` • `showErrorBox` 19
  • 20. © Isle of Code Inc.@anulman config app icon? • create icon files • mac: *.icns • win: *.ico • linux: *.png • add config to forge’s packager options (mac / win) • add `icon: ‘path/to/icon’` to `BrowserWindow` init in electron.js (linux) • omit extension to auto-configure ext by platform • n.b. diff shows icons in copy-files; this is only for linux handling 20
  • 21. © Isle of Code Inc.@anulman config autoupdate? • configure app signing: • mac: `osxSign` param of `electronPackagerConfig` • win: `electronWinstallerConfig` • make executable: • `ember electron:make` • landing ~2.1: `ember electron:publish` • forge currently ships with github & s3 publishers 21
  • 22. © Isle of Code Inc.@anulman config autoupdate? (cont’d, mac / win) • deploy & configure nuts server: https://github.com/GitbookIO/nuts • proxies & caches distributable assets • exposes api for e.g. • `/download/latest` • `/download/latest/:os` • `/download/:version` • in main proc, `electron.autoUpdater.checkForUpdates()` • n.b. this checks & downloads in one op • n.b. may want to check update availability manually if app is launched: recommendation is to `electron.autoUpdater.quitAndInstall()` immediately on `update-downloaded` event 22
  • 23. © Isle of Code Inc.@anulman config autoupdate? (cont’d, linux) • “autoupdates” are a bit more manual in linux-land • like mac / win, first create & publish distributable (e.g. to apt repo) • install updates manually, or automate via cron 23
  • 24. © Isle of Code Inc.@anulman tl;dr • electron is a popular and proven lib / framework to create hybrid desktop applications • ember-electron offers a painless cli integration • any system / server node module (e.g. fs) is available in electron processes • ember-electron 2.x is already the hotness 24
  • 25. © Isle of Code Inc.@anulman links • https://electron.atom.io • https://github.com/felixriesberg/ember-electron • https://github.com/electron-userland/electron-forge • https://blog.isleofcode.com/building-fully- functional-mac-pc-linux-apps-in-javascript-pt-1- intro-to-electron/ 25