Переписывание Notific8 было большим опытом. Мир веб-разработки быстро развивается, и с момента создания библиотеки многое изменилось в мире интерфейсной разработки. Это переписывание дало мне возможность применить многое из этого при улучшении библиотеки.

В этом заключительном посте я хотел выделить несколько важных изменений и мыслей, стоящих за ними.

Машинопись

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

Есть несколько веских причин, по которым мне нравится использовать машинописный текст:

  1. Набор текста избавляет меня от глупых ошибок в коде, которые приводят к ошибкам.
  2. Хотя он не используется в этом проекте, он часто представляет экспериментальные функции и предложения для новых версий ES, таких как декораторы.
  3. Многие IDE, такие как Visual Studio Code (инструмент, который использовался во время разработки перезаписи), могут подбирать типизацию для использования для автозаполнения и предложения, которые помогут ускорить разработку.

Обещания

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

Настраиваемые свойства CSS (переменные CSS)

Библиотека использует Sass с самого начала своего развития. Одна из причин - разрешить использование переменных для облегчения разработки.

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

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

Многоразовые уведомления

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

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

Создать набор инструментов

В проекте произошли некоторые изменения в том, какие инструменты используются для строительства. Вплоть до перезаписи инструмент использовал Grunt. Однако в наши дни Grunt, похоже, очень мало активно развивает такие инструменты, как Webpack, а затем и некоторые другие.

Этот проект относительно небольшой и простой. Единственные две вещи, которые требуют построения, - это исходные файлы Sass и исходные файлы Typescript. Было достаточно просто использовать базовые инструменты и создавать простые команды для запуска в файле package.json, что позволило полностью избавиться от необходимости в настройке сборки. Также есть изменение, заключающееся в том, что выходной JavaScript представляет собой модуль ES2015 +, который предназначен для импорта в современный проект или переноса с помощью инструмента сборки конечным разработчиком, поэтому система сборки библиотеки больше не выполняет минификацию или обфускацию.

Демо-страница

Старая демонстрационная страница была именно такой: старой. Оно использовало мопс и означало еще одну вещь, которую нужно было передать. Он также использовал библиотеку CSS, которая выглядит великолепно, но регулярно конфликтует со стилями Notific8. Решение изменить его означало, что другой набор шагов сборки был удален, что сделало старую инструментальную цепочку менее полезной.

В новой демонстрации используется Vue. Это очень легкая библиотека, с которой легко работать. Vue также упростил предоставление примера внедрения Notific8 в проект с использованием современной библиотеки или фреймворка. Это также означало возможность отказаться от jQuery для демонстрации.

Прекращение поддержки IE

По какой-то причине до сих пор есть люди, которые предпочитают использовать Internet Explorer (или, как я люблю его называть, Internet Exploder). Он устарел в течение многих лет и в настоящее время получает только исправления безопасности, но это также приближается к дате окончания.

Мы с коллегами ежедневно сталкиваемся с проблемами, пытаясь их поддержать. Совсем недавно мне пришлось написать код специально для IE, что заставило меня съежиться, но это было единственное, что сработало и увеличило размер пакета.

На данный момент это 2019 год. Microsoft в течение многих лет говорила людям, чтобы они прекратили его использовать, и на момент написания этой статьи они находились в процессе перехода на Edge, чтобы использовать Chromium в качестве ядра. Chrome (и другие производные от Chromium) и Firefox, в частности, добавляют отличную среду просмотра веб-страниц и регулярно обновляются с высокой частотой. Учитывая все новые функции, которые регулярно появляются в других браузерах, нет смысла поддерживать сокращающийся с очень и очень ограниченным набором функций.

Последние мысли

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

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

Окончательный кодекс

Окончательный код размещен на GitHub по адресу https://github.com/willsteinmetz/notific8. Полный код был выпущен в версии 5.0.0, и это версия для просмотра примеров кода, над которым работали на протяжении всей серии.