JavaScript to jeden z najczęściej wykorzystywanych języków programowania. Jego uniwersalność, umożliwiająca tworzenie zarówno warstwy interfejsu użytkownika, jak i logiki serwerowej, sprawia, że cieszy się on dużą popularnością wśród programistów.
JavaScript oferuje szeroki wybór bibliotek i frameworków, które znacząco rozszerzają jego możliwości, wykraczając poza standardowe zastosowania.
Electron.js to potężna, otwartoźródłowa platforma, która umożliwia twórcom stron internetowych projektowanie natywnych aplikacji desktopowych, wykorzystując ich dotychczasowe umiejętności. W niniejszym artykule zgłębimy tajniki Electron.js oraz dowiemy się, jak wykorzystać jego potencjał w realizacji nowatorskich projektów.
Czym jest Electron JS?
Electron JS to framework, za pomocą którego programiści mogą tworzyć aplikacje desktopowe, wykorzystując znane technologie internetowe, takie jak HTML, CSS i JavaScript. Za jego stworzenie i ciągły rozwój odpowiada GitHub.
Framework ten łączy w sobie Node.JS i Chromium, co pozwala na utrzymywanie jednej bazy kodu JavaScript i tworzenie aplikacji działających na różnych platformach, w tym Windows, macOS i Linux.
Historia Electron.js sięga stycznia 2013 roku. Pierwotnym celem było stworzenie wieloplatformowego edytora tekstu, który mógłby wykorzystywać potencjał JavaScript, HTML i CSS.
Początkowo projekt ten nosił nazwę Atom Shell, a w 2014 roku stał się oprogramowaniem open source. W kwietniu 2015 roku projekt przemianowano na Electron, a jego pierwsze API udostępniono w roku 2016.
Kluczowe cechy Electron JS
- Kompatybilność z bibliotekami i frameworkami JavaScript. Electron JS bezproblemowo współpracuje z popularnymi frameworkami, takimi jak Vue.js, Angular czy React.js. Ta kompatybilność ułatwia wykorzystanie bogatej funkcjonalności tych narzędzi podczas tworzenia aplikacji Electron.
- Uniwersalność kodu. Electron JS umożliwia ponowne wykorzystanie tego samego kodu zarówno w aplikacjach webowych, jak i desktopowych. Taka elastyczność pozwala na oszczędność kosztów i czasu. Dodatkowo ten sam kod może być stosowany w różnych systemach operacyjnych.
- Dostęp do natywnych API. Deweloperzy korzystający z Electron JS mają bezpośredni dostęp do natywnych interfejsów API systemów operacyjnych, co umożliwia tworzenie aplikacji z funkcjonalnościami niskiego poziomu, takimi jak na przykład wyświetlanie powiadomień.
- Wykorzystanie technologii internetowych. Electron JS pozwala na tworzenie aplikacji bez konieczności nauki nowego języka programowania. Wystarczy znajomość technologii internetowych, takich jak HTML, CSS i JavaScript.
- Łatwe zarządzanie kodem. Nie jest konieczne utrzymywanie odrębnych zespołów do zarządzania aplikacjami dla różnych systemów operacyjnych. Electron JS umożliwia utrzymanie jednej bazy kodu dla systemów Linux, Windows i macOS.
- Proste budowanie i wdrażanie. Electron oferuje menedżera pakietów, który ułatwia programistom pakowanie aplikacji w odpowiednie formaty. Dzięki temu, można stworzyć aplikację na systemy Linux, Mac i Windows, używając tego samego kodu bazowego.
Architektura Electron JS
Architektura Electrona jest zbliżona do architektury nowoczesnych przeglądarek internetowych, ponieważ bazuje na wieloprocesowej architekturze Chromium.
Na architekturę Electron składają się: V8 JavaScript Engine, Node.JS i Libchromiumcontent.
- Node.JS – otwarte środowisko uruchomieniowe JavaScript oparte na silniku JavaScript V8. Node.JS umożliwia programistom uruchamianie JavaScript poza przeglądarką internetową. Umożliwia także wykonywanie kodu JavaScript za pomocą interaktywnej powłoki.
- Libchromiumcontent — otwarta biblioteka renderująca Chromium, która jest wspierana przez Google Chrome. Chrome charakteryzuje się minimalistycznym interfejsem użytkownika i wykorzystuje silnik Blink jako silnik układu oraz V8 jako silnik JavaScript.
- V8 JavaScript Engine – otwarty silnik JavaScript napisany w C++ i JavaScript, rozwijany przez firmę Google.
#1. Node.js
Aby zacząć korzystać z Electron JS, konieczne jest zainstalowanie Node.js na komputerze lokalnym.
Wybierz wersję Node.js odpowiednią dla systemu operacyjnego zainstalowanego na Twoim komputerze.
Aby upewnić się, że Node.js został poprawnie zainstalowany, uruchom następujące polecenia:
node -v
npm -v
Jeśli instalacja przebiegła pomyślnie, polecenia te wyświetlą wersję Node.js oraz npm.
#2. Wiersz poleceń
Sposób uzyskania dostępu do wiersza poleceń różni się w zależności od systemu operacyjnego.
- Linux: sposób dostępu zależy od używanej dystrybucji.
- Windows: PowerShell lub Wiersz poleceń.
- macOS: Terminal.
Niektóre edytory kodu, takie jak Visual Studio Code, posiadają wbudowany terminal.
#3. Edytor kodu
Edytor kodu jest niezbędny do pisania kodu Electron JS. Visual Studio Code to jeden z najlepszych wyborów.
Jak zainstalować Electron JS
Krok 1: Utwórz projekt Node.js.
Użyj tych poleceń, aby rozpocząć:
mkdir my-electron-app && cd my-electron-app
npm init
Polecenie `npm init` poprosi o podanie danych, takich jak nazwa aplikacji, punkt wejścia i opis.
Możesz przyjąć nazwę folderu jako nazwę aplikacji. Pamiętaj, aby jako punkt wejścia aplikacji ustawić plik `main.js`.
Pola takie jak autor i opis mogą przyjąć dowolną wartość. Plik `package.json` po wykonaniu tych kroków powinien wyglądać mniej więcej tak:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Krok 2: Zainstaluj Electron
Użyj tego polecenia:
npm install --save-dev electron
Krok 3: Dodaj polecenie „start” do pliku `package.json`
{
"scripts": {
"start": "electron ."
}
}
Krok 4: Uruchom aplikację
Użyj tego polecenia, aby uruchomić aplikację w trybie programistycznym:
npm start
Proces roboczy Electron JS
Będziemy kontynuować budowę aplikacji na podstawie konfiguracji, którą wykonaliśmy powyżej. Aplikacja Electron składa się z dwóch rodzajów procesów: głównego i renderującego.
Główny proces
Główny skrypt jest punktem wejścia każdej aplikacji Electron. Aplikacja działa w pełnym środowisku Node.js. Electron wyszukuje główny skrypt w pliku `package.json`, który został wcześniej skonfigurowany.
Utwórz plik `main.js` w folderze głównym, aby zainicjować główny skrypt. Możesz to zrobić ręcznie lub za pomocą polecenia:
touch main.js
Dodaj następujący kod do pliku `main.js`:
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Strony internetowe w Electron można ładować z adresu URL lub lokalnego pliku HTML. W celach demonstracyjnych użyjemy lokalnego pliku HTML.
Utwórz plik `index.html` w folderze głównym. Poniżej znajduje się przykładowy kod pliku `index.html`:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
Proces renderowania
Proces renderowania odpowiada za wyświetlanie treści internetowej. Skrypty ładowania początkowego zawierają kod wykonywany w procesie renderowania przed załadowaniem treści strony internetowej.
Utwórz plik `preload.js` w folderze głównym i dodaj następujący kod:
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Uruchom serwer programistyczny za pomocą `npm start`, a zobaczysz wynik działania aplikacji.
Przykłady aplikacji: Electron JS
#1. Aplikacja desktopowa Slack
Slack to popularne narzędzie do zdalnej współpracy, umożliwiające użytkownikom wysyłanie wiadomości, prowadzenie rozmów i udostępnianie plików. Slack oferuje zarówno aplikację internetową, jak i desktopowe aplikacje dla systemów operacyjnych Mac, Linux i Windows. Aplikacja desktopowa Slacka wykorzystuje silnik Chromium i Node.js do wyświetlania kodu.
#2. Aplikacja desktopowa WordPress
WordPress to najpopularniejszy system zarządzania treścią. Jego dostępność i możliwość tworzenia stron internetowych bez specjalistycznej wiedzy zyskała szerokie grono użytkowników. Do WordPressa można uzyskać dostęp przez przeglądarkę, a także za pośrednictwem aplikacji desktopowych dla systemów Mac, Linux i Windows. Odświeżony pulpit WordPress wykorzystuje Electron JS.
#3. Aplikacja desktopowa WhatsApp
WhatsApp to jedna z najpopularniejszych aplikacji do przesyłania wiadomości, z której korzysta ponad 2 miliardy osób na całym świecie. WhatsApp został pierwotnie zaprojektowany jako aplikacja mobilna, ale z czasem stał się dostępny na różnych urządzeniach. Wersja desktopowa WhatsApp wykorzystuje Electron JS i jest dostępna w popularnych systemach operacyjnych.
#4. Visual Studio Code
Visual Studio Code, stworzony przez Microsoft, to jeden z najpopularniejszych edytorów kodu. Visual Studio Code obsługuje HTML, CSS oraz kod napisany w różnych językach programowania, takich jak JavaScript, Python, PHP, Java i Ruby. Aplikacja desktopowa, oparta na Electron JS, jest dostępna dla systemów Windows, Mac i Linux.
Zasoby edukacyjne: Electron JS
#1. Oficjalna dokumentacja Electronjs
Dokumentacja Electronjs jest tworzona i utrzymywana przez Electronjs.org. Znajdziesz tam informacje o tym, czym jest Electron JS, jak skonfigurować pierwszą aplikację Electron i jak tworzyć aplikacje desktopowe na różne platformy. Dokumentacja jest regularnie aktualizowana o nowe funkcje i ulepszenia.
#2. Master Electron: Aplikacje desktopowe z HTML, JavaScript i CSS
Master Electron to płatny kurs na Udemy, który wprowadza w tajniki Electron JS. Nauczysz się, jak tworzyć aplikacje desktopowe na systemy Mac, Linux i Windows. Master Electron to również świetne źródło wiedzy na temat procesu Electron API.
#3. Samouczek Electron React
Electron React to płatny kurs na Udemy, który uczy programistów, jak tworzyć aplikacje Electron z wykorzystaniem React.js. React to popularna biblioteka JavaScript stworzona przez firmę Meta (wcześniej Facebook).
Podsumowanie
Electron JS to doskonała biblioteka JavaScript do tworzenia aplikacji desktopowych w świecie, gdzie aplikacje muszą być dostępne na różnych platformach. Możliwość wykorzystania HTML, CSS i JavaScript sprawia, że programiści nie muszą uczyć się nowych technologii, by tworzyć takie aplikacje. Duża i zaangażowana społeczność jest dodatkowym atutem, zapewniającym wsparcie w razie potrzeby.
Warto również zapoznać się z najlepszymi frameworkami JavaScript, które pozwalają na szybsze tworzenie nowoczesnych aplikacji.
newsblog.pl