автордың кітабын онлайн тегін оқу Разработка на JavaScript. Построение кроссплатформенных приложений с помощью GraphQL, React, React Native и Electron
Переводчик Д. Акуратер
Литературный редактор Ю. Зорина
Художник В. Мостипан
Корректоры С. Беляева, Г. Шкатова
Адам Д. Скотт
Разработка на JavaScript. Построение кроссплатформенных приложений с помощью GraphQL, React, React Native и Electron. — СПб.: Питер, 2021.
ISBN 978-5-4461-1462-7
© ООО Издательство "Питер", 2021
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Отзывы о книге
«Разработка на JavaScript» — это невероятная книга, которая даст все, что вам нужно, для создания приложений с помощью JavaScript на любой платформе. Сейчас JavaScript действительно встречается буквально везде, и в этой книге был проделан уникальный труд по совмещению информации для разработчиков всех уровней. Прочтите ее, напишите код и уверенно принимайте технологические решения.
Ева Порцелло (Eve Porcello), разработчик ПО и инструктор в Moon Highway
«Разработка на JavaScript» — это идеальный спутник для путешествия по непрестанно меняющейся экосистеме современного JavaScript. В этой книге Адам простым и понятным способом учит использовать React, React Native и GraphQL для разработки надежных веб-, мобильных и десктопных приложений.
Пегги Райзис (Peggy Rayzis), главный инженер в Apollo GraphQL
Посвящается моему отцу, который собрал со мной мой первый компьютер и вычитал каждую мою статью. Меня бы не было здесь без тебя. Мне тебя не хватает.
Предисловие
В 1997-м мне оставалось два года до выпуска из школы. Однажды мы с другом возились с подключенным к интернету компьютером в нашей школьной библиотеке, и он показал мне, что можно щелкнуть View->Source и просмотреть основной код веб-страницы. Несколько дней спустя уже другой товарищ показал мне, как публиковать собственный HTML. Мой мозг просто взорвался.
С этого момента я подсел. Я начал собирать крупицы информации с сайтов, которые мне нравились, постепенно создавая из них собственный Франкен-сайт. Большую часть свободного времени я возился за собранным по частям компьютером, стоявшим у нас в столовой. Я даже написал (честно говоря, скопировал и вставил) свой первый JS-код, чтобы реализовать стили наведения на ссылки, что на тот момент еще нельзя было сделать с помощью простого CSS.
И вследствие поворота событий, который я рассматриваю как благоприятную версию фильма «Почти знаменит», мой доморощенный музыкальный сайт стал весьма популярен. Благодаря этому я начал получать по почте промо-CD и стал званным гостем на различных концертах. И все же самым важным для меня было то, что я мог общаться с людьми по всему миру. Я был скучающим подростком из глубинки, который любил музыку и при этом мог общаться с людьми, которых никогда не встретит в живую. Это ощущение как тогда, так и сейчас очень вдохновляет.
Сегодня мы можем создавать мощные приложения с помощью одних только веб-технологий, но мысль о том, чтобы приступить к этому, может пугать. API являются невидимым фоном, предоставляющим данные, View->Source показывает конкатенированный и минифицированный код, аутентификация и безопасность таинственны, а совмещение всего этого воедино может показаться чем-то и вовсе невыполнимым. Если же взглянуть на то, что кроется за всей этой неразберихой, то можно заметить, что с помощью тех же технологий, которые я использовал еще 20 лет назад, сегодня можно не только создавать мощные веб-, десктопные или нативные мобильные приложения, но также проектировать 3D-анимацию и даже программировать роботов.
Занимаясь преподаванием, я обнаружил, что многие из нас лучше всего учатся, создавая нечто новое, разбирая это и адаптируя к конкретным случаям использования. Эту же цель преследует и моя книга. Если вы немного знакомы с HTML, CSS и JavaScript, но навыков объединить все это для создания надежных придуманных вами приложений у вас пока маловато, то эта книга для вас. Я познакомлю вас с созданием API, который может применяться для пользовательских интерфейсов веб-, десктопных и нативных мобильных приложений. Но важнее всего то, что вы получите понимание принципов совместимости всех этих частей, которое позволит вам разрабатывать и создавать прекрасные программы.
Мне не терпится увидеть, что у вас получится.
Адам
Введение
Идея этой книги возникла у меня после написания первого десктопного приложения на Electron. Сделав карьеру веб-разработчика, я был захвачен возможностями использования веб-технологий для создания кроссплатформенных приложений. В то же время происходил рост популярности React, React Native и GraphQL. Я искал ресурсы, которые бы помогли мне научиться совмещать все эти компоненты, но ничего не нашел. Так что эта книга представляет собой руководство, которого мне тогда очень не хватало.
Ее конечная цель — научить вас использовать возможности одного только JavaScript для создания всех видов приложений.
Для кого эта книга
Она предназначена для разработчиков среднего уровня, имеющих некоторый опыт работы с HTML, CSS и JS, а также для амбициозных новичков, желающих изучить инструменты, необходимые для запуска проектов для бизнеса и любых других целей.
Структура
Структура книги подразумевает поэтапную разработку примера приложения для различных платформ. По сути, она делится на следующие разделы:
• глава 1 знакомит с настройкой среды разработки JavaScript;
• главы 2–10 посвящены созданию API с использованием Node, Express, MongoDB и Apollo Server;
• в главах 11–25 рассматриваются детали создания кроссплатформенных пользовательских интерфейсов с помощью React, Apollo и ряда других инструментов. А именно:
• глава 11 знакомит с принципами разработки пользовательского интерфейса и рассказывает о React;
• главы 12–17 демонстрируют создание веб-приложения при помощи React, Apollo Client и CSS-in-JS;
• главы 18–20 поэтапно поясняют создание простых приложений на Electron;
• главы 21–25 учат использовать React Native и Expo для разработки мобильных приложений под iOS и Android.
Условные обозначения
В данной книге используются следующие типографские обозначения:
Курсив
Обозначает новые термины.
Интерфейс
Обозначает URL, адреса электронной почты, названия файлов и их расширения.
Моноширинныйшрифт
Используется для примеров программ, а также внутри абзацев для ссылки на элементы программ, такие как переменные или имена функций, базы данных, переменные среды, операторы и ключевые слова.
Моноширинный курсив
Текст, который следует заменить значениями, введенными пользователем, или значениями, определяемыми контекстом.
Использование примеров кода
Сопроводительный материал (примеры кода, упражнения и т.д.) доступен для загрузки по ссылке https://github.com/javascripteverywhere.
Цель этой книги — помочь вам справиться с задачей. В целом предложенные в ней примеры кода вы можете без проблем использовать в собственных программах и документации. Для этого не нужно спрашивать у нас разрешения, если только вы не соберетесь использовать существенную его часть. Например, написание программы, использующей несколько кусков кода из этой книги, не требует разрешения, а вот для продажи или распространения примеров из книг издательства O’Reilly разрешение уже требуется. Ответы на вопросы, использующие цитирование книги или кода, не требуют разрешения. Для включения же существенного количества примеров кода в документацию вашего продукта разрешение уже нужно.
Благодарности
Благодарю всех замечательных сотрудников O’Reilly, как бывших, так и нынешних, которые на протяжении нескольких лет были открыты и шли навстречу моим идеям. Отдельно хочу поблагодарить своего редактора Анджелу Руфино (Angela Rufino), которая давала отзывы, приободряла и делала много полезных напоминаний. Хочу также сказать спасибо Майку Лукидесу (Mike Loukides), который поддерживал меня не только кофеином, но и дружеской беседой. Выражаю признательность Дженнифер Поллок (Jennifer Pollock) за ее поддержку и воодушевление.
Я также бесконечно благодарен сообществу open source за предоставленные мне знания, которые я смог с успехом применить. Без отдельных людей и организаций, разработавших и обслуживающих множество упоминаемых мной библиотек, написание этой книги стало бы невозможным.
Научные редакторы помогли мне улучшить ее, обеспечив точность использования всех элементов. Спасибо вам, Энди Нгом (Andy Ngom), Брайан Слеттен (Brian Sletten), Максимилиано Фиртман (Maximiliano Firtman) и Зишан Чавдхари (Zeeshan Chawdhary). Вы сделали грандиозную работу по проверке кода, за что я искренне благодарен. Отдельное спасибо отправляется в адрес моего давнего коллеги и друга Джимми Уилсона (Jimmy Wilson), которому я позвонил уже в одиннадцатом часу, чтобы он просмотрел весь материал и дал отзыв. Это была существенная просьба, но он по своему обыкновению отреагировал на нее с энтузиазмом. Должен отметить, что без его помощи эта книга не появилась бы в ее нынешнем виде.
На протяжении всей взрослой жизни мне невероятно везло с умными, увлеченными и поддерживающими меня коллегами. Я получил много технических и жизненных уроков благодаря общению с этими людьми. Перечислить всех их не представляется возможным, но я хочу выразить признательность Элизабет Бонд (Elizabeth Bond), Джону Полу Догину (John Paul Doguin), Марку Эшеру (Marc Esher), Дженн Ласситер (Jenn Lassiter) и Джессике Шафер (Jessica Schafer).
Весь процесс написания сопровождался музыкой, и эта книга могла не увидеть свет без прекрасных композиций, созданных Чаком Джонсоном (Chuck Johnson), Мэри Латтимор (Mary Lattimore), Макайей Маккрэвен (Makaya McCraven), Г.С. Шрейем (G. S. Schray), Сэмом Уилкесом (Sam Wilkes), Хироши Йошимурой (Hiroshi Yoshimura) и многими другими.
В заключение я хочу поблагодарить свою жену Эбби (Abbey) и наших детей Райли (Riley), Харрисона (Harrison) и Харлоу (Harlow), которым я зачастую не мог уделить достаточно внимания, так как был занят написанием книги. Спасибо, что терпели мои постоянные задержки в офисе и то, что даже будучи с вами, я не мог перестать думать о работе. Вы четверо являетесь мощнейшей мотивацией для всего, что я делаю.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
Глава 1. Среда разработки
Джон Вуден (John Wooden), покойный тренер баскетбольной команды UCLA, считается одним из наиболее успешных тренеров всех времен. Его команда в течение двенадцати лет выиграла 10 национальных чемпионатов. В ее состав входили лучшие игроки, включая таких членов зала славы, как Лью Алсиндор (Lew Alcindor) (настоящее имя — Карим Абдул-Джаббар [Kareem Abdul-Jabbar]) и Билл Волтон (Bill Walton). Вуден имел обыкновение в первый день тренировки усаживать всех только что нанятых игроков — лучших в США среди всех старших школ — и учить их правильно надевать носки. В ответ на вопросы по этому поводу Вуден заявлял (https://oreil.ly/lnZkf), что «именно из мелочей складываются большие дела».
Шеф-повара описывают подготовку необходимых для приготовления блюд инструментов и ингредиентов выражением mise en place, что означает «все на своих местах». Благодаря учету всех мелких деталей такая подготовка позволяет им успешно справляться с готовкой во время повышенной загруженности. По аналогии с баскетбольным тренером, подготавливающим своих игроков, и поварами, готовящими блюда к обеденному наплыву клиентов, нам тоже стоит уделить время настройке среды разработки.
Для создания ее эффективного варианта вовсе не обязательно использовать дорогое ПО или самое производительное оборудование. Вообще я призываю вас начать с простого — задействовать открытое программное обеспечение (OSS) и постепенно добавлять к нему нужные инструменты. Хотя бегун и предпочитает определенный бренд кроссовок, а плотник может выбирать особенный молоток, для выработки таких предпочтений требуется время и опыт. Экспериментируйте с инструментами, наблюдайте за появлением новых и со временем вы создадите максимально удобную для вас среду разработки.
В этой главе мы сосредоточимся на установке текстового редактора, Node.js, Git, MongoDB и нескольких полезных JS-пакетов, а также определим место для терминального приложения. Возможно, у вас уже есть удобно настроенная среда разработки. Но мы тем не менее также установим несколько необходимых инструментов, которые будем использовать на протяжении всей книги. Даже если вы, как и я, предпочитаете пропускать инструкции, то в данном случае я все же советую с ними ознакомиться.
Если в какой-то момент у вас возникнут сложности с пониманием материала книги, смело обращайтесь к ее сообществу через канал Spectrum по адресу spectrum.chat/jseverywhere.
Текстовый редактор
Текстовые редакторы во многом похожи на одежду: они нам необходимы, но личные предпочтения при этом могут сильно различаться. Некоторым нравятся простые и грамотно организованные капсулы, другие предпочитают яркий принт пейсли. Неверных решений тут не бывает, и вам следует использовать наиболее удобный для вас вариант.
Если у вас все еще нет фаворита, я очень рекомендую Visual Studio Code (https://code.visualstudio.com). Этот редактор с открытым исходным кодом доступен для платформ Mac, Windows и Linux. Он предлагает встроенные функции для упрощения разработки и легко изменяется при помощи расширений, предлагаемых сообществом. Кстати говоря, разработан он также на JavaScript.
Терминал
Если вы используете VSCode, то у него есть встроенный терминал. Для большинства задач по разработке этого вполне достаточно. Лично я предпочитаю использовать отдельный терминальный клиент, поскольку так мне проще управлять несколькими вкладками и использовать больше выделенного оконного пространства на компьютере. Предлагаю вам попробовать оба варианта и выбрать наиболее оптимальный.
Использование отдельного приложения терминала
Все операционные системы снабжены встроенным приложением терминала, который послужит отличной отправной точкой. В macOS он называется вполне себе очевидно: Terminal. В ОС Windows, начиная с Windows 7, аналогичная программа называется PowerShell. В дистрибутивах Linux название терминала может быть разным, но зачастую содержит слово Terminal.
Использование VSCode
Для получения доступа к терминалу в VSCode кликните Terminal→NewTerminal, и перед вами откроется его окно. Командная строка будет располагаться в каталоге текущего проекта.
Навигация по файловой системе
После обнаружения терминала вам пригодится умение ориентироваться в файловой системе. Это можно делать при помощи команды cd, которая отвечает за смену каталога.
Инструкции терминала часто включают символы $ или > в начале строки. Они используются только для указания на инструкцию, и копировать их не нужно. В данной книге я буду обозначать инструкции терминала знаком доллара ($). При их вводе в собственном терминале этот знак включать не надо.
Открыв приложение терминала, вы увидите командную строку с курсором, в которой можно вводить команды. По умолчанию вы находитесь в домашнем каталоге компьютера. Если вы еще этого не делали, то я рекомендую создать каталог Projects, который будет подкаталогом домашней директории. Этот каталог будет содержать все ваши проекты. Создать и перейти в него вы можете следующим образом:
# сначала вводите команду cd, которая обеспечит переход в корневую директорию:
$ cd
# затем, если вы еще не создавали каталог Projects, можете это сделать;
# для этого используйте следующую команду — она создаст Projects в виде
# подкаталога в корневой директории системы:
$ mkdir Projects
# наконец, вы можете войти в этот каталог:
$ cd Projects
В дальнейшем переходить в директорию Projects можно так:
$ cd # выполняет переход в корневую директорию
$ cd Projects
Теперь давайте предположим, что в директории Projects у вас есть каталог jseverywhere. Для перехода в него из Projects нужно ввести cdjseverywhere. Для возвращения на один каталог выше (в данном случае в Projects) нужно набрать cd.. (команда cd, за которой следуют две точки).
Все вместе это будет выглядеть так:
> $ cd # убедитесь, что вы в корневом каталоге
> $ cd Projects # для перехода из корневой директории в директорию Projects
/Projects > $ cd jseverywhere # для перехода из Projects в директорию
jsevewehre
/Projects/jseverwhere > $ cd .. # для возвращения из jseverwhere в Projects
/Projects > $ # Командная строка находится в директории Projects
Если вы с такими вещами раньше не сталкивалсь, то потренируйтесь немного в перемещении между файлами, чтобы чувствовать себя более уверенно. Я выяснил, что начинающие разработчики часто спотыкаются о сложности с файловой системой. Освоив эти действия, вы сможете гораздо увереннее организовывать собственные рабочие процессы.
Инструменты командной строки и Homebrew (только для Mac)
Некоторые утилиты командной строки доступны только пользователям macOS при установке Xcode. Вы же можете обойтись без самого Xcode, просто установив xcode-select через терминал. Для этого выполните следующую команду и следуйте подсказкам установщика:
$ xcode-select --install
Homebrew — это пакетный менеджер для macOS. Он позволяет устанавливать зависимости разработки вроде языков и баз данных так же просто, как и выполнять инструкции в командной строке. Если вы используете Mac, то он существенно упростит настройку среды разработки. Для установки Homebrew либо скопируйте и вставьте соответствующую команду с сайта brew.sh, либо наберите в одну строку следующее:
$ /usr/bin/ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)"
Node.js и NPM
Node.js (https://nodejs.org) — это «среда выполнения JavaScript, построенная на JS-движке V8, разработанном Google». Фактически же это означает, что Node является платформой, позволяющей разработчикам писать JS-код вне среды браузера. Node.js поставляется с NPM, пакетным менеджером, по умолчанию. NPM позволяет устанавливать в рамках вашего проекта тысячи библиотек и инструментов JavaScript.
Если вы планируете управлять большим числом проектов Node, то можете столкнуться с необходимостью управления множеством версий этой среды на вашем компьтере. В таком случае я рекомендую для установки Node использовать его менеджер версий (NVM) (https://oreil.ly/fzBpO). NVM — это скрипт, который позволяет управлять несколькими активными версиями Node. Для пользователей Windows я рекомендую nvm-windows (https://oreil.ly/qJeej). Я не буду рассматривать управление версиями Node, но имейте в виду, что это очень полезный инструмент. Если для вас это первое знакомство с Node, то я советую продолжить следовать дальнейшим инструкциями для вашей системы.
Установка Node.js и NPM для macOS
Пользователи macOS могут установить Node.js и NPM, используя Homebrew. Для установки Node.js наберите в терминале следующую команду:
$ brew update
$ brew install node
Установив Node, откройте приложение терминала, чтобы убедиться в его работоспособности.
$ node --version
## Ожидаемый вывод v12.14.1, номер вашей версии может отличаться
$ npm --version
## Ожидаемый вывод 6.13.7, номер вашей версии может отличаться
Если после ввода указанных команд вы увидите номер версии, то я вас поздравляю — вы успешно установили Node и NPM для macOS!
Установка Node.js и NPM для Windows
Для Windows проще всего установить Node.js, посетив сайт nodejs.org и скачав установщик для вашей ОС.
Сначала перейдите на nodejs.org и установите LTS-версию (на момент написания книги 12.14.1), следуя шагам установки для вашей операционной системы. Установив Node, откройте терминал для проверки его работоспособности.
$ node --version
## Ожидаемый вывод v12.14.1, номер вашей версии может отличаться
$ npm --version
## Ожидаемый вывод 6.13.7, номер вашей версии может отличаться
LTS — это аббревиатура от long-term support («долгосрочная поддержка»), то есть Node.js Foundation обязуется предоставлять поддержку и обновления безопасности для этого основного номера версии (в нашем случае 12.х). Стандартный период поддержки длится три года после изначального релиза версии. В Node.js релизы с четными номерами являются LTS-версиями. Я рекомендую для разработки приложений использовать релиз именно с четным номером.
Если после ввода этих команд вы увидите номер версии, то я вас поздравляю — вы успешно установили Node и NPM для Windows!
MongoDB
MongoDB — это база данных, которую мы будем использовать в процессе разработки нашего API. Mongo весьма популярна при работе с Node.js, поскольку воспринимает данные в виде документов JSON (JavaScript Object Notation), что существенно облегчает JS-разработчикам их использование.
Документация MongoDB предлагает регулярно обновляемое руководство по установке MongoDB Community Edition в различных операционных системах. Если у вас в процессе установки возникнут сложности, я рекомендую обратиться к ней по ссылке docs.mongodb.com/manual/administration/install-community.
Установка и запуск MongoDB для macOS
Cначала установите ее с помощью Homebrew:
$ brew update
$ brew tap mongodb/brew
$ brew install mongodb-community@4.2
Запустить же MongoDB можно в качестве службы macOS:
$ brew services start mongodb-community
Эта команда запустит службу MongoDB, которая продолжит работу в фоновом режиме. Обратите внимание, что каждый раз, когда вы перезапускаете компьютер и планируете заниматься разработкой с применением Mongo, вам может потребоваться повторно перезапускать службу MongoDB. Чтобы убедиться в правильности ее установки и работоспособности, наберите ps-ef|grepmongod в терминале. Эта команда выведет список всех текущих процессов Mongo.
Установка и запуск MongoDB для Windows
Cначала загрузите установщик из центра загрузки MongoDB (https://oreil.ly/XNQj6). После этого запустите его, следуя подсказкам мастера установки. Я советую выбрать вариант Complete с конфигурацией MongoDB как службы. Все остальные значения можно оставить по умолчанию.
После завершения установки может потребоваться создать директорию, в которую Mongo будет записывать данные. Выполните через терминал следующие команды:
$ cd C:\
$ md "\data\db"
Для проверки успешности установки и запуска службы Mongo:
1. Откройте консоль служб Windows.
2. Найдите службу MongoDB.
3. Кликните по ней правой кнопкой мыши.
4. Выберите Запуск.
Помните, что каждый раз, когда вы перезапускаете компьютер и планируете вести разработку, используя Mongo, вам может потребоваться повторно запустить службу MongoDB.
Git
Git — это самое популярное ПО для контроля версий, которое позволяет вам выполнять такие действия, как копирование репозиториев кода, слияние одного кода с другим и создание независимых веток собственного кода. Git также поможет с клонированием репозиториев с примерами кода из этой книги, предоставив возможность просто копировать каталоги со всем содержимым.
В некоторых ОС Git может быть установлен по умолчанию. Для проверки его наличия введите в окно терминала следующее:
$ git --version
Если в ответ вы получите номер, опять же поздравляю — Git у вас установлен. Если нет, установите его с сайта git-scm.com либо используйте Homebrew для macOS. Закончив установку, еще раз наберите git--version в терминале, чтобы проверить его работоспособность.
Expo
Expo — это пакет инструментов, упрощающий начальную загрузку и разработку проектов под iOS/Android с помощью React Native. Нам понадобится установить инструмент командной строки Expo и приложение Expo (не обязательно, но рекомендуется) для iOS или Android. Это мы подробнее рассмотрим в разделе, посвященном мобильным приложениям, но если вы хотите забежать вперед, то можете ознакомиться с деталями на сайте expo.io. Для установки инструментов командной строки введите в терминале следующую команду:
npm install -g expo-cli
Использование флага -g сделает инструмент expo-cli доступным глобально для Node.js, установленной на вашей машине.
Чтобы установить мобильные приложения Expo, посетите App Store или Google Play.
Prettier
Prettier — это инструмент для форматирования кода, поддерживающий ряд языков, включая JavaScript, HTML, CSS, GraphQL и Markdown. Он упрощает следование основным правилам форматирования. Это означает, что при выполнении его команды код автоматически форматируется в соответствии со стандартным набором наилучших правил. Более того, вы можете настроить редактор на выполнение этого действия в автоматическом режиме при сохранении файла. Благодаря этому вы забудете про несогласованные пробелы и разномастные кавычки.
Я рекомендую установить Prettier глобально и настролить плагин для редактора. Для установки перейдите в командную строку и наберите:
npm install -g prettier
После установки Prettier посетите Prettier.io, где вы сможете найти плагин для своего текстового редактора. После его установки я рекомендую добавить в его файл конфигурации следующие настройки:
"editor.formatOnSave": true,
"prettier.requireConfig": true
Благодаря этим настройкам файлы будут автоматически форматироваться при сохранении, если файл конфигурации .prettierrc будет присутствовать внутри проекта. Теперь при наличии этого файла ваш редактор всегда будет переформатировать код в соответствии с условиями проекта. Все проекты, описанные в рамках данной книги, будут содержать файл .prettierrc.
ESLint
ESLint — это линтер кода для JavaScript. Линтер отличается от средства форматирования вроде Prettier тем, что дополнительно проверяет код на такие отклонения в качестве, как неиспользуемые переменные, бесконечные циклы и недостижимый код, падающий после возврата. Как и в случае с Prettier, я рекомендую установить для вашего любимого редактора плагин ESLint. Это позволит получать предупреждение об ошибках прямо в процессе написания кода. Список плагинов для редактора вы можете найти на сайте ESLint (https://oreil.ly/H3Zao).
Также аналогично Prettier проекты могут определять желаемые правила ESLint внутри файла с расширением .eslintrc. Это даст обслуживающим проект разработчикам возможность тщательно контролировать предпочтения в коде и автоматизировать внедрение стандартов кодирования. Каждый проект, описанный в данной книге, будет включать хоть и полезный, но весьма вольный набор правил ESLint, цель которого — помочь вам избежать самых распространенных ошибок.
Наводим красоту
Это не обязательно, но мне приятнее заниматься программированием, когда все выглядит эстетически. Ничего не могу с этим поделать. У меня есть диплом в области искусств, и вырос я с любовью к теме Dracula (https://draculatheme.com), которая представляет собой цветовую схему, доступную почти для каждого текстового редактора и терминала наряду с гарнитурой Source Code Pro от Adobe (https://oreil.ly/PktVn).
Итоги
В этой главе мы настроили на компьютере рабочую и гибкую среду разработки JavaScript. Одно из величайших удовольствий в программировании — персонализация собственной среды. Я призываю вас экспериментировать с темами, цветами и инструментами, чтобы сделать ее индивидуальной. В следующем разделе книги мы уже применим эту среду на деле, разработав приложение API.
Глава 2. Введение в API
Вообразите себя сидящим в кабинке небольшого местного ресторана, где вы решили заказать сэндвич. Официант записывает ваш заказ на листке бумаги и передает его повару. Повар читает заказ, берет конкретные ингредиенты для приготовления и передает готовое блюдо официанту. Затем официант приносит его вам. Если после этого вы захотите десерт, процесс повторится.
Интерфейс программирования приложения (application programming interface, API) представляет собой набор спецификаций, позволяющий одной компьютерной программе взаимодействовать с другой. Веб-API во многом работает по похожей на заказ сэндвича схеме. Клиент запрашивает данные, которые отправляются приложению веб-сервера через протокол передачи гипертекста (HyperText Transfer Protocol, HTTP); приложение получает эти запросы и обрабатывает данные, которые затем отправляются обратно клиенту также через HTTP.
В этой главе мы изучим обширную тему веб-API и начнем разработку с клонирования стартового проекта API на нашу локальную машину. Но для начала я предлагаю рассмотреть требования приложения, которое будем создавать.
Что мы создаем
На протяжении книги мы будем создавать приложение для социальных заметок под названием Notedly. Его пользователи будут иметь возможность создать аккаунт, писать заметки в виде простого текста или Markdown, редактировать их, просматривать ленту и «избранные» заметки других пользователей. В текущем разделе книги мы будем разрабатывать API для поддержки этого приложения.
В нашем API пользователи смогут:
• создавать заметки, а также читать, обновлять и удалять их;
• просматривать ленту заметок, созданных другими пользователями, и читать их отдельные заметки без возможности обновления или удаления;
• создавать аккаунт, авторизовываться и выходить из системы;
• просматривать информацию своего профиля, а также публичную информацию профилей других пользователей;
• добавлять в «избранное» заметки других пользователей и составлять из них список.
Markdown — это популярный язык разметки, распространенный в сообществе программистов наряду с такими текстовыми приложениями, как iA Writer, Ulysses, Byword и др. Подробнее узнать о Markdown вы можете на сайте его руководства (https://www.markdownguide.org).
Звучит внушительно, но я буду разбивать реализацию этой функциональности на небольшие части. Научившись организовывать такие типы взаимодействия, вы сможете применять их для создания всех видов API.
Как мы будем это создавать
Для сборки API мы будем использовать язык запросов GraphQL API (https://graphql.org). GraphQL — это спецификация с открытым исходным кодом, изначально разработанная в Facebook в 2012 году. Ее плюс в том, что она позволяет клиенту запрашивать именно те данные, которые ему нужны, что существенно упрощает и снижает число запросов. Это также дает явное преимущество в производительности при отправке ответов на мобильные клиенты, ведь в этом случае тоже отправляются только необходимые данные. На протяжении книги мы много времени будем уделять изучению написания, разработки и использования GraphQL.
Если вы знакомы с терминологией веб-API, то наверняка слышали о REST (Representational State Transfer — «передача состояния представления») API. Архитектура REST до сих пор остается ведущим форматом для API. Эти API отличаются от GraphQL тем, что при обращении к серверу опираются на структуру URL и параметры запросов. Несмотря на то что REST вполне подходит для наших задач, простота GraphQL, надежность его инструментария и потенциальный прирост производительности при отправке ограниченного количества данных по Сети, на мой взгляд, делает этот язык запросов предпочтительным средством для современных платформ.
Начало
Прежде чем начать разработку, нам нужно сделать копию стартовых файлов проекта на компьютер. Исходный код проекта (https://oreil.ly/mYKmE) содержит все сценарии и ссылки на сторонние библиотеки, которые понадобятся нам для разработки приложения. Для клонирования кода на локальный компьютер откройте терминал, перейдите в директорию, где хранятся проекты, выполните команду gitclone для репозитория и установите зависимости командой npminstall. Для организации всего кода этой книги будет также полезным создать каталог notedly:
$ cd Projects
$ mkdir notedly && cd notedly
$ git clone git@github.com:javascripteverywhere/api.git
$ cd api
$ npm install
Сделав копию стартового кода книги и выполнив npminstall в директории, вы избегаете повторного выполнения этой команды для каждой отдельной сторонней зависимости.
Код структурирован следующим образом:
/src
Это директория, в которой вы будете вести разработку по ходу изучения книги.
/solutions
В этой директории содержатся решения для каждой главы. К ней вы можете обратиться в случае возникновения сложностей.
/final
В этой директории будет содержаться итоговый рабочий проект.
Теперь, когда у вас есть код на собственном компьютере, нужно сделать копию .env файла проекта. Этот файл служит для хранения относящейся к среде информации или таких секретов проектов, как URL базы данных, ID клиентов и пароли. Поэтому его никогда не следует проверять в системе контроля версий, так что вам понадобится собственная копия этого файла. Для ее получения, находясь в директории api, наберите в терминале следующее:
cp .env.example .env
Теперь вы должны увидеть файл .env в этой директории. Вам пока что не нужно ничего с ним делать, но позже по мере разработки бэкенда нашего API мы будем добавлять в этот файл информацию. Файл .gitignore, включенный в проект, гарантирует, что вы не сделаете коммит файла .env по неосторожности.
По умолчанию операционные системы скрывают файлы, имена которых начинаются с точки, поскольку обычно такие файлы используются только системой, а не самими пользователями. Если вы не видите файл .env, попробуйте открыть директорию в текстовом редакторе. Файл должен найтись либо там, либо через проводник. Еще один способ — набрать в окне терминала команду ls-a, которая выведет список всех файлов в текущей рабочей директории.
Итоги
API предоставляют интерфейс для передачи данных из БД к приложениям, являясь таким образом опорой последних. Используя GraphQL, мы можем быстро разрабатывать современные масштабируемые приложения на основе API. В следующей главе мы начнем создание API с построения веб-сервера при помощи Node.js и Express.
Глава 3. Создание веб-приложения с помощью Node и Express
Прежде чем переходить к реализации API, мы создадим простое серверное приложение, которое ляжет в основу его бэкенда. Для этого мы будем использовать фреймворк Express.js (https://expressjs.com) — так называемый минималистический веб-фреймворк для Node.js. Он небогат возможностями, но очень легко поддается настройке. Express.js мы будем использовать в качестве основы для нашего сервера API, но его также можно задействовать для построения полнофункциональных серверных веб-приложений.
Пользовательские интерфейсы вроде сайтов и мобильных приложений связываются с веб-серверами, когда им нужен доступ к данным. Эти данные могут быть чем угодно, начиная от HTML, необходимого для отображения страницы в браузере и заканчивая результатами поиска по запросу пользователя. Интерфейс клиента общается с сервером через HTTP. Запрос данных отправляется от клиента через этот протокол к выполняемому на сервере веб-приложению. Это приложение, в свою очередь, обрабатывает полученный запрос и возвращает данные клиенту снова через HTTP.
В этой главе мы создадим небольшое серверное веб-приложение, которое послужит основой для нашего API. Для этого мы будем использовать фреймворк Express.js и получим в итоге простое веб-приложение, отправляющее базовый запрос.
Hello World
Теперь, когда у вас появилось понимание основ серверных веб-приложений, давайте перейдем к делу. Создайте в каталоге src файл с именем index.js и добавьте в него следующее:
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000, () => console.log('Listening on port 4000!'));
В этом примере нам сначала нужно установить зависимость express и при помощи импортированного модуля Express.js создать объект app. Затем мы используем метод get объекта app, чтобы дать команду приложению отправлять ответ «Hello World» при обращении пользователя к корневому URL (/). В завершение мы указываем, что приложение будет выполняться на порте 4000. Это позволит нам просматривать приложение локально по URL http://localhost:4000.
Теперь для запуска приложения наберите nodesrc/index.js в терминале. После этого вы должны увидеть в нем запись Listeningonport4000!. Если так и произошло, у вас должна появиться возможность открыть окно браузера по ссылке http://localhost:4000 и увидеть результат, как на рис. 3.1.
Рис. 3.1. Результат выполнения кода Hello World, отображенный в браузере
Nodemon
Теперь предположим, что результат этого примера не отражает наше настроение должным образом. Мы хотим изменить код так, чтобы он добавлял к ответу восклицательный знак. Сделайте это, изменив значение res.send на Hello World!!!. Вся строка должна теперь выглядеть так:
app.get('/', (req, res) => res.send('Hello World!!!'));
Если вы перейдете в браузер и обновите страницу, то заметите, что текст остался прежним. Так произошло, потому что для применения любых вносимых нами в веб-сервер изменений требуется его перезапуск. Для этого перейдите обратно в терминал и остановите сервер нажатием Ctrl+C.
Для повторного запуска наберите nodeindex.js. Вот теперь, вернувшись в браузер и обновив страницу, вы получите обновленный ответ.
Несложно представить, насколько быстро может надоесть остановка и перезапуск сервера для применения каждого изменения. К счастью, мы можем использовать пакет Node под названием nodemon, который будет делать это автоматически. Если вы взглянете на файл проекта package.json, то внутри объекта scripts увидите инструкцию dev, которая дает nodemon команду наблюдать за файлом index. js:
"scripts": {
...
"dev": "nodemon src/index.js"
...
}
В объекте scripts присутствует несколько вспомогательных команд, с которыми мы постепенно познакомимся в последующих главах.
Теперь для запуска приложения из терминала наберите:
npm run dev
После перехода в браузер и обновления страницы вы увидите, что все осталось по-прежнему. Чтобы убедиться, что nodemon перезапускает сервер автоматически, давайте еще раз поменяем фразу в res.send:
res.send('Hello Web Server!!!')
Теперь вы сможете видеть внесенные изменения при обновлении страницы без ручной перезагрузки сервера.
Расширение опций порта
Пока что наше приложение работает на порте 4000. Такой вариант отлично подходит для локальной разработки, но при развертывании у нас должна быть возможность изменить номер порта. Давайте сейчас внесем это обновление и начнем с добавления переменной Port:
const port = process.env.PORT || 4000;
Это изменение позволит нам динамически устанавливать порт в среде Node и выполнять откат к порту 4000, если иной не будет установлен. Теперь давайте настроим код app.listen так, чтобы он работал с этим обновлением, и используем литерал шаблона для регистрации правильного порта.
app.listen(port, () =>
console.log(`Server running at http://localhost:${port}`)
);
Итоговый код теперь должен выглядеть так:
const express = require('express');
const app = express();
const port = process.env.PORT || 4000;
app.get('/', (req, res) => res.send('Hello World!!!'));
app.listen(port, () =>
console.log(`Server running at http://localhost:${port}`)
);
Теперь у нас есть основа кода рабочего веб-сервера. Для проверки его работоспособности убедитесь, что в консоли отсутствуют ошибки, и перезагрузите окно браузера со ссылкой http://localhost:4000.
Итоги
Серверные веб-приложения являются основой разработки API. В этой главе мы создали простое веб-приложение при помощи фреймворка Express.js. При разработке приложений на основе Node вам доступен широкий арсенал фреймворков и инструментов. Express.js — отличный выбор из-за своей гибкости, поддержки сообщества и зрелости самого проекта. В следующей главе мы преобразуем наше веб-приложение в API.
Глава 4. Наш первый GraphQL API
Смею предположить, что вы человек, раз уж читаете эти строки. Будучи человеком, вы обладаете рядом интересов и пристрастий. У вас также есть члены семьи, друзья, знакомые, одноклассники и коллеги. У всех них, в свою очередь, тоже есть свои социальные связи, интересы и пристрастия. Некоторые из этих связей и интересов пересекаются, а некоторые — нет. В совокупности у каждого из нас есть связанный круг людей из нашей жизни.
GraphQL как раз и создавался для разрешения сложностей в таких запутанных типах взаимосвязей данных при разработке API. Написав GraphQL API, мы получаем возможность эффективно связывать данные, что снижает сложность и число запросов и в то же время позволяет нам передавать на клиент только нужные данные.
Не слишком ли это сложно для приложения, работающего с заметками? Может быть, так оно и звучит, но как вы увидите, инструменты и техники, предоставляемые экосистемой GraphQL JavaScript, не только делают возможными, но и упрощают любые виды разработки API.
В этой главе мы будем создавать GraphQL API, используя пакет apollo-server-express. Ради этого мы изучим фундаментальные темы, касающиеся GraphQL, напишем схему GraphQL, разработаем код для разрешения функций этой схемы и обратимся к нашему API через пользовательский интерфейс GraphQL Playground.
Превращение сервера в API (ну, вроде того)
Давайте начнем разработку API с преобразования нашего сервера Express в сервер GraphQL при помощи пакета apollo-server-express. Apollo Server (https://oreil.ly/1fNt3) — это открытая серверная библиотека GraphQL, работающая с большим числом серверных фреймворков Node.js, включая Express, Connect, Hapi и Koa. Он позволяет передавать данные из Node.js-приложения в виде GraphQL API и предоставляет полезные инструменты вроде GraphQL Playground — визуального помощника для взаимодействия с нашим API при разработке.
Чтобы написать API, мы изменим код веб-приложения из предыдущей главы. Давайте начнем с включения пакета apollo-server-express. Добавьте в начало файла src/index.js следующее:
const { ApolloServer, gql } = require('apollo-server-express');
Теперь, когда мы импортировали apollo-server, перейдем к настройке базового приложения GraphQL. Такие приложения состоят из двух основных компонентов: схемы определений типов и распознавателей, разрешающих запросы и мутации данных. Если вы ничего не поняли, это нормально. Мы
