الکترون جی اس و یا Electron JS چیست؟

حتما این مقاله را انتخاب کرده‌اید که به سوال شما در مورد الکترون جی اس(Electron JS) پاسخ دهد. خبر خوب این است که این مقاله شما را ناامید نخواهد کرد. اگر بخواهیم ساده بگوییم الکترون جی اس یک فریمورک زمان اجرا است که به کاربران اجازه ایجاد برنامه‌های desktop-suite را با استفاده از تکنولوژی هایی همچون html۵ ، css و جاوا اسکریپت می‌دهد.

الکترون جی اس(Electron JS) یک پروژه اپن سورس است که به وسیله مهندسی در گیت هاب به نام Cheng Zhao شروع به کار کرد. الکترون جی اس اساسا ترکیبی از دو تکنولوژی فوق العاده است : Node.js و Chromium. بنابراین هر برنامه وبی که شما نوشته اید می تواند بر روی الکترون جی اس اجرا شود. به طور مشابه هر برنامه ای که با استفاده از Node.js نوشته اید می‌تواند از این تکنولوژی استفاده کند.

چگونه و چطور الکترون جی اس ایجاد شد؟

ماجرای الکترون جی اس در ژانویه سال ۲۰۱۳ آغاز شد که توسعه دهندگان به دنبال ابزاری برای ساخت ویرایشگر های متنی cross-platform بودند که بتوانند با تکنولوژی‌های مانند جاوااسکریپت، html و css کار کنند. الکترون جی اس در ۱۳ جولای سال ۲۰۱۳ به منظور توسعه cross-platform ساده تر برای ساخت “Atom” تأسیس شد و در ابتدا با نام Atom Shell شناخته می شد.

نگاهی به تصویر زیر می تواند ایده ای دقیق تر را در مورد سفر الکترون جی اس برای شما فراهم آورد :

ویژگی های کلیدی الکترون جی اس چیست؟

با فرض اینکه تعاریف بالا به سوال شما را در مورد چیستی الکترون جی اس پاسخ داده باشد، بیاید به سراغ ویژگی‌های این فریمورک محبوب برویم. الکترون جی اس از تکنولوژی های وبی همچون html ،css و جاوا اسکریپت استفاده می کند. الکترون جی اس نیازی به مهارت های بومی ندارد، مگر اینکه بخواهید کار های پیشرفته تری را انجام دهید. می‌تواند برای یک مرورگر طراحی شود. فایل های سیستمی آن متعلق به Api های Node.js است و بر روی لینوکس، Mac OS X و ویندوز کار میکند.

این فریمورک از ماژول npm که در جاوا اسکریپت کاربرد گسترده ای دارد، استفاده می کند. شامل منو های بومی برای دیالوگ ها و پیغام هاست. نصب کننده های ویندوز نیاز به هیچ پیکربندی ندارند. از قابلیت های auto-updating و گزارش گیری خطاها در ویندوز و و مک با استفاده از Squirrel بهره می‌برد. گزارش مربوط به خطا ها برای تحلیل بیشتر به سمت سروری خارجی ارسال می شود. فعالیت های ردیابی محتوا مانند خطا یابی توسط Chromium دنبال می‌شود.

چرا باید به الکترون جی اس توجه کنیم؟

سخت‌ترین و خسته کننده ترین قسمت از ساخت اپلیکیشن های دسکتاپ عبارتند از : پکیج بندی، نصب، بروزرسانی، فراهم آوردن پشتیبانی برای منو های بومی، اعلان ها و در نهایت بهینه سازی گزارش خطا. الکترون جی اس تا حد زیادی خود مراقب این گام‌های ضروری بوده، بنابراین کاربران می‌توانند بر روی هسته برنامه خود متمرکز شوند. وقتی برنامه ای را برای یک مرورگر وب می نویسیم اساسا کدی مینویسیم که قرار است بر روی کامپیوتر دیگران اجرا شود، ما در مورد نوع مرورگر کاربرانی که از برنامه ما استفاده میکنند اطلاعی نداریم. این مرورگر می تواند آخرین نسخه از مرورگر کروم باشد و یا نسخه قدیمی تر از اینترنت اکسپلورر.

از این رو انتخاب زیادی را در مورد تکنولوژی هایی که می خواهیم پیاده سازی کنیم نداریم. زمانی که شما برنامه خود را با استفاده از الکترون جی اس پیاده‌سازی می کنید در واقع نسخه ای مشخص از Chromium و Node.js را ایجاد می کنید. بنابراین می توانید بر روی ویژگی های این دو نسخه تکیه کنید.

نگاهی کوتاه به معماری الکترون جی اس

اکنون بیایید نگاهی به معماری فریمورک الکترون جی اس بیندازیم. اگر شما بگویید که الکترون جی اس یک پیتزا و Node JS پایه و اساس آن است، بنابراین می توان گفت کروم پنیر و V8 JavaScript Engine چاشنی روی آن است.

Libchromiumcontent

کروم یک مرورگر سورس باز است که به وسیله گوگل ساخته شده است. این مرورگر یک tabbed window manager و یا shell برای وب ارائه می دهد. دارای یک رابط کاربری مینمالیست است و از V8 به عنوان موتور جاوا اسکریپت و از blink به عنوان موتور layout استفاده می‌کند. Libchromiumcontent کتابخانه رندرینگ Chromium است که اساسی سورس باز برای مرورگر گوگل کروم به شمار می آید.

Node JS

نود جی اس یک فریمورک زمان اجرا و سورس باز در جاوا اسکریپت است. که از موتور جاوا اسکریپت V8 استفاده می کند. شما را قادر می‌کند جاوا اسکریپت را خارج از مرورگر اجرا کرده و یک interactive shell فراهم می‌آورد. که میتوانید کد های خام جاوااسکریپت را اجرا کند. پروژه Node.js در ابتدا در سال 2009 به عنوان یک زمان اجرای cross-platform و سورس باز برای توسعه اپلیکیشن‌های سمت سرور توسط جاوا اسکریپت ایجاد شد. Node.js به همراه مدیریت کننده پکیجی به نام npm ارائه می‌شود که بزرگترین اکوسیستم کتابخانه‌ای سورس باز است.

موتور جاوا اسکریپت V8

موتور جاوا اسکریپت V8 یک موتور جاوا اسکریپت سورس باز بوده که توسط گوگل با استفاده از زبان هایی ++C و جاوا اسکریپت نوشته شده است.

فرآیندهای کاری در الکترون جی اس به چه شکل است ؟

بعد از اینکه با الکترون جی اس آشنا شدید و به دقت معماری آن را تحلیل کردید، اکنون نوبت به آن رسیده است که ببینیم که این فریمورک چگونه کار میکند؟ برنامه های الکترون جی اس دارای دو فرایند اجباری هستند. یکی فرایند اصلی و دیگری فرآیند رندر کردن. هر فرآیند نقشی متفاوت را ایفا می کند. Bootstrapping برنامه توسط فرایند اصلی انجام می شود، از طرفی دیگر فرایند رندر شدن خود توسط فرایند اصلی ایجاد می شود.

فرایند رندر کردن رابط کاربری برنامه را نمایش می دهد. هر فرآیندی از مزایای معماری Chromium و اجرا بر روی thread بهره می‌برد. اکنون بیایید در مورداین فرآیندها با نوشتن یک برنامه ساده به گفتگو بپردازیم.

اجرای اولین برنامه الکترون جی اس - نصب برنامه “Hello World”

در فایل سیستم خود یک فولدر ایجاد کنید. برای ایجاد یک برنامه ساده شما نیاز به سه نوع فایل دارید:  package.json, main.js و index.html .

ساخت فایل package.json با استفاده از دستور  `yarn init` انجام میپذیرد :

{
            "name": "electron",
            "version": "2.0.0",
            "main": "index.js",
            "license": "MIT"
}

 فایل JSON ایجاد شده به فایل های اصلی برنامه ، جزئیات و وابستگی‌های آن اشاره می کند.

اکنون در فایل package.json فایل main را به main.js تغییر داده و اسکریپت زیر را اضافه کنید :

"scripts": {
          "start": "electron ."
}

با استفاده از دستور زیر الکترون را نصب کنید :

yarn add --dev electron

اکنون می‌تواند با استفاده از دستور زیر اجرا شود :

yarn start

به خاطر اینکه هنوز کدی را اضافه نکرده اید شما با شکل زیر روبرو می شوید :

اکنون زمان آن رسیده است که کدها را به فایل ها اضافه کرده و برنامه Hello Worldرا ایجاد کنید. اسکریپت زیر را به فایل main.js اضافه کنید:

'use strict'
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
app.on('ready', () => {
                    // Create the browser window.
                    const win = new BrowserWindow({ width: 1000, height: 800 })

                    // and load the index.html of the app.
                    win.loadURL(
                                        url.format({
                                                  pathname: path.join(__dirname, 'index.html'),
                                                  protocol: 'file:',
                                                  slashes: true
                                                  })
                                        )
                    })

این فایل برنامه را اجرا کرده و باعث باز شدن صفحه مرورگر می شود. سپس فرایند اصلی و رندر شدن html انجام می‌پذیرد. شما می توانید از هر کتابخانه جاوا اسکریپتی مانند آنگولار، ری اکت، JQuery و غیره برای رندر کردن این فرآیند استفاده کنید. فایل index.html را به شکل زیر ایجاد کنید :

<!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>

Index.html صفحه وبی برای رندر شدن است و این فرآیند رندر شدن برنامه است. زمانی که شما فایل های اولیه main.js, index.html و package.json را ایجاد کردید می توانید با استفاده از دستور ‘yarn start’ از دایرکتوری برنامه خود آن را اجرا کنید. وقتی فایل ها را اجرا می کنید به شکل زیر برنامه شما در مرورگر اجرا می شود :

این یک برنامه ساده است و زمانی که پنجره را ببندید از برنامه خارج خواهید شد. ساخت این برنامه ساده به شما دیدی بهتر از الکترون جی اس می دهد.

نتیجه گیری

امیدواریم به شما کمک کرده باشیم تا با الکترون جی اس و ویژگی ها، پیاده سازی و ابزار های بنیادین آن آشنا شده باشید. به صورت کلی الکترون جی اس با بیشتر برنامه های داینامیک همراه است. این برنامه ها از مرورگرهای ما به عنوان پلتفرمی برای تحویل ویژگی های مورد نظر خود استفاده می‌کند و ما کمک می‌کند با مخاطبان بیشتری در تماس باشیم. با این همه ساخت و تحویل یک برنامه کامل که بتواند به کاربران خود کمک کند، هدف اصلی هر فریمورک سورس بازی است.

منبع: لرن سورس