Краткое содержание
SVGOMG : красивый, материальный и отзывчивый интерфейс для SVGO.
Что нам нравится?
SVGOMG, созданный нашим собственным Джейком Арчибальдом , представляет собой почти идеальный пример полностью отзывчивого и функционального инструмента, написанного с использованием веб-технологий. Он имеет красивый внешний вид Material Design, ServiceWorker обеспечивает быструю загрузку приложения и его доступность в автономном режиме, а переходы на мобильных устройствах плавные.
Возможные улучшения
Единственная реальная придирка, которую мы могли бы предложить, это то, что первоначальный UX сбивает с толку из-за отсутствия основного пользовательского интерфейса. В остальном работа сделана хорошо!
Вопросы и ответы с Джейком Арчибальдом
Почему сеть?
Лень. Полная лень. Я не являюсь экспертом в разработке собственных приложений для Windows, я не являюсь экспертом в собственных приложениях для OSX и не являюсь экспертом в создании собственных приложений для iOS, Android, Windows Phone или Linux. Однако я могу работать в Интернете, и этот набор навыков позволил мне когда-то создать что-то, что работало на всех этих платформах.
Что действительно хорошо сработало во время разработки?
Я очень доволен его исполнением. Я гарантирую, что страница будет отображаться до того, как станет доступен JS. Фактически, сначала он визуализируется всего с 5 тысячами HTML с некоторым встроенным CSS и SVG. Основные скрипты и CSS загружаются в фоновом режиме. Это означает, что сайт загружается за 1,5 секунды даже в 3G с пустым кешем, и большая часть этого — DNS и SSL.
Начальный экран очень простой, поэтому сделать это в 5k не составило труда. Меня действительно беспокоит то, что так много сайтов ждут JS для своего первого рендеринга, некоторые даже требуют, чтобы их JS делал дополнительные запросы перед рендерингом. Это увеличивает время рендеринга 3G до 10 секунд – как мобильный пользователь я знаю, что не стал бы с этим мириться.
Размер основного JS составляет 15 КБ, но он не включает части, которые анализируют и минимизируют SVG, которые загружаются как дополнительная фаза в фоновом режиме. Это здорово, потому что интерактивность проявляется очень быстро, и пользователь не замечает дополнительной нагрузки. Если пользователю удается выбрать SVG до того, как этот сценарий станет доступен, загрузка этого сценария будет считаться частью времени обработки.
Я также использовал ServiceWorker, чтобы все это работало в автономном режиме. Работа в автономном режиме — довольно крутая функция, но я делаю это в основном ради производительности. Последующие посещения SVGOMG отображаются практически мгновенно, независимо от подключения пользователя. Учитывая различия в мобильной связи, это действительно ценно!
Если бы у вас была возможность улучшить свое приложение, какой бы это был API?
Я использовал Babel, чтобы иметь возможность использовать будущие возможности JavaScript. Было бы здорово, если бы что-то из этого работало на платформе. В частности, async/await, стрелочные функции, значения аргументов по умолчанию и деструктуризация.
Мне пришлось использовать библиотеку для сжатия вывода, чтобы узнать его сжатый размер. Использование библиотеки для этого немного раздражает, поскольку этот код для HTTP-материалов уже есть в браузере, для него просто нет API. В идеале это должен быть какой-то поток преобразования, чтобы я мог подсчитать размер вывода, не храня все это в памяти.