Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fenster überall: Desktopanwendungen mit Angular...
Search
Fabian Gosebrink
September 28, 2017
Technology
0
92
Fenster überall: Desktopanwendungen mit Angular und Electron
Slides for my talk about Angular and Electron at the BASTA! in Mainz
Fabian Gosebrink
September 28, 2017
Tweet
Share
More Decks by Fabian Gosebrink
See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
fabiangosebrink
0
33
Angular testing made easy with Jest and Cypress
fabiangosebrink
0
74
Introducing state management into an application with NgRx
fabiangosebrink
0
110
Scalable architectures in Angular with Nx
fabiangosebrink
0
97
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
200
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
130
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
310
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
95
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
94
Other Decks in Technology
See All in Technology
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
320
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
220
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
エンジニア向け技術スタック情報
kauche
1
270
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
It's Worth the Effort
3n
185
28k
Docker and Python
trallard
44
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
220
A better future with KSS
kneath
239
17k
Designing Experiences People Love
moore
142
24k
Transcript
Desktop applications with Angular & Electron
Fabian Gosebrink
https://media.giphy.com/media/VTxmwaCEwSlZm/200.gif
@FabianGosebrink
None
Desktop applications with
Desktops?
None
Desktops!
None
None
What is
"Electron is a tool for building Cross- Platform Desktop Apps
with Javascript, Html and CSS" Anybody I don’t know when
http://www.tvmovie.de/assets/2015/10/23/53910-romeo-und-julia-serien-fortsetzung.jpg
None
None
None
None
None
None
… and many more
None
None
> npm install electron -g
> electron .
package.json
package.json { "version": "1.0.0", "name": "first-one", "main": "index.js", "scripts": {
"start": "electron ." } }
index.js
index.js const { app, BrowserWindow } = require('electron'); let mainWindow
= null; app.on('ready', () => { mainWindow = new BrowserWindow({ width: 1024, height: 768 }); mainWindow.loadURL('file://' + __dirname + '/index.html'); });
index.html
None
Main Process vs Render Process
None
Communication
IPC
renderer.js
index.js
Notifications
renderer.js
None
Demo
None
None
None
None
None
None
index.js
index.js let startSendCpuValues = () => { setInterval(() => {
cpuValues.getCPUUsage((percentage) => { if (mainWindow) { mainWindow.webContents .send('newCpuValue', (percentage * 100).toFixed(2)); } }); }, 1000); }
> npm install ngx-electron
service.ts
“Cross-Platform? What about variation points?"
Dependency Injection
None
None
None
None
None
None
Tr ay Icon
index.js
None
> npm install electron-packager -g
> electron-packager .temp/desktop
> electron-packager .temp/desktop --platform=linux, win32
Demo
One Code every platform
One Codebase every platform
None
https://github.com/FabianGosebrink/Basta-2017 https://offering.solutions https://swissangular.com @FabianGosebrink
https://speakerdeck.com/zeke/electron-universe https://electron.atom.io/ https://electron.atom.io/docs/tutorial/quick-start/ https://github.com/maximegris/angular-electron/blob/master/src/app/providers/electron.service.ts https://github.com/sindresorhus/awesome-electron