Доброго времени суток, друзья!
Я очень не люблю заниматься саморекламой, но в ситуации, когда команда состоит из одного человека, хочешь не хочешь, приходится и разрабатывать, и продвигать продукт самому.
Всем, кто искал, с чего начать разработку веб-приложения, хорошо известен HTML5 Boilerplate (официальный сайт, репозиторий). Как утверждают разработчики, он является «The web’s most popular front-end template». С most popular не поспоришь, а вот с современностью (соответствием современным реалиям веб-разработки) можно. И в этом нет ничего удивительного: проект создан около 6 лет назад. За последние 6 лет многое изменилось. При этом, насколько я могу судить, принципиальных изменений в проект не вносилось (для объявления переменных используется var, предусмотрена возможность добавления плагинов jQuery и т.д.), кроме, разве что, site.webmanifest, который бесполезен без сервис-воркера (и лучше использовать .json).
Я предлагаю своего рода альтернативу — современный стартовый HTML-шаблон (официальный сайт, репозиторий).
Проект включает в себя следующее:
- index.html со всеми необходимыми meta- и link-тегами (общие, microsoft, facebook, twitter, apple (ios), android, структурированные данные: schema.org и json-ld)
- примеры использования HTML5-тегов и CSS3-свойств
- примеры использования CSS- и JavaScript-модулей
- offline-first сервис-воркер
- полноценный manifest.json
- express.js-сервер со всеми возможными заголовками безопасности (пригодится при разворачивании приложения на heroku или аналогичном сервисе, поддерживающем node.js)
- файл netlify.toml с аналогичными заголовками и предварительным подключением используемых страницей ресурсов (пригодится при деплое приложения на netlify)
- простой robots.txt
- простой sitemap.xml
- минимальный browserconfig.xml
- максимальный .gitignore
- креативная страница ошибки 404
- пример сборки проекта с помощью webpack
- в качестве эксперимента — пример AMP-проекта (новая технология от Google для mobile-first сайтов)
Основную ценность, безусловно, представляют index.html и server.js (netlify.toml). В указанных файлах имеют ссылки на официальную документацию (источник истины). Сервис-воркер и манифест делают приложение прогрессивным. Это означает, что приложение может быть установлено на телефон и компьютер и ведет себя подобно нативным. За счет кэширования ресурсов, используемых приложением, достигается его работа в офлайн-режиме (при отсутствии подключения к сети).
Для улучшения опыта разработки дополнительно разработаны следующие инструменты:
- HTML-сниппет для VSCode
- расширение для VSCode
- инструмент командной строки (CLI)
Вот результаты тестов (недобор обусловлен использованием сторонних ресурсов, таких как гугл-аналитика и яндекс-метрика):
Lighthouse
WebPageTest
SecurityHeaders
AMP
Также прошу обратить внимание на мое основное приложение, которое я разрабатываю по мере сил и возможностей — Много JavaScript (возможно, название не совсем удачное, но оно в полной мере отражает суть приложения). К слову, при его разработке использовался указанный шаблон.
Буду рад любой форме обратной связи как здесь, так и на GitHub.
Благодарю за внимание и хорошего начала рабочей недели.
