Краткое руководство по Node.js для начинающих



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

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

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

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

    Средняя зарплата в IT

    113 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 5 444 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 5

      0
      Я так и не понял что значит? «PWA — приложение можно установить на компьютер;»
      Как оно выглядит? Можно ли убрать верхнюю полоску windows (где крестик \ сворачивание). Как выглядит установка? обычный .msi исталятор? Какие нужны зависимости чтобы работало на компьютере? (там допустим .net framework 4).
        0
        Это обычный сайт, который будет запускаться в браузере без элементов управления.
        0
        Отвечал Kolonist'у:

        Почти, только еще и будет встроен в систему, и запускать можно будет по названию приложения, плюс у него будет собственная иконка. Визуально выглядит — что по сути как отдельное приложение. Хотя так-то это браузерная вкладка без дополнительных элементов управления.
          0
          Жаль нету возможности увеличить размер шрифта
            0
            А в приложении будет возможность открыть конструктор для практики?

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое