Автор оригинала: Alain Perkaz.
В этой статье я поделюсь, как вы можете избежать некоторых ошибок, которые я сделал, когда узнал о Electron.js? ♂. ️. Я надеюсь, что это помогает!
Примечание : Это будет учебное пособие по кодированию, а скорее обсуждение моей личной вынос.
Пару месяцев назад я решил больше сосредоточиться на создании моего бокового продукта, Taggr. . Я был вдохновлен, чтобы построить его из-за того, сколько фотографий у меня на моем компьютере.
Для тех из нас, которые поддерживают резервную копию своих фотографий, эти коллекции часто становятся настолько большими и сложными, что они становятся полной занятой работой. Смесь папок и подпапок могут содержать резервные копии изображений для обмена мгновенными сообщениями, фотографии Hi-Restauration из вашей поездки на Бали, свадьбу вашего дяди или бакалаврную вечеринку в последний год.
Всегда сохраняя такие коллекции, приборные это утомительно (поверь мне, я пробовал годами). Это также тяжело Чтобы обнаружить выстрелы, которые вы любите больше всего, скрытые глубоко в папках.
Итак, Taggr это настольное приложение, которое решает эту проблему. Это позволяет пользователям Rediscover их воспоминания, сохраняя их Конфиденциальность Отказ
Я строю Taggr как кроссплатформенный настольный приложение. Здесь я поделюсь некоторыми из вещей, которые я узнал о кроссплатформе Prapp Development с Electron.js Что я хотел бы знать с самого начала. Давайте начнем!
Фон
Прежде чем представлять свои вынос на это постоянное путешествие с электроном, я хотел бы дать немного больше фона о себе и требованиях Taggr Отказ
Каждый разработчик приходит с другой фона, и поэтому требования к приложениям они развиваются.
Контекстуализация вариантов, которые я сделал для этого проекта, может помочь будущим разработчикам выбирать правильные инструменты на основе их потребностей и опыта (а не то, что вылетено там – GitHub? Я смотрю на тебя).
Как упоминалось ранее, с самого начала я предусматривал Taggr в качестве кроссплатформенной приложения. Приложение будет выполнять все необходимые предварительные обработки и компьютерные вычисления на стороне клиента из-за фокусировки на конфиденциальности.
Как выставьте одному человеку, я хотел бы написать свое приложение один раз и отправить его в разные системы, не теряя здравомыслие.
С моей стороны я влюблен передний инженер в Интернете в Интернете и JavaScript. Раньше я работал с Java и C #, но я наслаждаюсь гибкостью, которую Web предоставляет и его яркая экосистема.
Испытал первую руку боль в использовании инструментов, таких как Eclipse RCP Чтобы построить клиентские приложения раньше, я знал, что я не хотел работать с этим Tech снова.
Короче говоря, мои требования к стекам для Taggr сводится к чему-то вроде следующего:
- Это должно обеспечить Кроссплатформенная поддержка, в идеале на рамках уровня. ?
- Это должно позволить мне Напишите код один раз и твик для каждой платформы, если это необходимо. ? ️
- Это должно включить Доступ к возможностям машинного обучения Независимо от состоявшейся окружающей среды, без устойчивых управлений. Это должно быть безболезненно настроить. ?
- Если это осуществимо, это должно Используйте веб-технологии Отказ Было бы здорово использовать мои существующие знания. ?
Как видите, требования не читаются как: Я должен использовать реагирование с redux, наблюдателями и websockets Отказ Это детали реализации более низкого уровня, и они должны быть решены на когда и если необходимость возникает.
Выберите нужный инструмент для работы, а не выбирая стек с самого начала, игнорируя проблемы под рукой.
Итак, после яростного гугла я решил дать электрон попробовать. Я не использовал эту структуру раньше, но я знал, что многие компании успешно используют его в таких продуктах, как Атом , VS код , Раздор , Сигнал , Слабый и более.
Открытый источник и со внешней совместимостью с помощью экосистем JS и узла (электрон – сборки с использованием хрома и узла), Electron.js был привлекательным инструментом для работы под рукой.
Я не буду слишком много познакомиться с остальной частью стопки, так как я неоднократно изменил основные части (настойчивость и просмотр слоев) при необходимости, и он выпадает из объема этой статьи.
Тем не менее, я хотел бы упомянуть Tensorflow.js , который позволяет проводить обучение и развертывать модели ML непосредственно в браузере (с WebGL) и узлом (с помощью C Bindings), не устанавливая определенные рабочие вещества для ML в хосте.
Так что обратно к электронному – думать, что это было идеально, началось веселье. ??
Достаточно говорить о фоновом режиме. Давайте погрузимся в вынос.
1. Начните маленьким (и медленно)?
Это не новая концепция, но стоит периодически подниматься. Только потому, что есть тонна удивительного Стартерские проекты С электронным доступным, это не значит, что вы должны выбрать одно прямо сейчас.
Ждать. Какие?
С удобством наступает сложность
Хотя эти начала включают много полезных интеграций (WebPack, Babel, Vue, React, Angular, Express, Jest, Redux), у них также есть свои проблемы.
Как электрон Newbie, я решил пойти на острый шаблон, который включал основы для «создания, публикации и установки электроновных приложений» без дополнительных колоколов и свистков. Даже WebPack в начале.
Я рекомендую начать с чего-то похожего на Электронно-кузница Чтобы быстро встать и работать, вы можете Настройте свой график зависимости и структуру сверху, чтобы узнать канаты электрона.
Когда проблемы приходят (и они будут), вам будет лучше, если вы построете свой пользовательский стартерский проект, а не собирать один С +30 сценариями NPM и +180 зависимостями для начала.
Тем не менее, как только вы чувствуете себя комфортно с основой электронов, не стесняйтесь активизировать игру с WebPack/React/Redux/DetexthotFramework. Я сделал это постепенно и когда нужно. Не добавляйте базу данных в Realtime к вашему приложению Todo, только потому, что вы читаете крутой статью о ней где-то.
2. Внимательно структурируйте ваше приложение? ♂. ️
Это заняло немного дольше, чтобы получить правильно, чем я рад признать. ?
В начале Может быть заманчиво смешивать код UI и Backend (Доступ к файлу, расширенные операции CPU), но все становится сложным довольно быстро. Поскольку мое приложение выросло в функциях, размере и сложности, поддержание одного запутанного UI + Code Backend CodeBase стала более сложной и подверженной ошибке. Кроме того, муфта сделала трудно проверить каждую часть в изоляции.
При создании настольного приложения, которое делает больше, чем встроенная веб-страница (доступ БД, доступ к файлу, интенсивные задачи CPU …), я рекомендую Нарезание приложения в модули и уменьшение муфты. Тестирование подразделения становится ветером, и есть четкий путь к тестированию интеграции между модулями. Для Taggr , Я свободно следовал за структурой, предложенной здесь Отказ
Кроме того, есть Производительность Отказ Требования и ожидания пользователей по этому вопросу могут различаться в зависимости от приложения, которое вы строите. Но блокировка основных или визуализации потоков с дорогими вызовами никогда не бывает хорошей идеей.
3. Дизайн с моделей резьбой в уме?
Я не буду идти слишком много в деталях здесь – я только в основном удваиваюсь, что удивительно объясняется в Официальные документы .
В конкретном случае Taggr Существует много долгосрочных процессоров, графических процессоров и интенсивных операций. При выполнении этих операций в основной или рендереверской резервере электронного или рендерера, количество FPS погружается от 60, что делает пользовательский интерфейс Sluggish.
Электрон предлагает несколько альтернатив Выполните эти операции от основных и рендеровских нитей , например WebWorkers , Узел рабочие потоки или BrowserWindow экземпляры. У каждого есть свои преимущества и предостережения, а лицо использования, которое вы столкнулись, будут определять, какой из них лучше всего подходит.
Независимо от того, какая альтернатива вы выбираете для разгрузки операций из основных и рендеровских потоков (при необходимости), Подумайте, как интерфейс связи будет Отказ Мне потребовалось некоторое время, чтобы придумать интерфейс, с которым я был доволен, так как он сильно влияет на то, как ваше приложение структурировано и функционирует. Я нашел полезным для эксперимента с разными подходами, прежде чем собирать один.
Например, если вы думаете, что интерфейс передачи сообщений WebWorkers может быть не самый простой для отладки, дайте ComLink попробовать.
4. Тест ❌, тест ❌ и тест ✔ ️
Старые новости, верно? Я хотел добавить это как последнюю точку, из-за пары анекдотальных «проблем» я недавно столкнулся. Сильно связаны с первыми и вторыми пунктами, создавая ваш пользовательский стартерский проект и доработающие ошибки рано, будут сэкономить вам время отладки в дальнейшем в развитии.
Если вы следили за моими рекомендациями для разделения пользовательского интерфейса APP и Backend в модули с помощью чистого интерфейса между двумя, настройка автоматизированного блока и тесты в интеграции должно быть легко. Как приложение созревает, вы можете добавить поддержку для E2E Тестирование тоже.
Добыча местоположения GPS? ️
Два дня назад, во время реализации функции добычи местоположения GPS для Taggr , Как только тесты подразделений были зелеными, и функция работала в разработке (с WebPack), я решил попробовать его в производственной среде.
Хотя функция работала хорошо в разработке, оно не потерпело неудачу в производстве. Информация exif из картинок была читается как двоичная и обработана сторонней библиотекой. Хотя двоичная информация была правильно загружена в обеих средах (проверено с diff ), третья сторонняя библиотека не удалась при анализе таких данных в сборке производства. Прошу прощения, ??
Решение : Я обнаружил, что настройки кодирования в средах разработки и производства, установленные WebPack, были не одинаковыми. Это вызвало анавты двоичных данных как UTF-8 в развитии, но не в производстве. Проблема была закреплена путем настройки правильных заголовков кодирования в файлах HTML, загруженных электроном.
Функи картинки?
При манипулировании и работе с изображениями, вы можете подумать, что если JPEG «просто работает» на вашем компьютере, это действительный JPEG. Неправильно Отказ
Работа с библиотекой обработки изображений узла острый Изменение размера нескольких изображений JPEG разбила приложение. Посмотрев тесно, причина была неверными изображениями JPEG, создаваемых Samsung прошивка Отказ ? ♂. ️
Решение : Настройка улучшенных границ ошибок в приложении (Ex. Try-Catch Blocks), настраивайте модуль анализа JPEG и подозревать все. ? ️
Резюме
Экосистемы узла и Javascripts цветут, со многими мощными инструментами создаются и совместно используются каждый день.
Количество опций делает его трудно выбрать четкий путь, чтобы начать построить ваше новое потрясающее электронное приложение. Независимо от ваших рамх выбора, я бы рекомендовал сосредоточиться на следующем:
- Начать маленький и добавить сложность постепенно.
- Внимательно структурируйте ваше приложение Держать бэкэнд и UI касается модуляризованной.
- Дизайн с образцом резьбы в уме даже при строительстве небольших приложений.
- Тест и тестируйте снова , чтобы поймать большую часть ошибок в начале и сохранить головные боли.
Спасибо за прилипание до конца! ?
Taggr это кроссплатформенное настольное приложение, которое позволяет пользователям Rediscover их цифровой воспоминания Удерживая их Конфиденциальность Отказ Open-Alpha приходит в ближайшее время на Linux, Windows и Mac OS. Так что держитесь на Twitter и Instagram. Где я публикую обновления разработки, предстоящие функции и новости.
Оригинал: “https://www.freecodecamp.org/news/lessons-learned-from-electronjs/”