JavaScript jest jednym z najpopularniejszych języków programowania. Fakt, że można go używać zarówno do tworzenia backendu, jak i frontendu, sprawił, że jest ulubieńcem wielu osób.
JavaScript ma wiele bibliotek i frameworków, które rozszerzają jego przypadki użycia poza standardowy (zwykły) JavaScript.
Electron.js to potężna platforma typu open source, która daje twórcom stron internetowych możliwość tworzenia natywnych aplikacji przy użyciu ich istniejących umiejętności. Z tego artykułu dowiesz się o Electron.js i o tym, jak można go wykorzystać do realizacji kolejnego niesamowitego pomysłu.
Spis treści:
Elektron JS
Electron JS to framework, którego programiści mogą używać do tworzenia aplikacji komputerowych przy użyciu HTML, CSS i JavaScript. Electron JS został stworzony i jest utrzymywany przez GitHub.
Framework jest mieszanką Node.JS i Chromium, umożliwiając użytkownikom utrzymanie jednej bazy kodu JavaScript i tworzenie wieloplatformowych aplikacji komputerowych, które mogą działać w systemach Windows, macOS i Linux.
Historia Electron.js rozpoczęła się w styczniu 2013 roku. Pierwotnym pomysłem było stworzenie wieloplatformowego edytora tekstu, który mógłby współpracować z JavaScript, HTML i CSS.
Electron.js pierwotnie nosił nazwę Atom Shell i stał się open source w 2014 roku. Projekt został później przemianowany na Electron w kwietniu 2015 roku, a jego pierwszy interfejs API został wydany w 2016 roku.
Cechy Electron JS
- Kompatybilny ze wszystkimi bibliotekami i frameworkami JavaScript. Vue.js, Angular i React.js to tylko przykłady frameworków JavaScript, których programiści mogą używać razem z Electron JS. Ta kompatybilność ułatwia korzystanie z funkcji/funkcjonalności tych bibliotek i frameworków podczas tworzenia aplikacji Electron.
- Ramy wielokrotnego użytku. Zaspokajanie różnych potrzeb klientów może być kosztowne. Zaletą Electron JS jest to, że można go używać zarówno w aplikacjach internetowych, jak i stacjonarnych. Pojedynczy kod bazowy oznacza, że może być również używany w różnych systemach operacyjnych.
- Ma dostęp do natywnych interfejsów API. Deweloperzy pracujący na Electron JS mają dostęp do natywnych API systemów operacyjnych, na których działają. Programiści mogą w ten sposób tworzyć aplikacje komputerowe, które mają podobny dostęp do funkcji niskiego poziomu, takich jak wyświetlanie powiadomień.
- Obsługuje technologię internetową. Electron JS można dostosować, ponieważ programiści nie muszą uczyć się nowego języka programowania, aby tworzyć aplikacje. Oznacza to zatem, że jeśli rozumiesz określony pakiet językowy, którego już używasz do tworzenia aplikacji internetowych, możesz go również użyć do stworzenia aplikacji komputerowej.
- Zarządzanie kodem i aplikacjami. Nie musisz utrzymywać różnych zespołów, aby utrzymywać aplikacje i kod dla różnych systemów operacyjnych. Electron JS pozwala na utrzymanie tej samej bazy kodu dla systemów operacyjnych Linux, Windows i Mac.
- Łatwa budowa/wdrażanie. Menedżer pakietów Electron pomaga programistom pakować się w odpowiednie pakiety. W ten sposób możesz wydać aplikację komputerową dla systemów Linux, Mac i Windows z tej samej bazy kodu za pomocą tego menedżera pakietów.
Architektura Electron JS
Architektura Electron jest bardzo podobna do współczesnej przeglądarki internetowej, ponieważ dziedziczy architekturę wieloprocesową po Chromium.
Architektura Electron obejmuje V8 JavaScript Engine, Node.JS i Libchromiumcontent.
- Node.JS – środowisko uruchomieniowe JavaScript typu open source, które działa na silniku JavaScript V8. Node.JS umożliwia programistom uruchamianie JavaScript poza oknem przeglądarki. Node.JS umożliwia również użytkownikom wykonywanie surowego kodu JavaScript za pośrednictwem interaktywnej powłoki.
- Libchromiumcontent — biblioteka renderująca Chromium, która jest open source i jest obsługiwana przez Google Chrome. Chrome ma minimalistyczny interfejs użytkownika i wykorzystuje Blink jako silnik układu i V8 jako silnik JavaScript.
- V8 JavaScript Engine – silnik JavaScript typu open source napisany w C++ i JavaScript i opracowany przez Google.
# 1. Node.js
Aby rozpocząć pracę z Electron JS, musisz mieć zainstalowany Node.js na komputerze lokalnym.
Wybierz odpowiednią wersję węzła w zależności od systemu operacyjnego używanego na komputerze.
Sprawdź, czy Node.js został poprawnie zainstalowany, uruchamiając te polecenia;
node -v
npm -v
Jeśli zostaną poprawnie zainstalowane, te polecenia pokażą odpowiednio wersje node i npm.
#2. Wiersz poleceń
Sposób uzyskiwania dostępu do wiersza poleceń zależy od systemu operacyjnego.
- Linux będzie zależał od dystrybucji.
- Windows: PowerShell lub wiersz polecenia.
- macOS: Terminal.
Niektóre edytory kodu, takie jak Visual Studio Code, są dostarczane ze zintegrowanym terminalem.
#3. Edytor kodu
Potrzebujesz edytora kodu, aby napisać swój kod Electron JS. Visual Studio Code jest jednym z najlepszych, jakie możesz wypróbować.
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 wypełnienie niektórych pól, takich jak nazwa aplikacji, punkt wejścia i opis.
Możesz wybrać domyślną nazwę folderu jako nazwę aplikacji. Pamiętaj jednak, aby ustawić punkt wejścia aplikacji jako main.js.
Pola takie jak autor i opis mogą przyjmować dowolną wartość. Twój plik package.json będzie wyglądał mniej więcej tak, gdy wykonasz następujące kroki:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Krok 2: Zainstaluj elektron
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ć tworzenie aplikacji z konfiguracji, którą właśnie wykonaliśmy powyżej. Aplikacja Electron ma dwa typy procesów; główny i renderujący.
Główny proces
Główny skrypt jest punktem wejścia dowolnej aplikacji elektronowej. Aplikacja będzie działać w pełnym środowisku Node.js. Electron będzie szukał głównego skryptu w pliku package.json, który już skonfigurowałeś podczas scaffoldingu aplikacji.
Utwórz main.js w folderze głównym, aby zainicjować główny skrypt. Możesz to zrobić ręcznie lub użyć tego polecenia;
touch main.js
Możesz dodać 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ć ze zdalnego adresu internetowego lub lokalnego pliku HTML. Do celów demonstracyjnych użyjemy lokalnego pliku HTML.
Utwórz plik index.html w folderze głównym. Kod dla pliku index.html jest zawsze dostarczany, ale możesz go mieć jako kod startowy;
<!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
Renderer renderuje zawartość internetową. Skrypty wstępnego ładowania są dostarczane z kodem, który jest wykonywany w procesie renderowania przed rozpoczęciem ładowania zawartości sieci.
Utwórz plik preload.js w folderze głównym i dodaj ten 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 i oto, co zostanie wyświetlone
Przykłady aplikacji: Electron JS
# 1. Slaska aplikacja komputerowa
Slack to jedno z najpopularniejszych narzędzi do zdalnej współpracy. Użytkownicy mogą wysyłać i odbierać wiadomości, wykonywać połączenia i udostępniać pliki za pomocą tej aplikacji. Slack ma zarówno aplikacje internetowe, jak i aplikacje na komputery stacjonarne w systemach operacyjnych Mac, Linux i Windows. Aplikacja komputerowa Slacka wykorzystuje silnik Chromium i Node.js do renderowania kodu wysokiej jakości.
#2. Aplikacja komputerowa WordPress
WordPress to największy system zarządzania treścią. Fakt, że możesz uruchomić stronę internetową nawet bez podstawowych umiejętności kodowania, przyciągnął wielu użytkowników. Dostęp do WordPressa można uzyskać za pośrednictwem przeglądarki i aplikacji komputerowych na komputerach Mac, Linux i Windows. Odświeżony pulpit WordPress wykorzystuje Electron JS.
#3. Aplikacja komputerowa WhatsApp
WhatsApp jest jedną z najpopularniejszych aplikacji do przesyłania wiadomości we współczesnym świecie, ponieważ korzysta z niego ponad 2 miliardy ludzi. WhatsApp został pierwotnie zaprojektowany jako aplikacja mobilna, ale teraz stał się platformą dla różnych urządzeń. Pulpit WhatsApp wykorzystuje Electron JS i jest dostępny w głównych systemach operacyjnych.
#4. Kod Visual Studio
Visual Studio Code, którego właścicielem jest Microsoft, jest jednym z najpopularniejszych edytorów kodu. Visual Studio Code obsługuje HTML, CSS i kod napisany w różnych językach programowania, takich jak JavaScript, Python, PHP, Java i Ruby, by wymienić tylko kilka. Aplikacja komputerowa, utworzona przy użyciu Electron JS, jest dostępna dla systemów operacyjnych Windows, Mac i Linux.
Zasoby edukacyjne: Electron JS
# 1. Oficjalna dokumentacja Electronjs
Dokumentacja Electronjs jest tworzona i utrzymywana przez Electronjs.org. Dowiesz się, czym jest Electron JS, jak skonfigurować swoją pierwszą aplikację Electron oraz jak budować wieloplatformowe aplikacje desktopowe przy użyciu różnych technologii. Dokumentacja jest zawsze aktualizowana za każdym razem, gdy wprowadzane jest ulepszenie lub nowa funkcja.
#2. Master Electron: Aplikacje komputerowe z HTML, JavaScript i CSS
Master Electron to płatny kurs na Udemy, który przedstawia Electron JS. Dowiesz się, jak tworzyć aplikacje komputerowe dla różnych systemów operacyjnych, takich jak Mac, Linux i Windows. Master Electron jest również doskonałym źródłem informacji, jeśli chcesz zrozumieć cały proces Electron API.
#3. Samouczek dotyczący reakcji elektronów
Electron React to płatny kurs na Udemy, który uczy programistów, jak tworzyć aplikacje Electron przy użyciu React.js. React to jedna z najbardziej znanych bibliotek JavaScript, stworzona przez firmę Meta (wcześniej Facebook).
Podsumowanie
Electron JS to niesamowita biblioteka JavaScript do tworzenia aplikacji komputerowych we współczesnym świecie, w którym muszą być dostępne aplikacje wieloplatformowe. Fakt, że możesz używać HTML, CSS i JavaScript, oznacza, że programiści nie muszą uczyć się nowych technologii, aby tworzyć takie aplikacje. Obecność dużej i wspierającej społeczności jest również plusem, ponieważ zawsze masz gwarancję wsparcia.
Możesz także zapoznać się z najlepszymi frameworkami JavaScript, aby zbudować nowoczesną aplikację w krótszym czasie.