Книга «Разработка на JavaScript. Построение кроссплатформенных приложений с помощью GraphQL, React, React Native ...»

Привет, Хаброжители! Что такое современный JavaScript? Когда-то он просто добавлял интерактивности к окнам веб-браузера, а теперь превратился в основательный фундамент мощного и надежного софта. Разработчики любого уровня смогут использовать JavaScript для создания API, веб-, мобильных и десктопных приложений. В этой книге:

• Работа с данными с помощью GraphQL.
• Аутентификация для API, веб- и нативных приложений.
• Создание высокопроизводительных веб-приложений
• Разработка кроссплатформенных приложений под iOS и Android
• Создание десктопных приложений.

Для кого эта книга

Она предназначена для разработчиков среднего уровня, имеющих некоторый опыт работы с HTML, CSS и JS, а также для амбициозных новичков, желающих изучить инструменты, необходимые для запуска проектов для бизнеса и любых других целей.

Стилевое оформление приложения

В своей песне Lip Service 1978 года Элвис Костелло (Elvis Costello) насмешливо исполняет строчку «don’t act like you’re above me, just look at your shoes» («не веди себя так, будто ты выше меня, а лучше взгляни на свои ботинки»). Эта фраза подразумевает, что автор высмеивает попытку людей возвышать собственный социальный статус, просто обратив внимание на чьи-то ботинки. При этом неважно, насколько опрятен его костюм или элегантно ее платье. Хорошо это или плохо, но стиль является важным элементом человеческой культуры, и мы все привыкли отмечать подобные социальные сигналы. Археологи обнаружили, что люди даже во времена позднего палеолита создавали ожерелья и браслеты из костей, зубов, ягод и камня. Наша одежда служит не только практическим целям защиты от погодных условий, но также может сообщать окружающим о нашей культуре, социальном статусе, интересах и многом другом.

Веб-приложение вполне работоспособно и со стандартным веб-стилем, но, применив к нему CSS, мы сможем наладить более наглядную связь с нашими пользователями. В этой главе мы научимся использовать CSS-in-JS-библиотеку Styled Components, чтобы добавлять в приложение макет и стиль. Это позволит нам повысить удобство его использования и улучшить эстетический облик в рамках легко обслуживаемой структуры кода, основанной на компонентах.

Создание компонента макета

Многие, а в нашем случае все, страницы приложения будут использовать общий макет. Например, у всех страниц будет заголовок, боковая панель и область содержания (рис. 13.1). Вместо того чтобы импортировать общие элементы макета в каждый компонент, мы можем создать отдельный компонент для нашего макета и уже в него обернуть все компоненты страницы.

Начнем же мы с создания файла src/components/Layout.js. В него мы импортируем общие компоненты и содержимое макета. Наша React-функция компонента будет получать свойство children, которое позволит указать, где в макете будет находиться дочерний контент. Мы также используем пустой JSX-элемент <React.Fragment>, чтобы избежать излишней разметки.

Теперь в файле src/pages/index.js мы можем обернуть компоненты страницы в только что созданный компонент Layout, чтобы применить общий макет к каждой странице:

// Импортируем React и зависимости маршрутизации
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
// Импортируем общий компонент Layout
import Layout from '../components/Layout';
// Импортируем маршруты
import Home from './home';
import MyNotes from './mynotes';
import Favorites from './favorites';
// Определяем маршруты
const Pages = () => {
   return (
      <Router>
         {/* Оборачиваем наши маршруты в компонент Layout */}
         <Layout>
            <Route exact path="/" component={Home} />
           <Route path="/mynotes" component={MyNotes} />
           <Route path="/favorites" component={Favorites} />
        </Layout>
     </Router>
   );
};
export default Pages;

Заключительным шагом будет удаление всех экземпляров или в компонентах страницы. Например, теперь код файла src/pages/Home.js будет сокращен:

import React from 'react';
const Home = () => {
   return (
      <div>
         <p>This is the home page</p>
      </div>
   );
};
export default Home;

Закончив с этим, вы можете просмотреть приложение в браузере. При переходе между разными маршрутами на каждой странице будут появляться заголовок и ссылки навигации. Сейчас они не стилизованы, и у страницы нет визуального макета, поэтому в следующем разделе мы как раз перейдем к добавлению стилей.

CSS

Cascading Style Sheets (CSS) расшифровывается как «каскадная таблица стилей» и представляет собой набор правил, позволяющих писать стили для Сети. Каскадность стилей в данном случае означает, что отрисовывается последний или наиболее конкретно определенный стиль. Например:

p {
   color: green
}
p {
   color: red
}

Данный CSS отрисует все абзацы красным, делая правило color: green неактуальным. Несмотря на свою простоту, этот принцип потребовал разработки десятков паттернов и техник для избежания подводных камней. Такие структурные методы CSS, как BEM (блок–элемент–модификатор), OOCSS (объектно-ориентированный CSS) и Atomic CSS, для облегчения определения областей стилей используют описательное именование классов. Препроцессоры вроде SASS (Syntactically Awesome Style Sheets) и LeSS (Leaner Style Sheets) предоставляют инструменты, упрощающие синтаксис CSS и допускающие использование модульных файлов. Несмотря на то что у каждого из них есть свои достоинства, CSS-in-JS предлагает привлекательный способ разработки React или других приложений на основе JavaScript.

А ЧТО НАСЧЕТ CSS-ФРЕЙМВОРКОВ?
CSS- и UI-фреймворки являются популярным выбором для разработки приложений, и на то есть свои причины. Эти фреймворки выступают в качестве надежной основы стилей и уменьшают количество необходимого кода, так как предоставляют стили и функциональность для распространенных паттернов приложений. Компромисс здесь в том, что использующие их приложения могут стать визуально похожими, а также вызвать увеличение размера бандла. Однако такие компромиссы могут оказаться для вас оправданными. К числу моих любимых UI-фреймворков для работы с React относятся Ant Design (https://ant.design), Bootstrap (https://oreil.ly/XJm-B), Grommet (https://v2.grommet.io) и Rebass (https://rebassjs.org).

CSS-in-JS

При моей первой встрече с CSS-in-JS я ужаснулся. Годы моего становления в сфере веб-разработки прошли в эпоху веб-стандартов, и я продолжаю выступать за доступность и разумные усовершенствования в этой сфере. «Разделение интересов» было ключевой составляющей моих веб-практик на протяжении более 10 лет. Так что если это вам знакомо и простое прочтение CSS-in-JS вызывает у вас неприятные ассоциации, то вы не одиноки. Однако, как только я решил уделить освоению этого инструмента время, не отвлекаясь на излишнюю критику, он быстро завоевал мою симпатию. CSS-in-JS помогает легко представить интерфейс пользователя как набор компонентов, что я на протяжении многих лет старался делать с помощью структурных методов и препроцессоров CSS.

В этой книге в качестве CSS-in-JS-библиотеки мы будем использовать Styled Components (https://www.styled-components.com). Она быстра, подвижна, постоянно развивается и является наиболее популярной библиотекой для этого инструмента. Кроме того, она используется такими крупными компаниями, как Airbnb, Reddit, Patreon, Lego, BBC News, Atlassian и др.

Styled Components позволяет нам определять стили элемента при помощи JS-синтаксиса шаблонных литералов. Мы создаем переменную, которая будет относиться к HTML-элементу и ассоциированным с ним стилям. Поскольку звучит это очень абстрактно, давайте взглянем на простой пример:

import React from 'react';
import styled from 'styled-components'
const AlertParagraph = styled.p`
   color: green;
`;
const ErrorParagraph = styled.p`
   color: red;
`;
const Example = () => {
   return (
      <div>
         <AlertParagraph>This is green.</AlertParagraph>
         <ErrorParagraph>This is red.</ErrorParagraph>
      </div>
   );
};
export default Example;

Как видите, мы можем легко определять области видимости стилей. Помимо этого, мы ограничиваем эти области до конкретного компонента. Это помогает нам избежать коллизий имен классов между разными частями приложения.

Создание компонента Button

Теперь, когда мы разобрались с основами стилизованных компонентов, давайте интегрируем их в наше приложение. Начнем же мы с написания стилей для элемента , что позволит нам использовать его в этом приложении повторно. В предыдущем примере мы интегрировали стили вместе с кодом React/JSX, но можно также написать и автономные стилизованные компоненты. Для начала создайте новый файл src/components/Button.js, импортируйте библиотеку styled из styled-components и настройте экспортируемые компоненты в виде шаблонного литерала следующим образом:

import styled from 'styled-components';
const Button = styled.button`
/* our styles will go here */
`;
export default Button;

Создав компонент, можно заполнить его стилями. Добавьте базовые стили кнопки, а также стили hover (наведения) и active (активного состояния):

import styled from 'styled-components';
const Button = styled.button`
   display: block;
   padding: 10px;
   border: none;
   border-radius: 5px;
   font-size: 18px;
   color: #fff;
   background-color: #0077cc;
   cursor: pointer;
   :hover {
      opacity: 0.8;
   }
   :active {
      background-color: #005fa3;
   }
`;
export default Button;

Теперь мы можем использовать эту кнопку в любой части приложения. Например, для ее использования на домашней странице можно импортировать компонент и добавить элемент <«Button»> в любом месте, где мы обычно использовали бы <«button»>.

В src/pages/home.js:

import React from 'react';
import Button from '../components/Button';
const Home = () => {
   return (
       <div>
         <p>This is the home page</p>
         <Button>Click me!</Button>
       </div>
    );
};
export default Home;

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

Добавление глобальных стилей

Несмотря на то что многие из наших стилей будут содержаться в отдельных компонентах, каждый сайт или приложение также имеет набор глобальных стилей (таких как CSS-сбросы, шрифты и базовые цвета). Для размещения этих стилей мы можем создать компонент GlobalStyle.js.

Он будет немного отличаться от нашего предыдущего примера, поскольку мы создадим таблицу стилей, а не стили, прикрепленные к конкретному HTML-элементу. Для реализации этого мы импортируем модуль createGlobalStyle из styled-components. Мы также импортируем библиотеку normalize.css (https://oreil.ly/i4lyd), чтобы обеспечить согласованную отрисовку HTML-элементов в браузерах. Наконец, мы добавим несколько глобальных правил для HTML body приложения и стилей ссылок по умолчанию.

В src/components/GlobalStyle.js:

// Импортируем createGlobalStyle и нормализуем
import { createGlobalStyle } from 'styled-components';
import normalize from 'normalize.css';
// Можно написать CSS как шаблонный литерал JS
export default createGlobalStyle`
   ${normalize}
   *, *:before, *:after {
      box-sizing: border-box;
   }
   body,
   html {
      height: 100%;
      margin: 0;
   }
   body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
      background-color: #fff;
      line-height: 1.4;
   }
   a:link,
   a:visited {
      color: #0077cc;
   }
   a:hover,
   a:focus {
      color: #004499;
   }
   code,
   pre {
      max-width: 100%;
   }
`;

Для применения этих стилей мы импортируем их в файл App.js и добавим в приложение элемент <Global Style />.

import React from 'react';
import ReactDOM from 'react-dom';
// Импортируем глобальные стили
import GlobalStyle from '/components/GlobalStyle';
// Импортируем маршруты
import Pages from '/pages';
const App = () => {
   return (
      <div>
         <GlobalStyle />
         <Pages />
       </div>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));

Теперь к приложению применены глобальные стили. При его просмотре в браузере вы увидите, что изменился шрифт, ссылки получили новые стили, а поля были удалены (рис. 13.2).

Об авторе

Адам Д. Скотт — руководитель инженерного отдела, веб-разработчик и преподаватель, проживающий в Коннектикуте. В настоящее время он работает ведущим веб-разработчиком в Бюро финансовой защиты потребителей, где совместно с командой талантливых инженеров занимается созданием открытых веб-приложений. Кроме того, он более десяти лет работал в сфере образования, где занимался как обучением, так и составлением учебных планов по различным техническим тематикам. Он является автором книги «Wordpress for Education» (Packt, 2012), видеокурса «The Introduction to Modern Front-End Development» и серии докладов «The Ethical Web Development» (O’Reilly, 2016–2017).

Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок

Для Хаброжителей скидка 25% по купону — JavaScript

По факту оплаты бумажной версии книги на e-mail высылается электронная книга.