Доброго времени суток, друзья!
Представляю вашему вниманию перевод Руководства по Node.js в формате одностраничного прогрессивного адаптированного приложения.
Данный формат означает следующее:
- SPA новые данные (разделы или главы руководства) загружаются без перезагрузки страницы реализовано с помощью динамического импорта
- PWA приложение можно установить на мобильный телефон или компьютер; приложение работает даже при отсутствии подключения к сети реализовано с помощью сервис-воркера и кэширования
- mobile-first приложение предназначено для использования, в первую очередь, на смартфонах, но хорошо выглядит и на широких экранах
Посмотреть и установить приложение можно здесь: Netlify, PWA Store.
Код проекта на GitHub.
Песочница:
На десктопе приложение выглядит так:
А на смартфоне так:
Приложение представляет собой краткое руководство по Node.js для начинающих и едва ли будет интересно тем, кто уже знаком с этим инструментом. Вместе с тем, оно может использоваться в качестве карманного справочника для быстрого поиска ответа на вопрос.
Оригинальное руководство написано в 2019 году с учетом последней на тот момент версии Node.js и ES2018, что обуславливает его актуальность.
Руководство состоит из 54 разделов (глав), в которых в доступной форме излагаются основы и некоторые особенности Node.js. Руководство не сделает из вас специалиста по серверному JavaScript, но поможет начать его изучение и определить дальнейший путь развития.
Номер просмотренной страницы сохраняется в локальном хранилище, что позволяет в любой момент выйти из приложения, а, вернувшись, начать с того места, на котором остановились.
Страницы переключаются с помощью кнопок и клавиатуры.
Для стилизации приложения использовался Materialize.
Несколько слов о реализации
Реализация приложения до неприличия проста.
Каждый раздел (глава) представляет собой модуль следующего содержания:
export default `разметка и текст`
В разметке главной страницы у нас имеются ссылки:
<a class="link" data-url="1" href="#">1. Введение</a>
и кнопки:
<!-- классы фреймворка удалены --><button> <i class="left">navigate_before</i></button><button> <i class="right">navigate_after</i></button>
При нажатии на ссылку или кнопку вызывается функция отображения страницы, которой передается номер страницы. При инициализации приложения номер страницы запрашивается из локального хранилища. При отсутствии такового, номер страницы = 1. При нажатии на ссылку номером страницы становится значение атрибута data-url ссылки. При нажатии на кнопку номер страницы увеличивается или, соответственно, уменьшается на 1. Сама функция выглядит так:
const showPage = i => { // определяем адрес запрашиваемой страницы const url = `./chapters/${i}.js` // импортируем соответствующий модуль import(url) // вставляем разметку в основной контейнер .then(data => container.innerHTML = data.default) // записываем номер страницы в локальное хранилище localStorage.setItem('NodejsGuidePageNumber', i) // прокручиваем страницу scrollTo(0, 0)}
Вот и все, как видите, ничего особенного. Первые две строки кода это навигационная панель Materialize. О сервис-воркерах можно почитать здесь.
Как известно, не ошибается лишь тот, кто ничего не делает, поэтому приношу извинения за возможные ошибки и опечатки. Буду признателен за помощь в их обнаружении и исправлении.
Надеюсь, приложение вам понравится. Благодарю за внимание.
