Переходите от идеи к чистому, четкому и легко читаемому коду.

Как инженер-программист-самоучка, я прошел ДОЛГИЙ путь с тех пор, как начал программировать. Я помню, как поместил весь свой код в один ОГРОМНЫЙ файл, кучу комментариев и немного планирования.

Я также понятия не имел, как использовать Git или как он на самом деле работает. Я сильно полагался на функцию отмены VSCode для отмены изменений, и это всегда было

git commmit .
git push origin master.

И, конечно же, это было сделано только тогда, когда я полностью закончил проект.

Итак, вот что я узнал на данный момент, и несколько отличных советов для начинающих.

Зачем мне план?

Ну, я могу сказать вам из первых рук, что это помогает:

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

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

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

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

Усвоенный урок — никогда не начинайте что-либо, не спланировав и не озвучив свои идеи.

Составить список

Иногда я люблю списки, а иногда просто подъезжаю и пишу список в конце сеанса работы над проектом. В любом случае, я составляю список, но это происходит в разное время.

Составление списка — это та же самая идея, которую вы услышите пару раз, читая это, и она заключается в создании мини-целей (и получении дополнительного удовольствия от вычеркивания пунктов из вашего списка).

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

Сделайте еще один шаг вперед

Если вы делаете что-то большое и не уверены, сможете ли вы потратить время или довести дело до конца. Вы, вероятно, хотите, чтобы вас отчитывали за ваш прогресс!

Один из моих любимых способов поддерживать мотивацию и постоянно прогрессировать — рассказать об этом кому-нибудь. Это не обязательно должно быть «Можете ли вы привлечь меня к ответственности за этот проект, который я собираюсь начать», это может быть так же просто, как «У меня есть эта классная идея, и я собираюсь начать ее реализовывать, я Обязательно покажу его вам, как только соберемся».

Планируйте поток пользователей

Итак, у вас есть крутая идея, и теперь вы готовы ее воплотить. Но как это будет работать на самом деле? Вы не совсем уверены, но знаете, что это будет делать.

Похоже, вам нужно начать с описания пользовательского потока.

Что такое поток пользователей?

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

Вы начнете планировать действия с момента, когда пользователь попадет на целевую страницу, до того момента, когда он войдет или войдет в систему.

В то время как вы могли бы сделать это практически где угодно — и я начал делать это в PowerPoint, Word и Canva. Лучший инструмент, о котором я знаю, это, вероятно, Whimsical, который также бесплатен (ура!).

Вот пример пользовательского потока, который я недавно создал для викторины.

Планирование пользовательского интерфейса (UI)

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

  1. Сделайте проект менее сложным
  2. Помогите создать небольшие цели для достижения в рамках вашего проекта

Мне нравится начинать с макета каркаса в виде бумажного эскиза, макета в Canva или Figma или в любом другом инструменте по вашему выбору. (Я даже использовал PowerPoint, чтобы сделать это на одном этапе!)

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

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

Фирменный стиль

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

  • Кнопки
  • Заголовки
  • Ссылки
  • Текст абзаца
  • Открытки
  • Выпадающие меню
  • Радиоселекторы

План компонентов

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

Общие стили

Общие стили могут быть стилями в таблице стилей App.css. Это могут быть такие элементы, как заголовки, абзацы, кнопки и шрифты. Идея заключается в том, что вам не нужно повторно импортировать какие-либо шрифты в приложение несколько раз, и вы можете легко найти и исправить любой нежелательный CSS!

Добавить таблицы стилей

Каждый компонент будет иметь свою единственную папку, и в этой папке будет файл CSS (или любой другой вариант CSS, который вы предпочитаете). Наряду с этим мне нравится использовать модули CSS, чтобы убедиться, что стили CSS применяются только к файлу, который импортирует модули CSS.

Стили в этой таблице стилей следует использовать и применять только к файлу index.js, который находится в папке вашего компонента.

Многоразовый код

Планируя ваши компоненты, мы думаем о следующем:

  • Каковы входные переменные данные?
  • Что можно жестко запрограммировать?
  • Какие части должны иметь динамическую визуализацию?
  • Какие данные вам нужны для рендеринга этого компонента и как он структурирован?

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

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

Начать кодирование

Организуйте свой код

Я всегда создаю 2–3 папки, когда начинаю новый проект (конечно, после запуска приложения create-react-app). Папки

  • компоненты
  • данные
  • страницы

Компоненты

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

  • Файл JSX (где будет жить компонент и куда будут импортированы файлы данных и CSS)
  • Файл CSS (в папке есть только стили для компонента)
  • index.js (для всего импорта и экспорта)

Данные

Обычно это набор файлов JSON с образцами данных или реальными данными, которые я использую для проверки правильности работы всех моих функций рендеринга.

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

Страницы

Страницы во многом действуют как компоненты и отображают уникальный набор компонентов. Каждая папка будет именем страницы и будет иметь ту же структуру, что и компонент:

  • Файл JSX (где будет жить компонент и куда будут импортированы файлы данных и CSS)
  • Файл CSS (в папке есть только стили для компонента)
  • index.js (для всего импорта и экспорта)

Тестируйте на ходу

Хотя я еще не перешел на поезд TDD (разработка через тестирование), я проверяю, работает ли мой код после каждой изменяемой или реализуемой функции. Я делаю это, используя следующий процесс:

  • Создание новых папок и файлов для компонента
  • Первоначально настройте отображение имени в виде текста (абзац:p или заголовок: h1).
return (
  <h1> New Compoenent Name </h1>
)
  • Проверьте, работает ли это правильно
  • Начните кодировать компонент по одному элементу за раз и проверьте, все ли работает правильно.
  • Как только все будет выглядеть хорошо, переместите импорт компонента на нужную страницу и т. д.

Будьте изобретательны, но не отвлекайтесь.

Естественно получить поток идей о том, как вы можете улучшить и сделать свой веб-сайт лучше, но не менее важно начать экономить и добавлять модные вещи после того, как ядро ​​​​работает!

Мне нравится использовать доску Notion или Jira, чтобы упорядочивать и фиксировать свои идеи, чтобы я мог выбирать, какую следующую причудливую функцию я хочу добавить!

Удачи в создании вашего сайта! Не забудьте также изучить любые решения без кода, чтобы получить что-то быстрее (если это ваша миссия)!