Автор Франческо Ди Лоренцо
После года работы мы наконец-то запустили Boxy 2, и я подумал, что было бы неплохо написать пост с подробным описанием технологического стека, на котором он работает, и его эволюции по сравнению с первой версией приложения.
Boxy - это оболочка macOS для «Inbox от Gmail», которая за последние 18 месяцев добилась невероятного успеха в Mac App Store, достигнув более 20 000 платных загрузок с растущей и заинтересованной базой пользователей.
Мы думаем, что 99% этого успеха можно отнести к невероятной работе, проделанной командой Inbox в Google, тем не менее, наши усилия по внедрению Inbox на Mac в качестве нативного приложения действительно нашли отклик у некоторых пользователей, и мы очень благодарны за это.
Родное приложение
На стороне клиента Boxy построен с использованием AppKit, официальной платформы Apple для приложений Mac. Когда мы начали создавать Boxy, Electron не был так знаменит, как сегодня (используется в Slack и многих других успешных командах), но мы стоим за своим выбором. Самым большим преимуществом отказа от использования Electron является меньший размер двоичного файла (размер Boxy составляет всего 6 МБ, что более чем в 10 раз меньше, чем у среднего приложения Electron) и более быстрое время запуска. . Недостатком, конечно же, является то, что мы не можем легко поддерживать несколько операционных систем, но, как команда из двух человек с одним разработчиком, я думаю, что лучше всего было сосредоточиться только на Mac.
Если вдаваться в подробности, то основной опыт Boxy достигается с помощью WKWebView (новейшего API Apple для веб-рендеринга), сильно настроенного с помощью функций и тем, реализованных в JavaScript и CSS, чтобы преодолеть разрыв между браузером и собственной MacOS. приложение.
Большинство уникальных функций Boxy, таких как режим чтения и темы, требовали некоторого взаимодействия между собственным приложением и веб-аналогом. Это было сделано с помощью отличных WKWebView API, которые обеспечивают двунаправленную связь между веб-представлением и собственным приложением, с готовым соединением объектов между Javascript и Objective-C.
Javascript и CSS, где происходит волшебство
Что касается развертывания этих функций, мы решили не связывать JavaScript внутри приложения, а загружать его во время выполнения. Это было необходимо, поскольку команда Inbox постоянно настраивает приложение, и это иногда нарушает работу некоторых наших функций. Это не проблема, поскольку обычно мы можем развернуть исправление в течение нескольких часов, и никто этого не заметит (почти).
Для этого у нас есть отдельное репо, содержащее весь код JavaScript, со сценариями для создания JavaScript и CSS, в результате чего получается один файл, который затем может быть загружен внутри собственного приложения для настройки взаимодействия. Изначально это была индивидуальная система, которая хорошо нам служила, но быстро показала свои пределы. В версии 2 мы перешли к более интеллектуальному решению, использующему возможности Browserify, который делает то же, что и наша настраиваемая система, но с большей степенью гибкости. Мы размещаем файл, полученный в результате этого конвейера сборки, на Amazon S3, который оказался невероятно дешевым и надежным (мы платим ~ 2 доллара в месяц).
Программирование против движущейся цели при обеспечении наилучшего взаимодействия с пользователем
Как я уже упоминал ранее, приложение Inbox постоянно меняется, и это иногда ломает Boxy. Чтобы быстро реагировать на эти изменения, мы разработали систему под названием boxy-checker с Chrome Headless и Puppeteer.
Он работает на виртуальной машине Debian, размещенной на Linode (мы используем базовый план, что невероятно удобно) и постоянно проверяет, все ли элементы страницы, на которых мы полагаемся для реализации некоторых основных функций, все еще присутствуют. Для этого мы используем Jest от Facebook (отличная библиотека для тестирования) и их функцию создания снимков.
Когда что-то не так, мы получаем уведомление на нашем #emergency канале Slack и спешим работать. Это упрощает устранение проблем до того, как первая заявка в службу поддержки попадет в наш ZenDesk 🙌
Если вам понравился этот пост и вы хотите попробовать Boxy, вы можете узнать больше на официальном сайте или в Mac App Store.
