Electron.js – wstęp, co to jest?
Electron.js to platforma programistyczna która pozwala pisać aplikacje desktopowe z użyciem technologii znanych z front-endu. Możemy więc pisać aplikacje desktopowe z użyciem języka JavaScript, wykorzystując technologie takie jak: React, Vue, Node.js oraz wielu innych. Zacytuje fragment z dokumentacji:
„Electron jest otwartoźródłową biblioteką, stworzoną przez GitHub, aby umożliwić tworzenie multiplatformowych aplikacji z użyciem języków HTML, CSS oraz JavaScript. Electron osiąga to łącząc Chromium oraz Node.js w jednolite środowisko uruchomieniowe, którego aplikacje mogą być wydawane na MacOS, Windows oraz Linux.”
Z technologii tej korzystają takie aplikacje jak: Atom (edytor od Githuba), Discord (komunikator), Skype (komunikator), WhatsApp (komunikator), pełną listę możecie znaleźć tutaj.
Początek – jak zacząć?
Rozpoczynając projekt electron.js najlepiej użyć gotowego starter packa (lista boilerplate’ów). Wybór jest naprawdę duży – to tylko oficjalne templatki, na githubie znajdziecie dużo więcej przykładów stworzonych przez społeczność. Wybór jest naprawdę szeroki od bardzo rozbudowanych przykładowych aplikacji zawierających React, Redux, React-Router i Webpacka (electron-react-boilerplate) po podstawowe i czyste projekty zawierające niezbędne minimum.
Na początek zacznijmy od czystego projektu. Ściągamy git clone https://github.com/electron/electron-quick-start
Wchodzimy do katalogu i instalujemy zależności yarn install lub npm install następnie uruchamiamy projekt yarn start.
Projekt składa się z 3 głównych plików:
- package.json – Zbiór potrzebnych zależności do projektu i skryptów NPM/YARN.
- index.html – Electron.js serwuje ten plik jako główne okno naszej aplikacji. Jest to punkt podłączenia naszych skryptów JS
- main.js – Plik konfiguracyjny dla Electron.js. To tutaj serwowany jest statyczny plik html. Tutaj możemy modyfikować główne elementy aplikacji Electon np. wyswietlanie konsoli debugowania, poczatkowy rozmiar okna itp.
Pierwszy program
Utwórzmy katalog src/ – tutaj będziemy trzymać nasz kod źródłowy. W pliku html natomiast utwórzmy element o id=”root” do niego podepniemy naszą aplikacje. Poniżej kod z index.html
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Game in marbles</title></head><body><div id="root"></div><script>require('./src/app.js')</script></body></html>Teraz utwórzmy plik app.js w src/ i napiszmy proste „Hello World”.
document.getElementById('root').innerHTML = "Hello World";yarn run) powinien pojawić się napis „Hello World”.Piszemy grę w kulki
Konfiguracja projektu pod ES6
Niestety rozwój języka wyprzedza obecne możliwości przeglądarek i środowiska Node.js. Żeby używać najnowszej składni ES6+ powinniśmy użyć narzędzia które przetranspiluje nam kod w ES6 do starszej wersji języka. W tym celu wykorzystamy Webpacka.
Obecnie zaleca sie korzystanie z modułu babel-preset-env my jednak wykorzystamy trochę starszy sposób. Miałem problemy z konfiguracją Webpacka i preset-env – jedna paczka usuwała drugą. Dlatego zainstalujmy sobie potrzebne zależności. Do pliku package.json dodajcie poniższe zależności:
"devDependencies": {"babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-plugin-transform-runtime": "^6.23.0","babel-polyfill": "^6.23.0","babel-preset-es2015": "^6.24.1","babel-preset-es2016": "^6.24.1","babel-preset-es2017": "^6.24.1","electron": "^2.0.0","webpack": "^3.5.5","webpack-node-externals": "^1.6.0"}"scripts": {"start": "electron .","build-client": "webpack --config webpack.config.js","build:watch": ".\\node_modules\\.bin\\webpack --config webpack.config.js --watch"},Została nam jeszcze konfiguracja webpacka, w katalogu projektu utwórz plik webpack.config.js z poniższym kodem:
const webpack = require('webpack');const path = require('path');const nodeExternals = require('webpack-node-externals');const config = {entry:'./src/app.js',output: {path:path.resolve(__dirname, 'dist'),filename:'app.bundle.js'},devtool:'#source-map',module: {rules: [{test: /\.js$/,include:path.resolve(__dirname, 'src/'),exclude:'/node_modules/',loader:'babel-loader',query: {presets: ['es2015', 'es2016', 'es2017']}}]}};module.exports = config;
