Electron Adventures (101 Part Series)
1 Electron Adventures: Episode 1: Creating New Electron App
2 Electron Adventures: Episode 2: Frontend Code and Backend Code
… 97 more parts…
3 Electron Adventures: Episode 3: What Can Backend Code Even Do?
4 Electron Adventures: Episode 4: Image Gallery with Dynamic HTML
5 Electron Adventures: Episode 5: Display Free Disk Space
6 Electron Adventures: Episode 6: Use D3 To Visualize Free Disk Space
7 Electron Adventures: Episode 7: Visualize Free Disk Space In Terminal
8 Electron Adventures: Episode 8: Terminal App Styling
9 Electron Adventures: Episode 9: Terminal App
10 Electron Adventures: Episode 10: Preload Script
11 Electron Adventures: Episode 11: jQuery
12 Electron Adventures: Episode 12: Google Fonts for our Terminal
13 Electron Adventures: Episode 13: Svelte
14 Electron Adventures: Episode 14: React
15 Electron Adventures: Episode 15: Async Command Execution
16 Electron Adventures: Episode 16: Streaming Terminal Output
17 Electron Adventures: Episode 17: Terminal Input
18 Electron Adventures: Episode 18: Sending Data To Backend
19 Electron Adventures: Episode 19: Sending Data To Frontend
20 Electron Adventures: Episode 20: IPC Benchmark
21 Electron Adventures: Episode 21: File Manager
22 Electron Adventures: Episode 22: File Manager in React
23 Electron Adventures: Episode 23: Display Information about Files
24 Electron Adventures: Episode 24: Unit Testing Electron
25 Electron Adventures: Episode 25: Orthodox File Manager Styling
26 Electron Adventures: Episode 26: Svelte Orthodox File Manager
27 Electron Adventures: Episode 27: File Manager Keyboard Controls
28 Electron Adventures: Episode 28: Vue
29 Electron Adventures: Episode 29: Vue Orthodox File Manager
30 Electron Adventures: Episode 30: File Manager: Now With Actual Files
31 Electron Adventures: Episode 31: Scrolling
32 Electron Adventures: Episode 32: Navigating Between Directories
33 Electron Adventures: Episode 33: Event Routing
34 Electron Adventures: Episode 34: Application Menu
35 Electron Adventures: Episode 35: Command Palette
36 Electron Adventures: Episode 36: File Manager Event Bus
37 Electron Adventures: Episode 37: File Manager Command Palette
38 Electron Adventures: Episode 38: Command Palette Highlighting
39 Electron Adventures: Episode 39: Keyboard Shortcut Modifier Keys
40 Electron Adventures: Episode 40: Event Bus API with ES6 Proxies
41 Electron Adventures: Episode 41: Marko
42 Electron Adventures: Episode 42: Marko File Manager
43 Electron Adventures: Episode 43: File Types
44 Electron Adventures: Episode 44: File Icons
45 Electron Adventures: Episode 45: Viewing Files
46 Electron Adventures: Episode 46: Viewing Files Internally
47 Electron Adventures: Episode 47: Context Dependent Keyboard Handling
48 Electron Adventures: Episode 48: path-browserify
49 Electron Adventures: Episode 49: Mkdir Dialog
50 Electron Adventures: Episode 50: Refresh
51 Electron Adventures: Episode 51: Deleting Files
52 Electron Adventures: Episode 52: Displaying Error Messages
53 Electron Adventures: Episode 53: Jupyter Style Notebook
54 Electron Adventures: Episode 54: Notebook state management with useImmer
55 Electron Adventures: Episode 55: Ruby Language Server
56 Electron Adventures: Episode 56: Notebook Ruby HTTP Backend
57 Electron Adventures: Episode 57: Notebook Python HTTP Backend
58 Electron Adventures: Episode 58: Notebook Ruby Engine
59 Electron Adventures: Episode 59: Notebook Python Engine
60 Electron Adventures: Episode 60: Notebook Perl Engine
61 Electron Adventures: Episode 61: Hex Editor
62 Electron Adventures: Episode 62: Hex Editor Displaying Data
63 Electron Adventures: Episode 63: Hex Editor Data Decoding
64 Electron Adventures: Episode 64: Measuring Performance
65 Electron Adventures: Episode 65: Improving Performance
66 Electron Adventures: Episode 66: Dynamic Rendering
67 Electron Adventures: Episode 67: Malina
68 Electron Adventures: Episode 68: Malina Hex Editor
69 Electron Adventures: Episode 69: Opening Files
70 Electron Adventures: Episode 70: CoffeeScript
71 Electron Adventures: Episode 71: CoffeeScript Phaser Game
72 Electron Adventures: Episode 72: NW.js
73 Electron Adventures: Episode 73: NW.js Terminal App
74 Electron Adventures: Episode 74: Neutralino
75 Electron Adventures: Episode 75: NodeGui React
76 Electron Adventures: Episode 76: NodeGui React Terminal App
77 Electron Adventures: Episode 77: Cookie Clicker Game
78 Electron Adventures: Episode 78: Cookie Clicker Game Packaging
79 Electron Adventures: Episode 79: Svelte Unicodizer
80 Electron Adventures: Episode 80: Svelte Unicodizer Package
81 Electron Adventures: Episode 81: Ideas That Did Not Work
82 Electron Adventures: Episode 82: Glimmer DSL
83 Electron Adventures: Episode 83: JRubyFX
84 Electron Adventures: Episode 84: High Performance Hex Editor
85 Electron Adventures: Episode 85: Roulette Wheel
86 Electron Adventures: Episode 86: Remembering User Preferences
87 Electron Adventures: Episode 87: Svelte Drag and Drop Chess Board
88 Electron Adventures: Episode 88: Svelte CSV Viewer
89 Electron Adventures: Episode 89: Remembering Document Preferences
90 Electron Adventures: Episode 90: Dock Menu
91 Electron Adventures: Episode 91: Application Logs
92 Electron Adventures: Episode 92: Dock Drag and Drop
93 Electron Adventures: Episode 93: Opal Ruby
94 Electron Adventures: Episode 94: Opal Ruby Terminal App
95 Electron Adventures: Episode 95: Pywebview
96 Electron Adventures: Episode 96: Pywebview Terminal App
97 Electron Adventures: Episode 97: Ferrum and Chrome DevTools Protocol
98 Electron Adventures: Episode 98: Ferrum Sinatra Terminal App
99 Electron Adventures: Episode 99: Should You Use Electron?
100 Electron Adventures: Episode 100: Series Retrospective
101 Electron Adventures: Bonus Episode 101: Python Eel
In the previous episode we tried JRuby with SWT, and it was bad. Well, the Java world knows it’s bad and replaced SWT with JavaFX, so let’s give it a go.
Unfortunate beginnings
First set .ruby_version
to JRuby:
jruby-9.3.1.0
Enter fullscreen mode Exit fullscreen mode
And Gemfile
to use jrubyfx
:
source "https://rubygems.org"
gem "jrubyfx", "~> 1.2"
Enter fullscreen mode Exit fullscreen mode
Now trying Hello World from the docs, and we get:
JavaFX runtime not found. Please install Java 7u6 or newer or set environment variable JFX_DIR to the folder that contains jfxrt.jar
If you have Java 7u6 or later, this is a bug. Please report to the issue tracker on github. Include your OS version, 32/64bit, and architecture (x86, ARM, PPC, etc)
Enter fullscreen mode Exit fullscreen mode
Well, judging by Github Issues, it’s been a bug since February 2019, so it’s not a very promising start.
After some investigation, JavaFX was originally included as part of Oracle JDK, but then Oracle JDK moved it out. And other Java implementations, including one used by OSX, just never included it.
So we just jpm install javafx
and… just joking, Java has nothing like npm
or gem
.
Even worse, Java developer community is awful and instead of telling you “curl this URL and run this command” or even “click this link to download the package”, they just say “install it”, and expect you to figure out which one of 100 versions is supposed to work. And they treat users the same way, not just developers. Pretty much every other language’s community handles this better.
Using old Java
So I checked on an old Mac, and it had old an Oracle Java instaled.
Well, export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_45.jdk/Contents/Home/
and let’s continue there.
Hello, World!
Here’s a hello world program:
#!/usr/bin/env ruby
require "jrubyfx"
class HelloWorld < JRubyFX::Application
def start(stage)
with(stage, width: 300, height: 300, title: "Hello, World!") do
layout_scene do
label("Hello, World!")
end
show
end
end
end
HelloWorld.launch
Enter fullscreen mode Exit fullscreen mode
Counter
And here’s a counter app. There’s no builtin reactivity, so we need to manually update the UI whenever we update the state.
#!/usr/bin/env ruby
require "jrubyfx"
class Counter < JRubyFX::Application
def start(stage)
count = 0
with(stage, width: 300, height: 300, title: "Counter App") do
layout_scene do
vbox do
count_label = label("Count: #{count}")
hbox do
button("+1").set_on_action {
count += 1
count_label.text = "Count: #{count}"
}
button("-1").set_on_action {
count -= 1
count_label.text = "Count: #{count}"
}
end
end
end
show
end
end
end
Counter.launch
Enter fullscreen mode Exit fullscreen mode
Results
In case it’s not obvious yet, do not use any of this. While the UI was slightly better than SWT, and the label text resized correctly, it’s really nowhere near what we expect from a modern UI framework, and the Java ecosystem you’d need to get into is a godforsaken mess.
Having tried so many Electron alternatives, I’d say NodeGui was the only one that wasn’t absolute garbage, and even there you pay a big cost for abandoning the familiar world of HTML+CSS.
So in the next episode, let’s just write something in Electron again!
As usual, all the code for the episode is here.
Electron Adventures (101 Part Series)
1 Electron Adventures: Episode 1: Creating New Electron App
2 Electron Adventures: Episode 2: Frontend Code and Backend Code
… 97 more parts…
3 Electron Adventures: Episode 3: What Can Backend Code Even Do?
4 Electron Adventures: Episode 4: Image Gallery with Dynamic HTML
5 Electron Adventures: Episode 5: Display Free Disk Space
6 Electron Adventures: Episode 6: Use D3 To Visualize Free Disk Space
7 Electron Adventures: Episode 7: Visualize Free Disk Space In Terminal
8 Electron Adventures: Episode 8: Terminal App Styling
9 Electron Adventures: Episode 9: Terminal App
10 Electron Adventures: Episode 10: Preload Script
11 Electron Adventures: Episode 11: jQuery
12 Electron Adventures: Episode 12: Google Fonts for our Terminal
13 Electron Adventures: Episode 13: Svelte
14 Electron Adventures: Episode 14: React
15 Electron Adventures: Episode 15: Async Command Execution
16 Electron Adventures: Episode 16: Streaming Terminal Output
17 Electron Adventures: Episode 17: Terminal Input
18 Electron Adventures: Episode 18: Sending Data To Backend
19 Electron Adventures: Episode 19: Sending Data To Frontend
20 Electron Adventures: Episode 20: IPC Benchmark
21 Electron Adventures: Episode 21: File Manager
22 Electron Adventures: Episode 22: File Manager in React
23 Electron Adventures: Episode 23: Display Information about Files
24 Electron Adventures: Episode 24: Unit Testing Electron
25 Electron Adventures: Episode 25: Orthodox File Manager Styling
26 Electron Adventures: Episode 26: Svelte Orthodox File Manager
27 Electron Adventures: Episode 27: File Manager Keyboard Controls
28 Electron Adventures: Episode 28: Vue
29 Electron Adventures: Episode 29: Vue Orthodox File Manager
30 Electron Adventures: Episode 30: File Manager: Now With Actual Files
31 Electron Adventures: Episode 31: Scrolling
32 Electron Adventures: Episode 32: Navigating Between Directories
33 Electron Adventures: Episode 33: Event Routing
34 Electron Adventures: Episode 34: Application Menu
35 Electron Adventures: Episode 35: Command Palette
36 Electron Adventures: Episode 36: File Manager Event Bus
37 Electron Adventures: Episode 37: File Manager Command Palette
38 Electron Adventures: Episode 38: Command Palette Highlighting
39 Electron Adventures: Episode 39: Keyboard Shortcut Modifier Keys
40 Electron Adventures: Episode 40: Event Bus API with ES6 Proxies
41 Electron Adventures: Episode 41: Marko
42 Electron Adventures: Episode 42: Marko File Manager
43 Electron Adventures: Episode 43: File Types
44 Electron Adventures: Episode 44: File Icons
45 Electron Adventures: Episode 45: Viewing Files
46 Electron Adventures: Episode 46: Viewing Files Internally
47 Electron Adventures: Episode 47: Context Dependent Keyboard Handling
48 Electron Adventures: Episode 48: path-browserify
49 Electron Adventures: Episode 49: Mkdir Dialog
50 Electron Adventures: Episode 50: Refresh
51 Electron Adventures: Episode 51: Deleting Files
52 Electron Adventures: Episode 52: Displaying Error Messages
53 Electron Adventures: Episode 53: Jupyter Style Notebook
54 Electron Adventures: Episode 54: Notebook state management with useImmer
55 Electron Adventures: Episode 55: Ruby Language Server
56 Electron Adventures: Episode 56: Notebook Ruby HTTP Backend
57 Electron Adventures: Episode 57: Notebook Python HTTP Backend
58 Electron Adventures: Episode 58: Notebook Ruby Engine
59 Electron Adventures: Episode 59: Notebook Python Engine
60 Electron Adventures: Episode 60: Notebook Perl Engine
61 Electron Adventures: Episode 61: Hex Editor
62 Electron Adventures: Episode 62: Hex Editor Displaying Data
63 Electron Adventures: Episode 63: Hex Editor Data Decoding
64 Electron Adventures: Episode 64: Measuring Performance
65 Electron Adventures: Episode 65: Improving Performance
66 Electron Adventures: Episode 66: Dynamic Rendering
67 Electron Adventures: Episode 67: Malina
68 Electron Adventures: Episode 68: Malina Hex Editor
69 Electron Adventures: Episode 69: Opening Files
70 Electron Adventures: Episode 70: CoffeeScript
71 Electron Adventures: Episode 71: CoffeeScript Phaser Game
72 Electron Adventures: Episode 72: NW.js
73 Electron Adventures: Episode 73: NW.js Terminal App
74 Electron Adventures: Episode 74: Neutralino
75 Electron Adventures: Episode 75: NodeGui React
76 Electron Adventures: Episode 76: NodeGui React Terminal App
77 Electron Adventures: Episode 77: Cookie Clicker Game
78 Electron Adventures: Episode 78: Cookie Clicker Game Packaging
79 Electron Adventures: Episode 79: Svelte Unicodizer
80 Electron Adventures: Episode 80: Svelte Unicodizer Package
81 Electron Adventures: Episode 81: Ideas That Did Not Work
82 Electron Adventures: Episode 82: Glimmer DSL
83 Electron Adventures: Episode 83: JRubyFX
84 Electron Adventures: Episode 84: High Performance Hex Editor
85 Electron Adventures: Episode 85: Roulette Wheel
86 Electron Adventures: Episode 86: Remembering User Preferences
87 Electron Adventures: Episode 87: Svelte Drag and Drop Chess Board
88 Electron Adventures: Episode 88: Svelte CSV Viewer
89 Electron Adventures: Episode 89: Remembering Document Preferences
90 Electron Adventures: Episode 90: Dock Menu
91 Electron Adventures: Episode 91: Application Logs
92 Electron Adventures: Episode 92: Dock Drag and Drop
93 Electron Adventures: Episode 93: Opal Ruby
94 Electron Adventures: Episode 94: Opal Ruby Terminal App
95 Electron Adventures: Episode 95: Pywebview
96 Electron Adventures: Episode 96: Pywebview Terminal App
97 Electron Adventures: Episode 97: Ferrum and Chrome DevTools Protocol
98 Electron Adventures: Episode 98: Ferrum Sinatra Terminal App
99 Electron Adventures: Episode 99: Should You Use Electron?
100 Electron Adventures: Episode 100: Series Retrospective
101 Electron Adventures: Bonus Episode 101: Python Eel
暂无评论内容