5.9 Резюме-шпаргалка


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


Дизайн


Если дизайна проекта у вас нет, вы смело сможете сделать его сами. Онлайн инструмент Figma поможет вам сделать красивые макеты приложения, не дожидаясь дизайнера. Данный редактор окажется особенно полезным для тех, кто создаёт свой собственный проект.

Бесплатные картинки можно скачать на популярном сервисе Flat Icon. Если вы хотите использовать Material Design, то подобрать палитру цветов вам поможет этот инструмент.


Стиль кода


Нельзя забывать про стиль написания кода: он должен быть единый для всего приложения. Есть очень хорошие ресурсы по стилю написания кода JavaScript, а также стилю кода React/JSX.

Рука об руку со стилем кода идет стиль именования CSS-классов и построения структуры разметки компонентов. С этими вещами вам поможет методология БЭМ. Она содержит богатый набор концепций на все случаи жизни!


Популярные инструменты


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

Для продвинутой работы с CSS очень хорош SASS. C ним можно делать порой невероятные вещи. Flexbox поможет вам быстро получить необходимую компоновку элементов.

UI библиотеки, наподобие React Bootstrap, Material UI, React Virtualized, Blueprint, Semantic UI React, React Toolbox и пр. - способны сильно сэкономить ваше время на создание базовых компонентов. Иногда создание базового компонента сводится лишь к созданию обёртки с последующим переопределением стилей. Расширенный список UI библиотек можно посмотреть здесь.


Маршрутизация


В любом серьёзном приложении требуется маршрутизация. Пользователь должен видеть, где он находится в приложении в любой момент времени. В нашем проекте мы использовали react-router, но есть и другие: router5, aviator и пр. Полный список можно посмотреть здесь.


Асинхронная загрузка данных


Как правило приложение всегда работает с какими-то данными. Обычно источником этих данных служит удалённый сервер. Чтобы правильно построить взаимодействие вашего приложения и сервера необходимо хорошо понимать архитектуру клиент-сервер и протокол HTTP. Довольно подробно о клиент-серверном взаимодействии написано в документации MDN.

Для обращения к удалённому серверу можно использовать библиотеку superagent, у которой, помимо прочего, хорошая документация.


Диаграммы UML


Если вам вдруг понадобятся UML-диаграммы, то на помощь придёт мощный бесплатный онлайн-инструмент draw.io. C ним вы точно соорудите диаграммы любой сложности, которые можно использовать воплощения в жизнь своих архитектурных идей.


Состояние приложения


Современные приложения нуждаются в состоянии. Но по мере роста количества кода управлять состоянием становится крайне сложно. Для борьбы с этой сложностью изобретены специальные инструменты, с одним из которых мы уже познакомились: Redux. Существуют и другие хорошие инструменты, такие как Flux, MobX и Apollo для GraphQL. Возможно их концепции вам понравятся больше.


Напутствие


В разработке фронтенда важно не отставать от инноваций. Они появляются не просто так, а чтобы облегчить нам жизнь! Ниже я перечислю некоторые советы, которые позволят поддерживать ваше приложение "в форме":

  • Используйте известные паттерны проектирования и избегайте антипаттернов.

  • Ищите, изучайте новые интересные технологии и концепции, которые могли бы значительно улучшить ваш проект в плане архитектуры, быстродействия, читабельности и пр.

  • Переписывайте "старые" части приложения, использующие устаревшие библиотеки или подходы.

  • Постоянно обновляйте версии своих библиотек.

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

  • Создавайте правильные абстракции. В этом вам помогут диаграммы UML.

  • Дробите большую проблему на более мелкие - иначе говоря, проводите декомпозицию. Сама компонентная природа React располагает к этому!

  • Обязательно читайте книги по архитектуре, рефакторингу и стилю кода. Во-первых это придаст ясности вашему коду, что сократит количество ошибок и облегчит поддержку. Во-вторых это обеспечит хорошее масштабирование приложения, что важно в постоянно развивающемся проекте.

  • Уделите достаточно времени на проведение объектно ориентированного анализа. Во время этого процесса очень важно правильно определить все сущности, что позволит создать хорошую архитектуру приложения. Данная книга содержит в себе массу полезной информации по ООА. А если же вы до сих пор с ним не знакомы, обязательно изучите предложенный источник. Ваш уровень знаний в области анализа существенно возрастёт, что неминуемо улучшит ваш код.

Это лишь небольшое количество советов, способных существенно улучшить качество вашего кода. На этом мы заканчиваем данную главу. Я очень надеюсь, что информация оказалась для вас полезной. Успехов в разработке, и да прибудет с вами сила React!