[Разработка веб-сайтов, JavaScript, Программирование, Node.JS] Краткое руководство по Node.js для начинающих (SPA, PWA, mobile-first)

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
15-Авг-2020 15:36

Цитировать

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

Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_programmirovanie (Программирование), #_node.js, #_javascript, #_node.js, #_nodejs, #_node, #_programmirovanie (программирование), #_razrabotka (разработка), #_guide, #_rukovodstvo (руководство), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_javascript, #_programmirovanie (
Программирование
), #_node.js

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 10:18
Часовой пояс: UTC + 5