Доброго времени суток, друзья!
Представляю вашему вниманию перевод Руководства по 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. О сервис-воркерах можно почитать здесь.
Как известно, не ошибается лишь тот, кто ничего не делает, поэтому приношу извинения за возможные ошибки и опечатки. Буду признателен за помощь в их обнаружении и исправлении.
Надеюсь, приложение вам понравится. Благодарю за внимание.
