Те, що я хотів би знати перед роботою з Electron.js

У цій статті я поділюсь, як можна уникнути деяких помилок, які я допустив, дізнавшись про Electron.js? ‍♂️. Сподіваюся, це допоможе!

Примітка : Це не буде підручником з кодування, а скоріше обговоренням моїх особистих виїздів.

Пару місяців тому я вирішив зосередитись більше на створенні свого побічного продукту, taggr . Я надихнувся на його створення завдяки тому, скільки фотографій у мене на комп’ютері.

Для тих з нас, хто зберігає резервні копії своїх фотографій, ці колекції часто стають настільки великими та складними, що стають роботою на повний робочий день. Поєднання папок та підпапок може містити резервні копії зображень миттєвого обміну повідомленнями, фотографії з високою роздільною здатністю з вашої поїздки на Балі, весілля вашого дядька або минулорічної холостяцької вечірки.

Завжди тримати в порядку такі колекції - це нудно (повірте, я намагався роками). Це теж важкощоб виявити кадри, які вам найбільше подобаються, заховані глибоко в папках.

Тож теггр- це настільний додаток, який вирішує цю проблему. Це дозволяє користувачам заново відкривати свої спогади, зберігаючи конфіденційність .

Я будую taggr як крос-платформний настільний додаток. Тут я поділюсь деякими речами, які я дізнався про розробку крос-платформних програм з Electron.js, про які хотів би знати з самого початку. Давайте розпочнемо!

Передумови

Перш ніж представляти свої вибори на цій триваючій подорожі з Electron, я хотів би дати трохи більше інформації про себе та вимоги taggr .

Кожен розробник походить з іншого походження, а також вимоги до програм, які вони розробляють.

Контекстуалізація вибору, який я зробив для цього проекту, може допомогти майбутнім розробникам вибрати правильні інструменти, виходячи зі своїх потреб та досвіду (а не того, що там розкручено - GitHub?, Я дивлюсь на вас).

Як вже згадувалося раніше, з самого початку я розглядав taggr як крос-платформний додаток. Додаток виконуватиме всі необхідні обробки попередньої обробки та машинного навчання на стороні клієнта через орієнтацію на конфіденційність.

Як шоу для однієї особи, я хотів мати можливість написати свій додаток один раз і передати його в різні системи, не втрачаючи розуму.

Зі свого боку я - інженер-розробник, закоханий в Інтернет та JavaScript. Раніше я працював з Java та C #, але я насолоджуюсь гнучкістю, яку надає Інтернет, та її яскравою екосистемою.

Переживши на власному болі біль від використання таких інструментів, як Eclipse RCP, для створення додатків на стороні клієнта, я знав, що не хочу знову працювати з цією технологією.

Коротше кажучи, мої вимоги до стеку до taggr зводились до приблизно такого:

  • Він повинен забезпечувати міжплатформену підтримку, в ідеалі на рівні фреймворку. ?
  • Це повинно дозволити мені написати код один раз і, якщо потрібно, налаштувати для кожної платформи. ? ️
  • Він повинен надавати доступ до можливостей машинного навчання , незалежно від середовища хоста, без встановлення конкретних середовищ виконання. Налаштування повинно бути безболісним. ?
  • Якщо це можливо, йому слід використовувати веб-технології . Було б чудово використовувати мої наявні знання. ?

Як бачите, вимоги не звучать так: я повинен використовувати React з Redux, спостережуваними та WebSockets . Це деталі впровадження нижчого рівня, і вони повинні вирішуватися, коли і якщо виникає необхідність.

Виберіть правильний інструмент для роботи, а не вибирайте стек з самого початку, не враховуючи наявні проблеми.

Тож, після розлюченого гуглиння, я вирішив спробувати Електрон. Я раніше не використовував цей фреймворк, але я знав, що багато компаній успішно використовують його в таких продуктах, як Atom, VS Code, Discord, Signal, Slack та ін.

З відкритим вихідним кодом і з нестандартною сумісністю як з екосистемами JS, так і з Node (Electron будується з використанням Chromium і Node), Electron.js був привабливим інструментом для поточної роботи.

Я не буду занадто детально розглядати решту стека, оскільки я неодноразово міняв основні частини (шари стійкості та перегляду), коли це було потрібно, і це випадає за рамки цієї статті.

Однак я хотів би згадати Tensorflow.js, який дозволяє запускати навчання та розгортати моделі ML безпосередньо у браузері (з WebGL) та Node (із прив'язками C), не встановлюючи конкретних середовищ виконання для ML на хості.

Тож повернімось до Electron - думаючи, що це ідеально, веселощі почалися. ??

Досить говорити про передісторію. Давайте зануримось на винос.

1. Починати з малого (і повільного)?

Це не нова концепція, але її варто періодично викладати. Тільки тому, що доступна маса чудових початкових проектів з Electron, це не означає, що вам слід вибрати одразу.

Чекай. Що?

Повільно - плавно, а плавно - швидко. - Військово-морський флот

Зі зручністю приходить складність

Хоча ці початкові компоненти містять багато корисних інтеграцій (Webpack, Babel, Vue, React, Angular, Express, Jest, Redux), вони також мають свої проблеми.

Як новачок Electron, я вирішив вибрати нехитрий шаблон, який включав основи для "створення, публікації та встановлення програм Electron" без зайвих наворотів. На початку навіть Webpack.

Я рекомендую почати з чогось подібного до електронної кузні, щоб швидко запустити і запуститивстановіть свій графік залежностей та структуру зверху, щоб вивчити канати Electron.

Коли проблеми з’являться (і вони будуть), вам буде краще, якщо ви побудуєте свій власний початковий проект, а не виберете один із сценаріями +30 нпм та +180 залежностями для початку.

Тим не менш, як тільки ви почуватиметеся комфортно з основою Electron, сміливо активізуйте гру за допомогою Webpack / React / Redux / TheNextHotFramework. Я робив це поступово і за потреби. Не додайте базу даних у реальному часі до своєї програми todo лише тому, що ви десь читали про неї цікаву статтю.

2. Уважно структуруйте свій додаток? ‍♂️

Це взяло трохи більше часу, щоб отримати право, ніж я радий визнати. ?

На початку може бути спокусливо змішати інтерфейс користувача та код вихідної мережі (доступ до файлів, розширені операції процесора), але все досить складно. У міру того, як моя програма зростала у функціональних можливостях, розмірах та складності, підтримка однієї заплутаної кодової бази інтерфейсу + інтерфейсу стала більш складною та схильною до помилок. Крім того, муфта ускладнила випробування кожної деталі ізольовано.

Створюючи настільний додаток, який робить більше, ніж вбудована веб-сторінка (доступ до БД, доступ до файлів, інтенсивні завдання центрального процесора ...), я рекомендую розділити програму на модулі та зменшити зв'язок. Модульне тестування стає легким, і існує чіткий шлях до інтеграційного тестування між модулями. Щодо taggr , я вільно дотримувався запропонованої тут структури.

На додачу до цього є продуктивність . Вимоги та очікування користувачів щодо цього питання можуть сильно відрізнятися залежно від програми, яку ви створюєте. Але блокування основних потоків або рендерингу дорогими дзвінками ніколи не є хорошою ідеєю.

3. Дизайн з урахуванням моделі різьблення?

Я не буду вдаватися тут занадто детально - я в основному подвоюю те, що чудово пояснюється в офіційних документах.

У конкретному випадку taggr існує багато тривалих процесорів CPU, GPU та IO. При виконанні цих операцій у головному потоці або вікні візуалізації Electron, кількість FPS падає з 60, змушуючи інтерфейс почуватися мляво.

Electron пропонує декілька альтернатив для вивантаження цих операцій з основного потоку та потоку візуалізації , таких як WebWorkers, Node Worker Threads або BrowserWindow. Кожен з них має свої переваги та застереження, і випадок використання, з яким ви стикаєтесь, визначить, який з них найкраще підходить.

Незалежно від того, яку альтернативу ви вибрали для вивантаження операцій з основних потоків і потоків візуалізації (за потреби), враховуйте, яким буде інтерфейс зв'язку . Мені знадобився час, щоб придумати інтерфейс, яким я був задоволений, оскільки це сильно впливає на структуру та функціонування вашого додатка. Я знайшов корисним експериментувати з різними підходами, перш ніж вибрати один.

Наприклад, якщо ви думаєте, що інтерфейс передачі повідомлень WebWorkers може бути не найпростішим для налагодження, спробуйте comlink.

4. Тест ❌, тест ❌ та тест ✔️

Старі новини, так? Я хотів додати це як останній пункт, через кілька анекдотичних "питань", з якими я нещодавно стикався. Тісно пов’язаний із першим та другим пунктами, побудова власного проекту для початківців та ранні помилки дозволять вам заощадити дорогоцінний час налагодження у подальшому розвитку.

Якщо ви дотримувались моїх рекомендацій щодо розподілу інтерфейсу програми та бекенда на модулі з чистим інтерфейсом між ними, налаштування автоматизованих тестів модулів та інтеграції повинно бути простим. У міру дозрівання програми ви можете додати підтримку для тестування e2e.

Вилучення місцезнаходження GPS? ️

Два дні тому, впроваджуючи функцію вилучення місцезнаходження GPS для taggr , як тільки модульні тести стали зеленими, і ця функція працювала у розробці (разом з Webpack), я вирішив спробувати її у виробничому середовищі.

Незважаючи на те, що ця функція добре працювала в розробці, вона не вдалась у виробництво. Інформація EXIF ​​із зображень була прочитана як двійкова та оброблена сторонніми бібліотеками. Хоча двійкова інформація була правильно завантажена в обох середовищах (перевірено за допомогою diff), стороння бібліотека не вдалася під час аналізу таких даних у виробничій збірці. Вибачте, ??

Рішення : Я виявив, що налаштування кодування в середовищах розробки та виробництва, встановлених Webpack, були не однаковими. Це призвело до аналізу двійкових даних як UTF-8 під час розробки, але не у виробництві. Проблему було вирішено шляхом налаштування належних заголовків кодування у файлах HTML, завантажених Electron.

Веселі картинки?

Маніпулюючи зображеннями та працюючи з ними, ви можете подумати, що якщо JPEG просто працює на вашому комп’ютері, це дійсний JPEG. Неправильно .

Під час роботи з бібліотекою обробки зображень Node різко , зміна розміру деяких зображень JPEG призвела до збою програми. Придивившись, причиною стали неправильні зображення JPEG, створені прошивкою Samsung. ? ‍♂️

Рішення : налаштування вдосконалених меж помилок у програмі (наприклад, блоки спроби лову), налаштування модуля синтаксичного аналізу JPEG і підозра на все. ? ️

Резюме

Екосистеми Node та JavaScripts розквітають, щодня створюється та ділиться багатьма потужними інструментами.

Кількість варіантів ускладнює вибір чіткого шляху для створення нової чудової програми Electron. Незалежно від вибраних вами систем, я б рекомендував зосередитись на наступному:

  1. Почніть з малого і додайте складності поступово.
  2. Уважно структуруйте свій додаток , зберігаючи серверну інформацію та проблеми модульного інтерфейсу.
  3. Проектуйте з урахуванням моделі потоків , навіть під час створення невеликих додатків.
  4. Тестуйте і перевіряйте ще раз , щоб рано вловити більшість помилок і зберегти головний біль.

Дякуємо, що тримаєтесь до кінця! ?

taggr - це багатоплатформний настільний додаток, що дозволяє користувачам заново відкрити свої цифрові спогади , зберігаючи конфіденційність . Незабаром Open-alpha з’явиться в Linux, Windows та Mac OS. Тож стежте за Twitter та Instagram, де я публікую оновлення щодо розробки, майбутні функції та новини.