Electron.io Nedir?

Electron ile ilgili bir yazı yayınlamak oldukça uzun zamandır planlarım arasındaydı. Ancak, öncesinde başta Vue ve Webpack hakkında bir şeyler söylenmesi gerekiyordu. Bu vesile ile ancak gerekli gördüğüm şartlar sağlanmış oldu.

AA

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.

Electron App

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.

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.