Bu yazıya motivasyon sağlayan, Electron + Vue birlikteliği ile ortaya çıkmış uygulamaların bir listesini ayrıca yazının alt bölümünde görebilirsiniz.
Electron.io
Electron, JavaScript, HTML ve CSS ile platformlar arası (macOS, Windows, Linux) native masaüstü uygulamaları geliştirebilmemizi sağlayan bir framework. 2013 yılında adımları atılan, 2015 yılında duyurulan ve 2016 yılında Electron v0.x1 ile Cheng Zhao2 tarafından kullanıma sunulan framework Node.js üzerinde yapılandırılmakta. Electron oluşturulan uygulamayı gömülü bir engine olan Chromium web tarayıcısında açarak uygulamanın işlemesini sağlar. Güncel olarak v5 sürümü kullanımda olan Electron, Node 12+ ve Chromium 73+ gereksinimlerine sahiptir.
Electron.io Çalışma Biçimi
JavaScript, HTML ve CSS birlikteliği aslında bir web sayfası / uygulaması temelini teşkil eder. Bunun yanınında React, Angular, Vue, JQuery vb kütüphaneler ile de geliştirme yapabilirsiniz. Geliştirme sürecinde, front-end geliştiricinin olmazsa olmazı inspect, dev-tools, debug gibi özellikler de kullanılabilmekte. Electron da bu anlamda bir web uygulaması olarak nitelendirilebilir. Tek fark, uygulama bir masaüstü uygulaması gibi davranmaktadır. Notification, update, build gibi ek paketlerle Electron ile ilişkilendirilerek uygulamanın kapsamı kolaylıkla genişletilebilmekte.
Electron Uygulama Mimarisi (Electron Application Architecture) temelde iki yapıdan oluşur; Main ve Renderer Processes3.
package.json
içeriğindeki main script (entry point) main process (application life cycle) olarak işlenir. Menüler, Electron’u kapatıp açmak gibi modüller bu process içerisinde işlenir.
Electron, web sayfalarını görüntülemek için Chromium kullandığından, Chromium’un çoklu işlem mimarisinden de faydalanmaktadır. Electron’daki her bir web sayfası, render process olarak adlandırılan kendi process’inde çalışır. DOM bu process içerisinde işlenir.
Main process ve render process arasındaki iletişim IPC (Inter Process Communication) ile sağlanır. Örneğin, bir dosya erişimi gerekli ise bu işlem render process tarafında başlar, IPC ile main process’e durum iletilir, main process içerisinde işlem gerçekleştirilir ve sonuç döndürülür.
Visual Studio Code4 ve Atom5 kod editörleri ve Slack6 Electron ile geliştirilmiş ve oldukça yaygın kullanıma sahip uygulamalardan bazılarıdır. Electron kullanan markalar / kurumlar ve geliştirilen uygulamalarla ilgili olarak electronjs.org3 adresine göz atabilirsiniz.
Electron.io Nasıl Kullanılır
Kullanım için NPM veya Yarn gibi bir paket yöneticisi aracılığıyla Electron node.js paketini / modülünü edinebilir ve global olarak yapılandırabiliriz. Diğer indirme detayları ve özelleştirmeler için Installation sayfasına göz atabilirsiniz.
yarn global add electron
# ya da
npm install -g electron
Global olarak yapılandırmak yerine, elbette proje temelinde de indirme işlemini gerçekleştirebiliriz.
yarn add --dev electron
# ya da
npm install --save-dev electron
Ardından, Writing Your First Electron App3 sayfası ile devam edebilirsiniz.
Eğer, hızlı bir şekilde geliştirme yapmak istiyorsanız, örnek olarak sunulan basit bir Electron uygulaması olan Quick Start paketi ile ilk adımlarınızı atabilirsiniz.
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start
Electron.io İle Basit Bir “Hello World” Uygulaması
Evet, kurulum işlemlerinin ardından, basit bir hello world uygulaması geliştirebiliriz. En temel ihtiyaçlarımız olan Node.js ve Electron paketinin bilgisayarımıza indirilmiş olduğunu varsayıyorum. Aksi durumda, yukarıdaki indirme işlemlerini gerçekleştirmeniz gerekmekte.

Bir sonraki ihtiyacımız, bir Node.js uygulaması için olmazsa olmaz olan package.json
dosyası.
yarn init -y
# ya da
npm init -y
package.json
dosyasının içeriği şuna benzer olmalı. Özellikle "start": "electron ."
tanımı önemli. npm start
komutu ile bu script’i işleme alacağız.
{
"name": "uygulama-adi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^5.0.6"
}
}
Proje başlangıcını da yaptığımıza göre, bir sonraki işlem entry point
dosyamızın (index.js) oluşturulması ve yapılandırılması.
const {
app,
BrowserWindow
} = require('electron')
function createWindow() {
// Pencere özellikleri
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// Uygulama içeriği
win.loadFile('index.html')
}
app.on('ready', createWindow)
createWindow()
ile uygulamanın arayüzünü ve win.loadFile()
ile içerik dosyasını da tanımladığımıza göre, sırada index.html
dosyasının oluşturulması ve düzenlenmesi var.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Artık uygulamamız hazır, tek yapmamız gereken npm veya yarn ile uygulamayı çalıştırmak.
npm start
# ya da
yarn start
Yukarıdaki basit uygulama ile ilgili daha detaylı bilgi edinmek için Electron Development in a Nutshell3 başlığına göz atabilirsiniz. Ayrıca, ilgili kod tanımları ve diğer tüm detaylar için muntazam bir şekilde hazırlanmış olan Electron Documentation başvuru kaynağınız olacaktır.
Electron + Vue
Electron ile pek çok şekilde uygulama geliştirmek mümkün. Benim özellikle üzerinde duracağım husus Vue ile birlikte yapılacak geliştirmeler. Bu amaçla, sıklıkla electron-vue‘dan faydalanacağım. Şimdiden, aşina olmak adına electron-vue dokümantasyonuna göz aşinalığı oluşturmakta fayda var.
Son olarak, Electron + Vue birlikteliği neticesinde kullanım imkanına kavuşmuş, kodları incelenebilecek ve/veya katkı sunulabilecek bir kaç uygulamaya aşağıda yer verdim.
- Mark Text, markdown editor.
- Miikun, markdown editor.
- Backlog, to-do list app.
Unutmadan, Gökhan Kandemir tarafından hazırlanmış, ücretsiz olarak sunulan ve başlangıç için değerlendirilebilecek Electron.js ile Masaüstü Uygulama Yapımına Giriş eğitiminden de faydalanabilirsiniz.