Краткое руководство по Node.js для начинающих (SPA, PWA, mobile-first)

Доброго времени суток, друзья!

Представляю вашему вниманию перевод Руководства по 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. О сервис-воркерах можно почитать здесь.

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

Надеюсь, приложение вам понравится. Благодарю за внимание.