Случвало ли ви се е да разработите уебсайт и да мислите да го конвертирате в настолно приложение, без да се налага да пишете всичко от нулата? Е, имате късмет. Днес, благодарение на рамки като Electron, е възможно да се трансформират уеб приложенията в пълнофункционални настолни версии, налични за Windows, Linux и macOS. Това е ценен ресурс за разработчици на свободна практика, стартиращи фирми и фирми, които търсят бърз и гъвкав начин за разпространение на своя софтуер.
Голямото предимство на Electron е, че ви позволява да използвате познанията си за уеб технологиите — HTML, CSS и JavaScript — за създаване на приложения, които работят извън браузъра, като използвате същите инструменти, които вече познавате от уеб средата. Ако идеята ви звучи привлекателно, останете, защото ние ще ви кажем всичко, което трябва да знаете, за да започнете да създавате настолни приложения с тази мощна рамка.
Какво е Electron и как работи?
Electron е рамка, разработена от GitHub който ви позволява да пакетирате уеб приложения и да ги превърнете в междуплатформени настолни приложения. Това означава, че можете да разработите своя софтуер веднъж и с малки корекции да го накарате да работи под Windows, macOS и Linux.
За да постигне това, Electron комбинира Chromium, двигателят на браузъра на Google ChromeС Node.js, което позволява на вашето приложение да има уеб възможности и достъп до собствените функции на операционната система. По този начин можете да заредите HTML интерфейс, стилизиран с CSS, и да го стартирате с JavaScript, докато Node.js обработва работата на ниско ниво като достъп до файловата система, създаване на менюта, известия и др.
Основни електронни процеси
Едно приложение в Electron е разделено на два основни процеса: Основен процес y Процес на изобразяване.
1. Основен процес
Основният процес е основният двигател на приложението. Той е отговорен за контролиране на жизнения цикъл на приложението, създаване и управление на прозорци (екземпляри на BrowserWindow), и работи на Node.js, така че има директен достъп до API на операционната система.
От този процес можете да контролирате системни събития като затваряне на прозорци, известия, управление на менюта или дори поведението при стартиране на приложението. Всеки път, когато трябва да отворите нов прозорец, основният процес ще го генерира, като му присвоява конкретно съдържание.
2. Процес на изобразяване
Всеки прозорец, създаден от основния процес, стартира процес на рендиране, който отговаря за показването и управлението на потребителския интерфейс. Това е мястото, където се изпълнява HTML, CSS и JavaScript кодът на вашето приложение, осигурявайки изживяване като в мрежата.
Този процес работи изолирано, както в съвременните браузъри. Всеки прозорец има своя нишка, която подобрява стабилността и безопасността на приложението, тъй като ако един прозорец се срине, това не засяга останалите.
Този процес работи изолирано, както в съвременните браузъри. Всеки прозорец има своя нишка, която подобрява стабилността и безопасността на приложението, тъй като ако един прозорец се срине, това не засяга останалите.
Междупроцесна комуникация: ipcMain и ipcRenderer
Electron предоставя два ключови модула, за да позволи комуникацията между основния процес и процеса на рендиране: ipcMain e ipcRenderer.
От процеса на изобразяване можете да използвате ipcRenderer за изпращане на съобщение до главния процес и главният процес може да обработва тези съобщения с ipcMain. Можете също да използвате ipcMain.handle() за получаване на съобщение и връщане на асинхронен отговор на Renderer, което е полезно за операции като потвърждение, че дадено действие е било успешно.
Освен това можете да използвате contextBridge за излагане на защитен и контролиран API от скрипта за предварително зареждане, позволяващ на вашия интерфейс да има достъп само до функциите, от които се нуждаете, без да компрометира сигурността на приложението.
Предимства на работата с Electron
Защо да изберете тази технология пред други опции? Ето някои убедителни причини:
- многоплатформен: Разработвате веднъж и можете да генерирате версии за Windows, macOS и Linux.
- Повторно използване на кода: Ако вече имате уебсайт, създаден с React, Vue или Angular, можете да го използвате повторно почти целия.
- Достъп до функциите на операционната система: Менюта, известия, файлова система и др.
- Активна общност и поддръжка: Electron има много активна общност и се поддържа от GitHub.
Ограничения, които трябва да се вземат предвид
Всяко хубаво нещо има своя аналог. Ето някои недостатъци, които трябва да имате предвид:
- Висока консумация на ресурси: Приложението „Hello World“ може да консумира повече от 60 MB RAM.
- сигурност: Ако комуникацията между процесите не се управлява правилно, можете да изложите приложението си на ненужни рискове.
Много от тези недостатъци обаче могат да бъдат смекчени с добри практики за развитие, оптимизация на кода и избягване на зареждането на ненужни ресурси.
Инструменти, които улесняват развитието
Има няколко помощни програми, които ви улесняват да работите с Electron:
Електронна ковачница
Electron Forge е един от най-използваните инструменти за инициализирайте проекти, пакетирайте вашето приложение и генерирайте инсталатори. Освен това поддържа Webpack, Vite и TypeScript, което ви дава много гъвкавост да използвате предпочитания стек.
Електрон Builder
Тази помощна програма ви позволява да създаване на изпълними файлове за всяка операционна система по лесен начин, генерирайки файлове .exe за Windows, .dmg за macOS и .deb o .AppImage за Linux.
Моля, обърнете внимание, че за да генерирате успешно изпълним файл за macOS, трябва да го направите от компютър, работещ с тази операционна система.
Превръщане на уебсайт в приложение с Electron
Представете си, че вече имате уеб приложение, създадено с Vue, React или Angular. Превръщането му в настолно приложение е толкова просто, колкото интегрирането на Electron като зависимост и конфигурирането на основния файл.
За да започнете:
npm install --save-dev electronИ след това посочете в package.json основния файл (напр. main.js), където се намира основният код на процеса.
От там можете да използвате BrowserWindow за да качите своя HTML или URL адрес за разработка на интерфейс и да имате функционален прозорец на работния плот.
Практически пример: Пъзел игра с Vue + Electron
Да предположим, че искате да създадете приложение тип пъзел игра. Можете да започнете проекта си с Electron Forge и Vite + Vue шаблон по този начин:
npm init electron-app@latest mi-app -- --template=vite-typescriptВеднъж инсталиран, имате структура, където Процесът на рендиране е отделен от основния процеси можете да конфигурирате приложението си от файловете vite.renderer.config.mjs y main.ts.
За да покажете играта, можете да създадете Vue компонент (като напр Game.vue) и използвайте библиотека като slide-puzzle-engine за динамично генериране на дъската.
С малко логика във Vue и помощта на onMounted y watch, можете да откриете кога пъзелът е решен и да покажете съобщение за успех.
Съображения за по-пълно приложение
В допълнение към изобразяването на интерфейса и контролирането на основните потоци, можете да добавяте функции като:
- Таймер: За измерване на времето, необходимо на потребителя за решаване на пъзела.
- Местно класиране: Запазете високите резултати в хранилището на локалната система.
- Заменете числата с изображения: За подобряване на визуалното изживяване.
- Достъп до папка: Позволете на потребителя да отваря или запазва файлове с помощта на собствени API.
Истории на успеха с Electron
Electron не е експериментална технология. Всъщност много световноизвестни приложения са създадени с тази рамка. Някои от тях включват:
- Код на Visual Studio (VS код)
- Застой
- раздор
- пощаджия
- WhatsApp Desktop
Тези приложения са примери, които, ако са разработени по оптимизиран начин, Electron може да осигури много добра производителност и професионално потребителско изживяване.
Последни точки за разглеждане
Докато се развивате с Electron, ще забележите, че структурата на вашия проект може да варира в зависимост от това дали използвате Webpack, Vite или просто обикновен HTML и JavaScript. Ще забележите също, че ключът към ефективността е вътре Минимизирайте това, което зареждате в Windows и избягвайте ненужните процеси.
Ако вашето уеб приложение вече е добре структурирано, мигрирането му към Electron може да бъде въпрос на интегриране на рамката Node.js, адаптиране на скриптовете и правилното му пакетиране. След като сте готови, можете да го разпространявате директно или дори да го качите в магазини като Snapcraft, macOS App Store или Microsoft Store.
Избирането на Electron за създаване на настолно приложение има множество предимства, особено ако вече сте опитни в уеб разработката. Той е бърз, ефективен и ви позволява да се възползвате от цялата екосистема на JavaScript, без да се налага научете други езици като Java или C. Въпреки че консумира повече ресурси от собствените приложения, възможностите, които предлага във функционалност, дизайн и време за разработка, го правят полезен.
С добра организация на кода, инструменти като Electron Forge и Builder и отговорен подход можете да създавате стабилни, привлекателни и функционални приложения, които са наравно с по-сложни решения. Споделете информацията, така че другите потребители да знаят за инструмента.