My talk for the BrisJS meetup in May 2019 about Data-Forge Notebook, a cross-platform desktop application built with Electron. Data-Forge Notebook is a notebook-style application for data transformation, visualization and analysis in JavaScript and TypeScript. http://www.data-forge-notebook.com/

1. Data-Forge Notebook
A desktop app built with Electron
Ashley Davis
Email: ashley@codecapers.com.au
Twitter: ashleydavis75

2. Tonight’s talk
● Product demo
● Tech stuff
● App structure

3. About me
● 20+ years in industry
● Several years on startups
● My start up: CTO at Sortal
● Working on: Machine learning

4. Data Wrangling
with JavaScript

5. Who’s using
Electron
https://electronjs.org

6. My problem
“Why am I doing my data analysis in Python?
What I really want is to run this code in a
JavaScript production environment!”
- Ash, some time years ago

7. My mission
● Improve the data-related
capabilities of JavaScript
programmers

8. My journey
● Data-Forge / Data-Forge Plot
● Data Wrangling with JavaScript
● Data-Forge Notebook

9. Jupyter Notebook

10. Data-Forge
Notebook

11. Data-Forge
Notebook Features
● No configuration, no setup, no extra
installs
● Just start coding
● Runs your code in an embedded Node.js
● Supports JavaScript and TypeScript
● Automatically installs npm libraries that
you use
● Visualize JavaScript data types and
JSON
● Preview tabular data
● Render charts
● Render HTML
● Export code for production use
● Export to an interactive web page
● Capture to PNG, PDF and markdown

12. Demo time!

13. Tech stack ● Electron
○ Windows
○ Linux
○ MacOS
● UI: React
● Language: TypeScript
● Editing: Monaco Editor
● Charts: ApexCharts and C3
● Testing: Jest
● Building: shell scripts +
electron-builder

14. What is Electron?

15. Why Electron? ● Just because JavaScript
● Cross platform
● Leverage my web tech skills
● Native menus + integrations
● Easy to get started
● Easy to build an installer
● Good support, docs,
community, ecosystem
● Crash reporting
● Automatic updating

16. Anatomy of an
Electron app
Electron quick start
https://github.com/ashleydavis/electron-quick-start

17. Anatomy of an
Electron app

18. Anatomy of an
Electron app

19. Anatomy of an
Electron app

20. Problems
● Cross platform issues
● Browser + Node.js
● File system issues
● Automated UI testing
● Bundle size

21. Platform-specific
code
const os = require('os');
const isMacOS = os.platform() === "darwin";
if (isMacOS) {
// Something different for MacOS.
}
else {
// Running on Windows or Linux.
}

22. Using the original
fs
const originalFs = require('original-fs');

23. Charting abstraction

24. Application
structure

25. Data-Forge
Notebook
Early access
program
Data Wrangling with JavaScript
DavisBrb40
40% discount
http://bit.ly/2t2cJu2
Data-Forge Notebook
brisjsmay19
60% discount
www.data-forge-notebook.com

26. Resources
Email:
ashley@codecapers.com.
au
Twitter:
ashleydavis75
Data-Forge Notebook
http://www.data-forge-notebook.com/
Data-Forge
http://data-forge-js.com/
Electron
https://electronjs.org
API demos
https://github.com/electron/electron-api-demos
Electron Fiddle
https://electronjs.org/fiddle
Quick start
https://github.com/ashleydavis/electron-quick-start
React + TypeScript + Electron
https://github.com/ashleydavis/electron-react-typescript-template