Как разрабатывать кросс-терминальные приложения на основе Electron

внешний интерфейс Electron
Как разрабатывать кросс-терминальные приложения на основе Electron

Это не политый первый 63 оригинал, ну хотите получить больше оригинального текста, пожалуйста, подметайте 👆 код Fanger Wei Следите за нами на нем ~ Эта статья впервые появилась в раннем чате интерфейса:Кросс-энд и кросс-стековая сериализация 3/7: Electron создает кроссплатформенные настольные приложения

Самостоятельное введение

Приветствую всех на сегодняшней утренней сессии по кросс-терминалу и кросс-стеку.Сегодня я делюсь темой "Как разрабатывать кросс-терминальные приложения на основе Electron". Позвольте мне сначала представиться. Меня зовут Лу Цзыян. Я присоединился к Zhengcaiyun в 2017. В настоящее время я в основном отвечаю за создание инженерной платформы Zhengcaiyun Dunhuang и клиента электронных торгов Zhengcaiyun. Вот публичный аккаунт WeChat нашей команды.Если вы хотите узнать больше о нашей команде, вы можете обратить внимание на наш публичный аккаунт.

Прежде всего, первая часть, которую мы разделяем, называетсяконец расширения. Я не знаю, знакомы ли вы с этой картинкой. Вы должны были услышать новость некоторое время назад. Илон Маск, Железный человек из Силиконовой долины, выпустил первый коммерческий пилотируемый космический корабль-дракон. Это изображение - космический корабль-дракон. Консоль, кто-то на Zhihu прокомментировал эту картинку, назвав JS раем. Почему это называется JS God? Потому что ходят слухи, что он разработан на основе Electron, но эта новость не подтвердилась. Но можно подтвердить, что пользовательский интерфейс сенсорного интерфейса космического корабля действительно реализован на основе архитектуры Chromium + JavaScript. Это также объясняет, в некоторой степени, доступность и стабильность этой архитектуры.

Здесь мы оглядываемся назад на переднюю часть процесса разработки в конце поля. В ранних определениях фронтенд-инженеры могли разрабатывать операционную веб-среду браузера, но с появлением Node.js в 2009 г. у фронтенд-инженеров появилась возможность работать из среды разработки браузера. У нас есть возможность быть сервис-ориентированной стороны развития, возможность расширения перед сервером.

При разработке стандарта HTML5 и разработка технологии мобильных устройств, передние инженеры могут также охватить развитие мобильно-ориентированных сценариев больше. Существуют также кроссплатформенные технические решения, такие как реагирование на родных в мобильном поле, как упомянуто двух лекторов этим утром. Как мобильное приложение становится основным, основываясь на вычислительной мощности этих интеллектуальных устройств и чипов, интерфейс также популяризирован в направлении устройств IOT. Внутренний конец может иметь возможности разработки IOT, а также таких вещей. JS также рождается. Рамки JS для разработки подключенного устройства.

CLI -> GUI

Сегодняшняя темарабочий стол，随着 Electron 这样的跨终端 JS 框架的出现，整个前端工程师的能力也是延展到了桌面端。 Когда у нас есть такие возможности для разработки настольных компьютеров, какую ценность они могут нам принести? Во-первых, давайте посмотрим, какие разные возможности предлагает нам настольная версия. Вы можете видеть изображение слева, которое является скриншотом работы системы DOS раннего компьютера, а справа — первый персональный компьютер Apple Lisa, выпущенный Apple Computer в 1983 году, который является первым компьютером, оснащенным графический пользовательский интерфейс (то есть мы именно благодаря появлению этого компьютера осуществилась популяризация персональных компьютеров в более поздний период. Причина, по которой это приведет к популяризации персональных компьютеров, заключается в том, что графический интерфейс более визуально приемлем для пользователей, а стоимость обучения также значительно снижается. Я считаю, что студенты, которые использовали систему MAC, будут иметь глубокое представление о превосходном дизайне интерфейса Apple и общем интерактивном опыте.

Я полагаю, вы знакомы с процессом слева Когда мы начинаем разработку нового проекта, что нам нужно сделать? Первым шагом может быть создание репозитория Git, клонирование репозитория в локальный каталог после создания, а затем установка инструмента CLI в команде для выполнения, например.xxx-cli createТакая команда для создания проекта. После создания проекта, если мы хотим развиваться, нам нужно запуститьnpm install, установите необходимые зависимости и, наконец, отправьте весь проект в репозиторий Git. Это создание нашего нового проекта, рабочего процесса, основанного на методе CLI.

Если исходить из возможностей клиента, какие изменения мы можем внести? Мы видим, что изображение справа — это скриншот системы Dunhuang, интерфейсной инженерной платформы нашей команды. Если вы создаете новый проект, вам нужно только выбрать свой собственный метод создания, а затем ввести некоторые необходимые параметры создания, такие как выбор группы репозитория Git, имя проекта, тип скаффолдинга, который необходимо создать, и после нажатия «Создать проект», это автоматически поможет вам выполнить все процессы слева. То есть 6 шагов слева упрощаются до 2 шагов, что значительно упрощает операцию связи.

Значение, заданное графическим интерфейсом

Какую ценность дает нам GUI? Во-первых, он может объединять разрозненные задачи в серии, обеспечивая более простую связь операций, в то же время он также может сглаживать различия между некоторыми процессами, используемыми разными учащимися, а также различия в некоторых средах на от которого зависит процесс, и на основе интеграционных возможностей графического интерфейса мы также можем вступать в сговор с другими возможностями по горизонтали и разрабатывать механизм подключаемых модулей через графический интерфейс, а также мы можем создавать совместно конструируемую экосистему. В то же время низкая стоимость обучения работе с графическим интерфейсом на основе графического интерфейса и его хостинг всего процесса также могут значительно снизить сложность исследований и разработок для групповых студентов.

Приложение бизнес-сценария

Ниже приведены сценарии посадки некоторых ключевых приложений, разработанных на основе Electron. Это бизнес клиента электронных торгов Zhengcaiyun, за который я несу ответственность. Его основная функция заключается в том, чтобы помочь пользователям перейти от традиционных офлайн-торгов и бумажных ставок к электронным ставкам, мы предоставляем такой клиент, чтобы помочь пользователям подключить весь процесс создания ставок. В то же время, на основе возможностей Node.js, предоставляемых Electron, чтение и запись локального тендерного файла пользователя, а также шифрование и дешифрование локальных файлов могут выполняться в клиенте.

Применение сценария инфраструктуры

Вот практика Electron на нашей инженерной платформе, которая является передовой инженерной платформой, о которой мы упоминали ранее — Dunhuang. Его основное содержание состоит в том, чтобы разместить весь процесс передовых исследований и разработок, и создание проекта, о котором мы только что упомянули, является одной из ссылок. Ниже мы подробно рассмотрим некоторые из этих приложений.

режим разработки

Выше мы кратко представили некоторые ценности Electron. Если мы хотим разработать кроссплатформенное настольное приложение на основе Electron, как нам это сделать? Давайте посмотрим на это вместе, вторая часть ** режим разработки. **В чем разница между режимом разработки Electron и нашей обычной веб-разработкой?

Электронная архитектура

Прежде всего, это общая архитектура Electron, это фреймворк с открытым исходным кодом, разработанный Github, который позволяет нам использовать HTML + CSS + Javascript для создания и разработки настольных приложений, что значительно снижает сложность разработки настольных приложений. Основной состав общей архитектуры состоит из Chromium + Node.js + Native API. Среди них Chromium предоставляет возможности пользовательского интерфейса, Node.js позволяет Electron иметь базовые операционные возможности, а API-интерфейсы Navtive решают некоторые межплатформенные проблемы, такие как экранирование некоторых различий между системами Windows, системами MAC OS и системами Linux. Он также предоставляет собственные возможности для более унифицированного взаимодействия.

точка способности

Давайте представим некоторые из его основных возможностей.

  • Во-первых, это Chromium. Мы можем понимать его как браузер Chrome с новейшими функциями браузера. Преимущество, которое он дает нам, заключается в том, что нам не нужно учитывать совместимость браузера в процессе разработки. Мы можем использовать некоторые ES6, ES7. Последний синтаксис, вы можете уверенно использовать макет Flex и новейшие функции браузера, вы можете попробовать его, и вам не нужно учитывать проблемы совместимости.

  • Node.js предоставляет возможность чтения и записи файлов, вызова локальных команд и сторонних расширений.Основываясь на всей мощной экосистеме Node.js, во всем клиенте можно использовать почти сотни тысяч модулей Node.js. .

  • Нативные API обеспечивают единый интерфейс для унифицированных возможностей, но также включают в себя некоторые уведомления системы, ярлыки клавиш, вы также можете получить информацию о некоторых из оборудования системы через него. Также он предоставляет базовые возможности настольного клиента, например, механизм обновления, такой как возможность сообщать о сбое.

Сравнение других вариантов рабочего стола

Electron предоставляет эти точки возможностей, что значительно снижает стоимость разработки рабочего стола и порог для начала работы. Конечно, для десктопной разработки, помимо Electron, будут еще какие-то варианты, давайте разберемся, чем он отличается от других вариантов.

  • Для разработки настольной части вы можете сначала выбрать Нативная разработка, Однако при разработке разных платформ вам необходимо использовать разные языки, но его преимущества в том, что он имеет лучший собственный опыт и лучшую производительность, но его порог относительно низок. Он по-прежнему относительно высок.
  • QT — это кроссплатформенная среда разработки настольных компьютеров на основе C++. В ней используется язык C++. С точки зрения общей производительности и опыта она сравнима с собственной разработкой. Однако из-за технологического стека порог разработки также относительно невысок. относительно высокая.
  • Двумя другими являются Electron и NW.js. Оба они используют Javascript в качестве языка разработки. По сравнению с Native и QT они довольно дружелюбны к фронтенд-инженерам, и оба имеют относительно схожую архитектуру, основанную на реализации Chromium + Node.js, а также имеют возможность кроссплатформенной поддержки. Но разница между ними заключается в том, что у Electron лучше экология сообщества и активность сообщества. Если мы обычно сталкиваемся с некоторыми проблемами, в сообществе может быть все больше и больше полных решений. В то же время его скорость реагирования на проблемы также относительно быстро.

Таким образом, исходя из приведенного выше сравнения, Electron — очень хороший выбор для фронтенд-инженеров для разработки настольных клиентов.

Электронная структура простых приложений

Следующий взгляд, если вы хотите разработать настольный клиент, как мне это сделать? Вот простая структура настольных приложений Electron, нам нужно всего три файла, мы сначала передаем package.jsonmainполе, черезmainполе для определения начальной записи для приложения. Мы определяем входной файл какmain.js,существуетmian.jsЧто мы здесь сделали? Во-первых, приложение представляет собой все приложение и отслеживает его состояние. Когда все приложение достигает состояния готовности, оно будет предоставлено Electron.BrowserWindow, чтобы создать новое окно браузера. После создания окна браузера переходим к загрузкеindex.htmlFile, поэтому мы завершили реализацию одной из самых простых версий настольного приложения. На основе разработки настольных приложений Electron, две основные концепции, которые не совпадают, нам нужно знать, и обычно разработка веб-приложений заканчивается:Как наладить связь между основным процессом и процессом рендеринга, а также двумя процессами для достижения. В предыдущем примере, гдеmain.jsработает в основном процессе,index.htmlОн работает в процессе рендеринга. Давайте возьмем простую демонстрацию, чтобы увидеть, как реализовать связь между двумя процессами и как вызвать некоторые возможности Node.js через основной процесс.

связь между процессами

Мы хотим добиться такого эффекта, на странице есть кнопка, при нажатии на кнопку она отправляетsay-helloсообщение, когда основной процесс получает сообщение, он создаст файл на рабочем столе системы с именемhello.txt. и напишите содержаниеHello Mac!。Как именно мы это делаем?

Во-первых, в процессе рендеринга у нас должно быть событие срабатывания кнопки на странице, при срабатывании которого мы будем предоставлять его через Electron.ipcRendererAPI отправляет вызов основному процессуsay-helloтакое сообщение. Когда наш основной процесс получает такое сообщение, он может напрямую вызвать модуль fs Node.js, модуль для чтения и записи файлов, в основном процессе. Сначала создадим файл и запишем содержимое нашего трансфера в этот файл. Когда файл будет успешно записан, ответьте на процесс рендеринга, вызвав Electron ProvidedNotificationМодуль отображает системные уведомления для информирования пользователей. Это простая демонстрационная реализация. Суть заключается в том, чтобы обратить внимание на концепцию основного процесса и процесса рендеринга, а также на то, как два процесса взаимодействуют через механизм IPC. Вот простой реализация. Есть еще несколько сценариев применения, и в этом разделе мы не будем слишком много рассказывать об API.

Ниже мы представим практику разработки Electron на основе реального приложения.

Инженерная разработка CLI -> GUI

Взяв в качестве примера нашу интерфейсную инженерную платформу Dunhuang, мы покажем, как мы используем Electron для изменения наших инженерных возможностей с CLI на GUI. Прежде всего, давайте посмотрим видео, которое является демонстрацией работы всего процесса создания проекта, о котором мы говорили в начале. Вы можете видеть, что весь наш процесс завершил создание хранилища Git, создание шаблона проекта, отправку шаблона проекта в хранилище и локальное клонирование проекта Git.После завершения клонирования зависимости будет установлен и переустановлен на клиенте. Загрузите и управляйте таким процессом. Объедините ранее разбросанные одноточечные командные операции через графический интерфейс. Этот процесс является лишь частью инженерной платформы, во всей инженерной платформе мы реализовали подключение множества одноточечных команд к рабочему процессу.

I2P (установить для публикации)

Вот системная архитектура всей нашей платформы управления интерфейсными приложениями, взгляните на нее. Основной процесс представляет собой описанную выше концепцию I2P, котораяinstall to publish. Он завершает три уровня компонентов, шаблонов и проектов, от создания до публикации всего процесса хостинга.

  • На этапе создания в основном предоставляется обратная связь, включая локальное создание, создание Git, управление унифицированным шаблоном создания, утверждение процесса создания и завершение создания.
  • На этапе разработки он обеспечивает возможность работы Dev Server, управление страницами на уровне проекта, управление зависимостями, управление ветвями и возможность обновления одним щелчком мыши. В то же время он также открыл возможности непрерывной интеграции CI/CD.
  • Этап выпуска обеспечивает проверку прав и тестирование на соответствие, а также высвобождение ресурсов для утверждения механизма предварительного выпуска.
  • Анализ данных является основной частью всего нашего процесса. Он выделяет некоторые данные во всем нашем процессе и выводит эти данные в виде визуальных отчетов. На основе этих данных весь процесс I2P сравнивается с другими возможностями.

Во всем вышеописанном процессе I2P мы ускорили некоторые данные проекта, включая данные процесса, и, возможно, некоторые данные, аналогичные управлению компонентами. Используя данные в качестве точки соединения, весь процесс НИОКР может быть последовательно связан с другими возможностями технического построения, включая анализ поведения пользователей, отчеты об анализе производительности на уровне страниц и проектов, а также механизмы мониторинга ошибок. вся инженерная платформа. Поддержка всей нашей инженерной платформы — это некоторые базовые возможности и возможности рабочего стола, предоставляемые Electron. Базовые возможности, в том числе некоторые обычные операции GIt, операции NPM, выполнение некоторых команд и некоторые службы локального журнала. Electron предоставляет настольную часть, включая обновления, управление окнами, связь и некоторые собственные возможности.

от точки к строке

Единая команда -> поток задач

Давайте конкретно рассмотрим, как реализовать конкатенацию из одной точечной команды в поток задач. Чтобы изменить работу одноточечной команды на последовательный режим потока задач, мы должны реализовать ее из следующих четырех точек входа. • Прежде всего нам нужно преобразовать некоторые обычные вызовы команд в вызовы функций. • Организуйте и соберите поток задач на основе этих функциональных вызовов и настройте поток задач в соответствии с реальным сценарием разработки. • Третий элемент, который нам нужен, — это механизм обратной связи о ходе выполнения всего потока задач, способ выполнения задачи с помощью графического пользовательского интерфейса, чтобы пользователь мог интуитивно чувствовать связь выполнения и ход выполнения всей задачи. • Наконец, во всем потоке задач очень важной частью является сбор данных всего процесса.

разработка процесса

Ниже представлен архитектурный дизайн процесса создания проекта, который мы только что продемонстрировали. Когда мы вызываем модуль создания проекта, мы сначала создадим проект Git через интерфейс сервера. Сначала выполняется уровень проверки прав доступа всего пользователя.После прохождения проверки создается хранилище путем вызова API Gitlab.После этого единый шаблон проекта обслуживания вытягивается в соответствии с выбранной информацией шаблона.Согласно к вводу проекта с помощью имени пользователя, описания проекта и другой информации для создания реального файла проекта и вызова API Gitlab для отправки всего файла проекта в созданный репозиторий. Что касается использования Gitlab API, статьи были опубликованы на Nuggets, Если вам интересно, вы можете узнать об этом, и я не буду подробно останавливаться на этом здесь. После того, как весь наш сервер завершит ряд операций по созданию Git, URL-адрес успешно созданного хранилища будет передан нашему рабочему столу.После получения результатов успешно созданной задачи рабочий стол начнет выполнять некоторые локальные операции. Клонируйте репозиторий Git в свою локальную рабочую область и одновременно устанавливайте зависимости для всего проекта. После установки зависимостей мы будем использовать возможности уведомлений рабочего стола, включая интерфейс DingTalk, для завершения уведомлений и обратной связи. Среди них клонирование, установка зависимостей и обратная связь с уведомлениями выполняются в основном процессе нашего рабочего стола. Он имеет обратную связь в режиме реального времени и процесс рендеринга на протяжении всего нашего потока задач. Мы будем сообщать о ходе выполнения всей задачи, включая вывод журнала выполнения команды и результат выполнения команды, с рендерингом в режиме реального времени через IPC и, наконец, давать отзывы пользователей об интерфейсе. На протяжении всего процесса также сохраняются данные проекта и данные процесса.

Чтобы добиться такого цельного процесса, что нужно сказать на практике?Давайте посмотрим на конкретный код.

npm install становится npm.install()

Во-первых, при вызове командыnpm installТакой вызов командной строки становится функциональным вызовом, который становитсяnpm.install()Такой метод вызова.

git init становится git.init()

Git-подобные команды также станут функциональными вызовами.

Делайте императивные обещания выполнения

Давайте рассмотрим конкретный сценарий, как превратить императивный вызов в вызов функции. Первый — Обещать выполнение команды. Напримерgit initВ такой операции при выполнении всей команды нас больше волнует результат выполнения всей команды, и мы можем не сильно заботиться о каком-то выводящемся содержимом во время выполнения команды. Таким образом, мы можем передать Node.jsspawn, запустите подпроцесс для выполнения команды. Судя о статусе выполнения всей нашей команды, прослушивая вывод подпроцесса, а затем инкапсулируя всю команду с помощью Promise, мы закончили.git initТакой вызов командной строки становитсяgit.init()Такой асинхронный вызов функции.

Журнал выполнения команды вывода в реальном времени

В другой сцене, напримерnpm install，依赖安装，或者说启动本地开发服务，整个命令的执行过程可能会比较长，我们更关注的是过程中实时的日志输出。 Как мы делаем это?首先我们这边是先创建一个EventEmitterНапример, в качестве управления распределением наших журналов мы также передаемspwanЧтобы запустить дочерний процесс для выполнения команды и вывода подпроцесса в режиме реального времени, пропустите лог через логemitterЭкземпляр распространяет его. Когда мы получаем такой вывод журнала в реальном времени в основном процессе, мы можем выводить журнал в процесс рендеринга в реальном времени через связь IPC между основным процессом Electron и процессом рендеринга.

Превратите императивные вызовы в функциональные вызовы. С помощью этой возможности вы можете упорядочить поток задач, вызывая эти функции. Например, создание проекта, о котором мы только что упоминали, что может быть относительно распространенным процессом, а также управление компонентами, управление шаблонами и выпуск проекта. Вы можете организовать свой собственный поток задач в соответствии с реальными потребностями вашего бизнеса.

Терминал моделирования: обратная связь о ходе выполнения задачи

Выше мы упомянули некоторые изменения в способе выполнения всей команды в основном процессе. Итак, в нашем процессе рендеринга, как нам добиться обратной связи журнала терминала, похожей на только что показанное видео? Есть много способов оставить отзыв.Мы можем оставить отзыв о ходе выполнения всей задачи, разработав пошаговую шкалу для некоторых задач или индикатор выполнения. Но лучший способ заключается в том, что мы можем дать своевременную обратную связь о ходе выполнения задачи, включая весь журнал выходных данных задачи. Здесь мы используем xterm.js. Это интерфейсный компонент терминала, написанный на основе ts, который может реализовывать терминальные приложения в браузере.VsCode также основан на xterm.js для реализации терминала. Как вывести журнал основного процесса в процесс рендеринга, это то, о чем мы упоминали выше.После получения вывода, передаваемого EventEmitter, данные должны быть переданы в процесс рендеринга через связь между основным процессом и процессом рендеринга. Процесс рендеринга — это процесс, который необходимо выполнять в процессе рендеринга, а полученные выходные данные команды визуализируются в режиме реального времени на терминальный компонент, реализованный xterm.

Таким образом, мы завершаем механизм обратной связи всего потока задач.

Выше приведена реализация потока задач в нашей инженерной платформе.С помощью возможностей Электрона мы легко реализуем постановку задач всего процесса, а также реализуем интерфейсное взаимодействие соответствующего процесса и упрощаем весь процесс . В дополнение к реализации потока задач нам необходимо уделять больше внимания сбору данных во всем процессе, включая данные процесса, осаждение данных проекта и компонента, созданное в процессе, и некоторые аномальные данные в процессе, потому что эти данные Это основа для открытия других возможностей инфраструктуры, и в то же время это также позволяет нам постоянно оптимизировать весь процесс.

возобновить

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

Electron предоставляет относительно полный механизм обновления пакетов.

После сборки нашего приложения через Election-Builder он выведет файл last-mac.yml и zip-пакет приложения, и поместит эти два файла на сервер обновлений.Существует множество схем реализации сервера обновлений.CDN как сервер обновлений. Как мы проектируем весь процесс обновления?В процессе рендеринга обычно предоставляется триггерная запись для ручного обнаружения обновлений, или определение обновления версии выполняется регулярно с помощью задач опроса. После того, как процесс рендеринга инициирует запрос на определение версии, он будет вызван в процессе рендеринга.autoUpdaterмодуль, этоElectronВстроенный модуль управления обновлениями. Во-первых, вам нужно установить feedUrl, который является адресом последнего пакета обновлений на сервере обновлений. После получения запроса на определение версии для процесса рендеринга вызовитеcheckForUpdatesметод, а затем он вызовет следующую серию событий.Мы можем полностью контролировать весь процесс обновления, отслеживая каждый жизненный цикл всего события обновления.

Проблема, с которой сталкивается встроенный механизм обновлений Electron, заключается в том, что пакет обновлений относительно велик. Поскольку настольное приложение, которое мы создали через Electron, интегрирует весь Chromium, даже если мы напишем небольшое приложение, такое как Hello world, его объем после сжатия составит около 40 МБ, обычное приложение может занимать около 100 МБ. Такая проблема заключается в том, что когда есть какие-то относительно небольшие изменения, требуется полное обновление, что не очень хорошо для пользовательского опыта Какие решения у нас есть для этого? Прежде всего, мы можем оптимизировать весь обновленный дизайн взаимодействия. Что нам нужно предоставить, так это обратную связь о ходе всего процесса обновления, и еще один момент заключается в том, что мы можем использовать autoUpdater для достижения фоновых загрузок. Когда мы завершим загрузку всего пакета обновлений, а затем уведомим пользователя о перезапуске всего приложения, а затем обновим все приложение, таким образом, с интерактивного уровня, в определенной степени добавочное обновление избежит пользователя опыт, некоторое влияние. Конечно, с полными обновлениями будут проблемы, если количество пользователей относительно велико, это приведет к трате сетевых ресурсов.

Инкрементное высвобождение

Ниже приведены некоторые из наших практик по инкрементным выпускам. Во-первых, статические ресурсы всего уровня визуализации размещаются в CDN. Для всего нашего приложения статические ресурсы уровня рендерера не будут упакованы в конечную настольную программу, а ресурсы будут размещены удаленно.В то же время, согласно некоторым конкретным бизнес-сценариям, мы можем использовать возможности сервис-воркера для сделать автономный кеш для всего ресурса и сделать контроль версий для статических ресурсов.

процесс обновления

Процесс обновления слоя Renderer выглядит следующим образом: когда страница отправляет запрос, она сначала сопоставляется с тем, есть ли кэш такого ресурса локально, и если мы сопоставляем ресурс, он возвращает соответствующий результат. Если локального совпадения нет, последний ресурс повторно запрашивается, и запрошенный ресурс одновременно кэшируется. Если во время всего процесса запроса возникает ошибка, вам необходимо иметь версию ресурса по умолчанию, которую можно использовать, и сообщить об ошибке. Здесь мы реализовали добавочное обновление на основе слоя пользовательского интерфейса. В реальных бизнес-сценариях необходимо решить, следует ли оптимизировать процесс обновления, использовать добавочное обновление на уровне пользовательского интерфейса или добавочное обновление пакета установки в соответствии с частотой обновления различных ресурсов.

Схема технической архитектуры инженерной платформы Дуньхуан

Вот архитектура всей платформы управления приложениями.Во всей нашей инженерной практике, помимо реализации полного процесса I2P-хостинга всего проекта, компонентов и шаблонов, мы также предоставляем другие возможности, такие как конвергенция групповых порталов, Включая ввод документа, ввод вывода и в то же время интеграцию некоторых инструментов в команду, интеграцию некоторых инструментов, разбросанных по разным местам, таких как инструменты создания сайта документа, инструменты для создания изображений, инструменты управления значками, и мы. Он также собирает поведение пользователей данные всего клиента и непрерывно повторяет анализ данных.

больше сцен

Вышесказанное является практикой нашей фронтенд-инжиниринговой платформы на основе Electron. Конечно, у Electron будут и другие сценарии применения, давайте посмотрим.

Во-первых, код VS, а также IDE апплета Alipay также реализованы на основе фреймворка Electron.

Слева находится настольный инструмент управления интерфейсом, предоставляющий вспомогательные функции для процесса разработки. Другой switchhosts, который является инструментом управления локальной средой. Вы можете видеть, что настольные приложения, разработанные на основе Electron, участвуют во всем нашем процессе исследований и разработок, начиная с нашего управления локальной средой, управления процессами, помощи в разработке и этапов редактирования исследований и разработок. Платформа управления инженерными разработками находится в сговоре со всем процессом жизненного цикла НИОКР, но на этапе фактического кодирования фактически отсутствует связь, которая по-прежнему должна полагаться на возможности IDE. Основываясь на некоторых возможностях Electron в направлении IDE, одно из наших будущих направлений также заключается в том, чтобы надеяться на сговор со всей локальной средой кодирования IDE и всем нашим процессом исследований и разработок, чтобы действительно реализовать сговор и повышение эффективности всего звена исследований и разработок. .

Ниже приводится книга, которую я лично рекомендую, "Неизведанная дорога". Из нее вы можете почерпнуть то, как смотреть на проблемы, с которыми вы сталкиваетесь, более зрелым умом. В процессе взросления нас ограничивает, скорее всего, ограничение познания и мышления. Какое познание и менталитет смотреть на возникающие проблемы будут определять, какой ответ и какая способность реагировать на эти проблемы. Эта книга позволит нам больше узнать о том, как смотреть на возникающие проблемы более зрелым умом. Я надеюсь, что с помощью этой книги каждый сможет научиться лучше справляться с проблемами, не связанными с технологиями, и лучше решать проблемы.

Прием на работу

Все вышеизложенное - это все, чем я делюсь сегодня. Вот QR-код официального аккаунта нашей команды. Вы можете узнать о некоторых результатах нашей команды. В то же время мы также набираем фронтенд-стажеров, старших и старших фронт- конечные инженеры недавно. Если вы заинтересованы, вы можете отправить свое резюме на адрес электронной почты ниже, спасибо~

QA

Я хотел бы спросить Ziyang: Как выполнить горячее обновление? Насколько я знаю, в пакет помещаются страницы, упакованные Электроном.Как обновить онлайн?

Я так понимаю, что проблема должна быть в обновлении интерфейса UI слоя. На самом деле, как я только что упомянул, мы размещаем некоторые статические ресурсы страницы на CDN, при обновлении будет механизм обнаружения обновления, который может быть реализован путем опроса или отправки сервера. обновить версию ресурса и выполнить принудительное обновление процесса рендеринга через основной процесс, игнорируя кеш.Обновить статические ресурсы на уровне пользовательского интерфейса.

Я хотел бы спросить Зияна: можете ли вы сравнить разницу между Electron и NW.js?

Самая большая разница между ними заключается в том, что интеграция Node.js и механизма цикла событий Chromium обрабатывается по-разному. Во-первых, NW.js позволяет открыть механизм цикла событий Chromium и Node.js путем изменения исходного кода; Electron реализует этот механизм, позволяя новому безопасному потоку пересылать события между Node.js и Chromium, чтобы соедините два. Одним из преимуществ этого является то, что механизм цикла событий Chromium и Node.js не так сильно связан. Еще одно отличие состоит в том, что NW.js поддерживает систему xp, а Electron — нет. Для сравнения, у Electron более активное сообщество и более практичные случаи крупномасштабных приложений, таких как код VS и Atom, Дополнительные различия см. В официальном представлении Electron:Woohoo.ВЕЛО электрона JS.org/docs/…

Я хотел бы спросить Ziyang: файлы пакета обновления находятся на частном файловом сервере или в Gitlab или Github?

Есть много способов, наша реализация через хостинг CDN, или через построение Github или частного файлового сервера. Выбирайте в соответствии с реальным бизнес-сценарием и стеком технологий.

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 50 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры с полным стеком, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com

Категории