Всем привет!
В июле 2018 года наш преподаватель курса «Разработчик JavaScript» Юрий Дворжецкий провел открытый вебинар на тему «Cоздание приложения на Webpack+React+Express», правда, в рамках второго курса, где он выступает как преподавателя одного из модулей, посвящённого JavaScript. В этом материале вы сможете ознакомиться с видеозаписью и кратким пересказом прошедшего мастер-класса.
Работа на открытом уроке проходила по следующему плану:
- Знакомство с Node JS и Express JS.
- Знакомство с Webpack.
- Знакомство с React.
Итак, поехали!
Node JS
С приходом нового стандарта 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 пользователям было предложено выполнить следующие действия:
- скачать NodeJS с официального сайта nodejs.org/en/;
- установить на компьютер и проверить версию;
- убедиться, что в консоли работает node –v.
Следующий этап — создание первого проекта по Node JS. Сделать это можно было одним из двух способов:
- командой npm init (и далее соглашаться со всем, нажимая enter);
- путем скачивания репозитория по ссылке в GitHub и введения команды git checkout 0.
Дальнейший шаг — знакомство с Express 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).
После проведения подготовительных работ пришла пора писать и сам сервер:
- Создание в корне проекта файла /server.js.
- Размещение в нем определенного кода, написанного на JavaScript. Назначение этого скрипта:
— получение express из «загадочной» node_modules/;
— добавление обработчика на URL/;
— запуск Node JS (используется команда node server.js или npm start).
Также можно было просто счекаутиться на тег номер 2 (git checkout 2).
JS, ES6 и транспайлинг
Как уже было сказано ранее, ES6 — современный стандарт JS. Он представляет собой набор фич, которые целиком не поддерживаются ни одним браузером (поддерживается только часть набора). В результате возникает вопрос: что делать, если мы хотим писать на современном ES6, а в браузерах поддерживается только ES5.1? Здесь на помощь и приходит транспайлинг. Его идея заключается в следующем:
- у нас есть код, написанный на ES6;
- мы его компилируем (ES6 преобразуется в ES5.1);
- получившуюся JS-ку можно помещать на страницы браузеров.
В результате появляется возможность использовать не только ES6, но и разные диалекты и расширения, увеличивая тем самым мощь JS, например:
- «типизированный» JavaScript TypeScript (TS);
- JSX — XHTML в JS (основа React);
- Flow — static type checker.
Один из самых популярных и мощных транспайлингов — это Babel. Именно он и использовался для решения задач открытого урока.
Преимущества сборки:
- можно собрать все JS-файлы в один бандл (bundle);
- можно минимизировать и обфусцировать бандлы;
- можно попутно запускать LESS->CSS и пр.
Webpack
Webpack — один из самых навороченных сборщиков. Он концептуально сложноват, особенно по части терминологии, но равного ему нет, причем последняя версия проще предыдущих. Однако бояться его не стоит, так как сделать конфиг с его помощью — это разовая работа. А количеством включенных в Webpack плюшек без преувеличения можно «объесться».
Для примера слушателям вебинара был показан webpack.config.js и подробно рассмотрена каждая строка файла для понимания терминологии в целом.
Следующий этап — создание клиента с готовыми сконфигурированными React и Webpack (команда npx minimal-react client или git checkout 3 для лентяев). После этого можно было перейти в созданную таким образом папку cd client/ и открыть файл webpack.config.js, фрагмент которого был показан несколько ранее.
React
Постепенно пришло время и для знакомства с React — JavaScript-библиотекой с открытым исходным кодом для разработки пользовательских интерфейсов.
Для первого взгляда на React и «мягкого» погружения в его среду слушателям было предложено открыть client/src/index.js и, если ничего не произошло, открыть client/src/component/app.js.
Основа React — JSX. Это диалект JS и XHTML, написанный в JS. Несмотря на то, что React можно использовать и без JSX, вся его мощь именно в JSX. Что касается самого React, то это один из самых популярных фреймворков по версии Hackernoon, основанный на компонентном подходе. У него большое количество вспомогательных пакетов и огромная инфраструктура. Само приложение представляет собой набор компонент, содержащих свою разметку и поведение.
Особенности React:
- компоненты могут использовать друг друга;
- этот JS выполняется в браузере;
- в действительности разметки в браузере нет, но она появляется, когда браузер клиента выполняет этот код;
- компоненты рендерят свою заметку, а используемые компоненты — свою внутри;
- разметка не обязана быть статичной и таковой не является;
- можно передавать информацию в дочерние компоненты;
- компоненты можно условно рендерить.
После знакомства с React практическая часть вебинара продолжилась, в результате чего последовали следующие шаги:
- запуск вебпака в папке client (client/npm run dev);
- написание собственного простого компонента по инструкции преподавателя либо через git checkout 4 (Webpack можно было не останавливать).
Далее слушателям было предложено использовать объекты props и сделать типодинамический рендеринг (git checkout 5).
Нюансы props:
- содержат свойства компонентов;
- можно передавать не только строки, но и объекты;
- в идеале общение по линии реакт-компонент всегда строится на props.
На заключительном этапе практического занятия было выполнено соединение бекенда и веб-сервера (git checkout 6).
THE END
Спасибо за внимание и как всегда ждём ваши комментарии и пожелания.
Автор: MaxRokatansky
