Web Highlights — это расширение Chrome, предназначенное для упрощения выделения и сохранения важного контента в Интернете. С более чем 10 000 пользователей в неделю расширение стало ценным инструментом для многих людей, которым необходимо отслеживать важную информацию в Интернете.
В этой статье я рад поделиться с вами стеком технологий, лежащих в основе расширения и воплотивших этот проект в жизнь.
Введение
Когда я впервые начал разрабатывать Web Highlights 4 года назад, я не слишком интересовался стеком технологий. В то время это был просто забавный побочный проект — возможность впервые попробовать свои силы в создании расширения для Chrome.
Как и многие разработчики, я обратился к своему набору технологий и начал создавать Web Highlights.
Несмотря на то, что стек технологий немного изменился за последние несколько лет, я по-прежнему очень доволен своим первоначальным выбором. Не меняя ничего фундаментального, мое расширение способно синхронизировать все основные моменты с облачным и веб-приложением. На данный момент он может обрабатывать запросы 10 000 пользователей.
Внешний интерфейс
В основе расширения Web Highlights для Chrome лежат два основных клиентских приложения:
- само расширение, загружаемое в браузер пользователя,
- и связанное с ним веб-приложение, доступ к которому можно получить на веб-сайте web-highlights.com.
Расширение для браузера
В основе Web Highlights, очевидно, лежит само расширение для браузера. Эта часть приложения загружается в браузер пользователя, что позволяет выделять текст на любой веб-странице и в формате PDF.
Он также отображает сворачиваемую и расширяемую боковую панель, на которой отображаются все пользовательские текстовые выделения, заметки и теги.
Те, кто следит за моими статьями, вероятно, уже догадались, что большая часть архитектуры моего внешнего интерфейса построена с использованием веб-компонентов.
Веб-компоненты — это повторно используемые клиентские компоненты, основанные на официальных веб-стандартах. Это отличный способ изолироватьфункциональность от остального кода. Кроме того, вы можете повторно использовать их в каждом веб-приложении и веб-странице.
Веб-компоненты предлагают множество преимуществ, поэтому я использовал их с самого начала разработки расширения для браузера. Чтобы упростить процесс создания веб-компонентов, я решил использовать Lit library. Эта легкая библиотека, поддерживаемая Google, специально разработана для создания веб-компонентов и значительно упрощает процесс разработки.
Ранее я обсуждал преимущества веб-компонентов в различных статьях. Однако наиболее важным преимуществом, которое сэкономило мне много работы, является возможность повторного использования компонентов.
Благодаря простоте повторного использования я могу легко включить некоторые компоненты из расширения в соответствующее веб-приложение, о чем я расскажу подробнее в следующем разделе.
Я также использую Typescript, как и во всех других моих приложениях. Кроме того, я включил Redux для управления и синхронизации состояний в приложении.
Веб-приложение
В дополнение к расширению Chrome, Web Highlights также включает в себя прогрессивное веб-приложение (PWA), которое позволяет пользователям получать доступ к своим сохраненным основным моментам с любого устройства.
Вот как выглядит приборная панель:
Я решил использовать Vue.js для PWA несколько импульсивно. Это было в первые дни существования Vue.js, и вокруг него было много шума. Я был в восторге от его изучения, что побудило меня приступить к созданию интерфейса веб-приложения с его помощью.
Тем не менее, как уже упоминалось, я повторно использую многие веб-компоненты из расширения в Vue.js. Это избавляет меня от дублирования кода и работы. Глядя на панель инструментов Web Highlights, вы могли заметить, что некоторые компоненты очень похожи на компоненты расширения.
Причина этого в том, что они практически идентичны, за исключением того факта, что они загружаются в моем приложении Vue.js. Чтобы проиллюстрировать это, давайте сравним скриншот из моего расширения с PWA Vue.js и отметим их сходство:
Вы можете видеть, что расширенный редактор, кнопка «Поделиться» и панель инструментов используются в веб-приложении и расширении Chrome. В обоих приложениях используется гораздо больше компонентов. Тем не менее, я надеюсь, что это сравнение хорошо показывает преимущества повторного использования веб-компонентов.
Блог
Помимо внешнего интерфейса, я также веду блог на поддомене web-highlights.com/blog. Основным мотивом для создания блога было повышение рейтинга в Google.
В последние несколько недель я много занимался темой SEO и понял, что блог на своем домене может значительно улучшить рейтинг Google. Когда дело доходит до SEO, от него никуда не деться.
Ведение блога и создание контента на моем веб-сайте изменили правила игры. Если вы хотите узнать об этом больше, прочитайте эту статью:
Когда дело доходит до хостинга блога, есть несколько вариантов. Однако я выбрал собственный экземпляр Ghost.
Ghost – это мощное приложение для создателей новых медиа, позволяющее публиковать, делиться и развивать бизнес на основе своего контента.Оно поставляется с современными инструментами для создания веб-сайта, публикации контента, рассылки информационных бюллетеней и предложений. платные подписки для участников. — https://ghost.org/
Я создал цифровую каплю океана и настроил на ней Ghost. Это легко, так как Ghost и Digital Ocean предоставляют отличные начальные статьи и документацию.
Бэкенд
При выборе сервера для меня было важно, чтобы я также мог использовать JavaScript/Typescript. По двум основным причинам:
- Я просто лучше всего знаю JavaScript
- Я могу распространять код между сервером и внешним интерфейсом
Второй момент особенно важен для меня. Тот факт, что я могу повторно использовать код как во внешнем, так и во внутреннем интерфейсе, делает мой код намного чище. В моей статье Общий код между React Client и Express Server вы можете узнать, как реализовать это с помощью моно-репозитория.
Главный сервер
Огромная часть моего приложения составляет один сервер, который использует Nest.js. Nest.js — это мощная платформа Node.js, которая предоставляет надежный набор инструментов для создания масштабируемых и эффективных серверных приложений.
Сервер синхронизирует выделения, закладки, теги и заметки пользователей с облаком. Эта функция позволяет пользователям получать доступ к своим основным моментам не только в расширении, но и из любого места, где есть подключение к Интернету. Пользователи могут войти в веб-приложение, которое загружает все их основные моменты с сервера. Также есть возможность поделиться своим исследованием с друзьями, у которых нет расширения.
Для обеспечения безопасной аутентификации сервер использует технологию JSON Web Tokens (JWT). Кроме того, я интегрировал вход через Google с Firebase.
Кроме того, мой сервер обрабатывает несколько асинхронных процессов, которые я реализовал с помощью заданий CRON. Например, пользователи могут устанавливать напоминания по электронной почте, которые затем выполняются каждый час в задании CRON.
Чтобы сделать некоторые повторяющиеся запросы более быстрыми и эффективными, я также представил систему кэширования, которая просто использует NodeCache для кэширования трудоемких запросов к базе данных и их более быстрого возврата.
Микросервер
В дополнение к основному серверу я реализовал небольшой микросервис с помощью Express.js. Этот микросервис отвечает за экспорт файлов HTML в PDF с помощью библиотеки Puppeteer.
Изначально я рассматривал возможность реализации этого функционала на основном сервере Nest.js, но, учитывая большой размер библиотеки Puppeteer и ресурсоемкость ее операций, решил выгрузить этот функционал в отдельный микросервис. Таким образом, я могу сохранить центральный сервер компактным и быстрым, в то же время предоставляя необходимые функции экспорта PDF через микросервис.
База данных
Расширение Web Highlights для Chrome использует базу данных MongoDB для хранения пользовательских данных. MongoDB — популярная база данных NoSQL с высокой масштабируемостью, доступностью и производительностью.
Для моделирования данных в базе данных я использую популярную библиотеку моделирования объектных данных (ODM) для MongoDB. Mongoose предоставляет простой и интуитивно понятный API для определения схем, создания запросов и проверки данных.
База данных размещена в Облачной базе данных MongoDB Atlas, которая берет на себя всю сложность развертывания моей базы данных и управления ею. Кроме того, он предлагает безопасность автоматического резервного копирования.
Хостинг
Сервер
В настоящее время мой центральный сервер и микросервис размещаются на Heroku Dynos, который предлагает гибкие варианты хостинга для моих приложений. Использование Heroku было очень удобным для меня, поскольку оно позволяет легко развертывать с GitHub и позволяет мне настроить тестовый сервер для предварительных тестов путем развертывания из моей ветки разработки.
Внешний интерфейс
Я настроил дроплет Digital Ocean для размещения внешнего интерфейса моего веб-приложения Vue.js. Настроенная A-запись в моем провайдере домена, Strato, направляет домен web-highlights.com на IP-адрес моего дроплета Digital Ocean.
Капля настроена для статического обслуживания приложения. Кроме того, я настроил сервер NGINX для обслуживания своего экземпляра блога Ghost CMS из подпапки /blog домена. Благодаря этой конфигурации посетители могут легко получить доступ к веб-приложению и блогу из одного домена.
Тестирование
Изначально, как и многие другие, я разрабатывал свое приложение без каких-либо юнит-тестов или интеграционных тестов. Однако со временем я добавил значительное количество модульных тестов и интеграционных тестов, которые помогли мне избежать многих проблем.
Хотя было сложно протестировать полностью интегрированное расширение Chrome, я создал тестовую среду, в которой я мог запускать и тестировать свое приложение локально. С помощью Cypress я протестировал почти все возможности своего приложения. Кроме того, я реализовал множество модульных тестов для сложной логики, для чего я использую Jest.
Последние мысли
Вот и все. Конечно, я не упомянул каждую технологию или библиотеку, которые я использую. Тем не менее, я надеюсь, что это дало вам ценную информацию. Возможно, вы даже сможете использовать некоторые вещи для разработки собственного расширения Chrome.
Вот краткий обзор всех технологий:
- Внешний интерфейс: веб-компоненты + Lit, Vue.js, Typescript, Redux, Ghost CMS
- Верхняя часть: Nest.js, Express.js, JWT, аутентификация Firebase.
- База данных: MongoDB, Mongoose, MongoDB Atlas Cloud
- Хостинг: Heroku, Digital Ocean, Strato
- Тестирование: Jest, Cypress
Надеюсь, вам понравилось читать эту статью. Я всегда рад ответить на вопросы и открыт для критики. Не стесняйтесь обращаться ко мне в любое время 😊
Свяжитесь со мной через LinkedIn или подпишитесь на меня в Twitter. Кроме того, ознакомьтесь с моим расширением PDF & Web Highlighter Chrome, если вы еще этого не сделали.
Вот ссылка для неограниченного доступа ко всему контенту здесь, на Medium. Если вы зарегистрируетесь по этой ссылке, я получу небольшую сумму без каких-либо дополнительных затрат для вас.
Дальнейшее чтение
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
