- PVSM.RU - https://www.pvsm.ru -
Всем привет!
В июле 2018 года наш преподаватель курса «Разработчик JavaScript» [1] Юрий Дворжецкий [2] провел открытый вебинар на тему «Cоздание приложения на Webpack+React+Express», правда, в рамках второго курса [3], где он выступает как преподавателя одного из модулей, посвящённого JavaScript. В этом материале вы сможете ознакомиться с видеозаписью и кратким пересказом прошедшего мастер-класса.
Работа на открытом уроке проходила по следующему плану:
Итак, поехали!
С приходом нового стандарта ES6 популярность JavaScript заметно повысилась, о чем свидетельствует та же статистика по числу пулл-реквестов на GitHub за 2017 год, где JS занимает первое место.
Одним из драйверов JS стал Node JS — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код) и превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Многие называют Node JS «серверным» JavaScript, однако здесь более уместно определение не «серверный», а «компьютерный». К примеру, Node JS имеет очень богатое окружение, включая собственный package manager под названием npm, который вы можете смело запускать на вашей машине (репозиторий доступен по адресу npmjs.com). Причем это не единственный package manager, есть и другие. Конфигурационным файлом является package.json и несложно догадаться, что он конфигурируется в формате JSON.
В рамках ознакомления с Node JS пользователям было предложено выполнить следующие действия:
Следующий этап — создание первого проекта по Node JS. Сделать это можно было одним из двух способов:
Дальнейший шаг — знакомство с Express JS.
Express JS — популярный веб-сервер для среды Node JS. В терминах Python — это что-то вроде Django, только там, по сути, ничего кроме REST-методов нет. Express JS прекрасно подходит для создания REST-сервисов, которые принимают и отдают JSON, но в целом он достаточно аскетичен, поэтому все необходимое принято, что называется, «прикручивать». Кстати, на его основе сделаны и другие веб-серверы. При этом нужно понимать, что Express — это что-то вроде промежуточного звена (middleware), которое еще нужно настроить и наполнить логикой.
В рамках вебинара установка Express JS производилась командой npm install express с добавлением ключа –save. Также можно было просто счекаутиться в гите (git checkout 1) с написанием npm install. В результате была создана папка node_modules/, а содержимое package.json изменилось (появились соответствующие dependencies).
После проведения подготовительных работ пришла пора писать и сам сервер:
— получение express из «загадочной» node_modules/;
— добавление обработчика на URL/;
— запуск Node JS (используется команда node server.js или npm start).
Также можно было просто счекаутиться на тег номер 2 (git checkout 2).
Как уже было сказано ранее, ES6 — современный стандарт JS. Он представляет собой набор фич, которые целиком не поддерживаются ни одним браузером (поддерживается только часть набора). В результате возникает вопрос: что делать, если мы хотим писать на современном ES6, а в браузерах поддерживается только ES5.1? Здесь на помощь и приходит транспайлинг. Его идея заключается в следующем:
В результате появляется возможность использовать не только ES6, но и разные диалекты и расширения, увеличивая тем самым мощь JS, например:
Один из самых популярных и мощных транспайлингов — это Babel. Именно он и использовался для решения задач открытого урока.
Преимущества сборки:
Webpack — один из самых навороченных сборщиков. Он концептуально сложноват, особенно по части терминологии, но равного ему нет, причем последняя версия проще предыдущих. Однако бояться его не стоит, так как сделать конфиг с его помощью — это разовая работа. А количеством включенных в Webpack плюшек без преувеличения можно «объесться».
Для примера слушателям вебинара был показан webpack.config.js и подробно рассмотрена каждая строка файла для понимания терминологии в целом.
Следующий этап — создание клиента с готовыми сконфигурированными React и Webpack (команда npx minimal-react client или git checkout 3 для лентяев). После этого можно было перейти в созданную таким образом папку cd client/ и открыть файл webpack.config.js, фрагмент которого был показан несколько ранее.
Постепенно пришло время и для знакомства с React — JavaScript-библиотекой с открытым исходным кодом для разработки пользовательских интерфейсов.
Для первого взгляда на React и «мягкого» погружения в его среду слушателям было предложено открыть client/src/index.js и, если ничего не произошло, открыть client/src/component/app.js.
Основа React — JSX. Это диалект JS и XHTML, написанный в JS. Несмотря на то, что React можно использовать и без JSX, вся его мощь именно в JSX. Что касается самого React, то это один из самых популярных фреймворков по версии Hackernoon, основанный на компонентном подходе. У него большое количество вспомогательных пакетов и огромная инфраструктура. Само приложение представляет собой набор компонент, содержащих свою разметку и поведение.
Особенности React:
После знакомства с React практическая часть вебинара продолжилась, в результате чего последовали следующие шаги:
Далее слушателям было предложено использовать объекты props и сделать типодинамический рендеринг (git checkout 5).
Нюансы props:
На заключительном этапе практического занятия было выполнено соединение бекенда и веб-сервера (git checkout 6).
THE END
Спасибо за внимание и как всегда ждём ваши комментарии и пожелания.
Автор: MaxRokatansky
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/287874
Ссылки в тексте:
[1] «Разработчик JavaScript»: https://otus.pw/KdXq/
[2] Юрий Дворжецкий: https://otus.pw/JLDV/
[3] курса: https://otus.pw/9YOk/
[4] nodejs.org/en/;: http://nodejs.org/en/;
[5] Источник: https://habr.com/post/418855/?utm_campaign=418855
Нажмите здесь для печати.