Electron JS Alt Yapısı, Main Process, Renderer Process ( Bölüm 2 )
Merhabalar, Electron JS yazı dizisinin bu bölümünde derinlemesine şekilde ElectronJS alt yapısını inceleyeceğiz. ElectronJS chromium ve NodeJS projelerini tek çatı altında birleştirerek oluşturulmuş bir desktop uygulaması geliştirme aracı olduğundan bahsetmiştik ilk yazıda.
Yazıda ilerlemeden belirteyim eğer video ile anlatım ile daha kolay anlıyorsanız ElectronJS dersleri için bir video serisi hazırladım burada yazdığım yazıları ve detaylıca anlatımını izleyebilirsiniz isterseniz.
Peki NodeJS ve Chromium nasıl tek çatı altında birleşiyor ? iki alt yapı iç içe mi çalışıyor ? Bu sorulara cevap vermek için hazırladığım şema yapısını incelemek başlangıç için faydalı olacak :
Şemadan da gördüğünüz üzere aslında NodeJS ve Chromium dünyaları direkt iç içe değiller, ElectronJS alt yapısında kendi dünyaları var ve birbirleri ile iletişim kurabilecekleri yapıyı yani IPC iletişim yapısını sağlıyor ElectronJS bu sayede iki dünya arasında interaksiyon gerçekleştirebiliyoruz.
ElectronJS NodeJS dünyasını main process ve Chromium dünyasını renderer process olarak isimlendiriyor. Kolay anlaşılması için belirteyim renderer process aslında Chromium tabına denk geliyor, fakat bu tabların açılıp görünmesini ElectronJS alt yapısı ile yönettiğimiz için teknik terim olarak renderer process ismini uygun görmüşler. main process bir ElectronJS uygulaması hayatı boyunca 1 tanedir ama renderer process yani Chromium tabları istediğimiz kadar açabileceğimiz için 1'den fazla olabilir.
Main process
Main process dünyası NodeJS yardımı ile javascript kodlarımızı çalıştırır ve sürümü ElectronJS’in belirlediği bir sürümdür yani son sürüm olmayabilir bu main process için geliştirme yaparken önemli bir noktadır, bazı yeni javascript özellikleri çalışmaz ise bunun nedeni kullandığınız ElectronJS sürümünün içinde yer alan NodeJS’in eski bir sürüm olmasından dolayı olabilir.
Main process tarafında NodeJS’in bize sağladığı tüm işlemleri gerçekleştirebiliyoruz, dosya işlemleri, http çağrıları vb bu sayede renderer process aşamasında detayına ineceğimiz browser’in limitlerini aşarak daha çok yetkinliğe sahip oluyoruz.
Main process dünyası ayrıca üzerinde çalışılan işletim sisteminin çağrılarını da gerçekleştirebilimektedir bu sayede işletim sistemine özel işlemleri gerçekleştirebiliriz. Örnek olarak windows ortamında app icon kısmında progress gösterebiliriz, bir dosyayı server’a yüklerken bu şekilde gösterim yapmak kullanıcı açısından güzel bir UX olacaktır.
Renderer Process
Renderer process dünyası bir chromium browser dünyasıdır ve her bir renderer process bir tab’a denk gelir. Renderer process ElectronJS’nin UI sunumunun yapıldığı dünyadır ve Chromium olmasından dolayı HTML+CSS+JS ya da diğer bir deyişle herhangi bir web teknolojisi ile geliştirme yapmamızı sağlamaktadır. Örneğin React kütüphanesi ile hazırlayabilirsiniz renderer process tarafında çalışacak uygulamayı.
Renderer process genel olarak bir index.html dosyasını yükleyerek görevine başlar ve index.html dosyasının gösterdiği CSS ve JS dosyalarının yüklenmesi sayesinde istediğimiz sunuşları, ekran geçişlerini gösterebilir hale geliriz.
Renderer process tarafında genelde Single Page Application geliştiririz son zamanlarda çok geliştikleri ve geliştirme yapmak çok kolaylaştığı için fakat multi page ekranlarda hazırlayabilirsiniz yani index.html, add.html vb birden fazla html ile ekran geçişleri hazırlayabilirsiniz fakat tavsiye edilmez çünkü her ekran geçişinde her şey tekrar load olmaktadır ve performans kaybına neden olur.
IPC iletişimi
ElectronJS iki güçlü dünyayı tek çatına altına topluyor ve teknik zorlukların üstesinden gelebilmek için bu iki dünya arasındaki iletişimi ise IPC yani Inter Process Communication ile gerçekleştiriyor. IPC işletim sisteminden işletim sistemine değişebilen bir yapıdır ama temel özelliği aynıdır iki process arasındaki iletişimi sağlamak.
Yani main process ile renderer process birbirlerine mesaj gönderip alabilmektedir. Bu sayede renderer process NodeJS apilerini çağırabilmektedir. Tabi teknik olarak direkt NodeJS çağrılmıyor IPC iletişimi aracılığı ile NodeJS apilerinin tümüne eriştiriyor. Ek olarak belirteyim bu NodeJS entegrasyonu opsiyonel bir ayar yani dilerseniz kapatabilirsiniz main main process ile chromium yani renderer process’i çalıştırırken.
Unutmamak gerekli büyük güç ile sorumluluk da beraberinde gelir, renderer process içinden NodeJS apilerini çağırabiliyor olmamız mutlaka çağırmamız anlamına gelmemeli, temiz ve güvenli kod yazma esasına uygun şekilde genel olarak NodeJS çağrıları main process içinde gerçekleştirilir ve renderer process IPC iletişimi aracılığı ile sonuçlarını alır. Bu sayede temiz ve güvenli bir kod yazmış oluruz ayrıca renderer process tarafında geliştirdiğiniz uygulamayı bir web sunucusuna koyarak web browser üzerinde de çalışmasını sağlamak isterseniz çok az efor ile bunu sağlarsınız.
Örnek basit bir ElectronJS uygulamasını aşağıdaki github linkinde bulabilirsiniz :
İlerleyen yazılarda kod örnekleri ile bu yazıda anlattığım teknik detayları pekiştireceğiz.
