Переходите от идеи к чистому, четкому и легко читаемому коду.
Как инженер-программист-самоучка, я прошел ДОЛГИЙ путь с тех пор, как начал программировать. Я помню, как поместил весь свой код в один ОГРОМНЫЙ файл, кучу комментариев и немного планирования.
Я также понятия не имел, как использовать Git или как он на самом деле работает. Я сильно полагался на функцию отмены VSCode для отмены изменений, и это всегда было
git commmit . git push origin master.
И, конечно же, это было сделано только тогда, когда я полностью закончил проект.
Итак, вот что я узнал на данный момент, и несколько отличных советов для начинающих.
Зачем мне план?
Ну, я могу сказать вам из первых рук, что это помогает:
- сохраняя сосредоточенность
- мотивация
- уменьшение путаницы
- и сокращение сложного принятия решений
Вскоре после того, как я начал свое путешествие по разработке программного обеспечения, я подал заявку на свою первую работу в стартапе в сфере образовательных технологий — они в основном хотели, чтобы я реализовал внешний интерфейс YouTube за 2 часа.
Это была достаточно сложная задача сама по себе, и я ужасно нервничал. Вдобавок ко всему, я не тратил время на планирование того, что я собирался реализовать, даже на высокоуровневый каркас реализации.
После размышлений об интервью и невозможности сделать что-то большее, чем рендеринг данных в тайлах. Я понял, что мне нужно было потратить время, чтобы спланировать то, что я хочу делать. Мало того, что это уменьшило бы сложность задачи, но я бы намного меньше нервничал, поскольку я достигал небольших вех по ходу дела.
Усвоенный урок — никогда не начинайте что-либо, не спланировав и не озвучив свои идеи.
Составить список
Иногда я люблю списки, а иногда просто подъезжаю и пишу список в конце сеанса работы над проектом. В любом случае, я составляю список, но это происходит в разное время.
Составление списка — это та же самая идея, которую вы услышите пару раз, читая это, и она заключается в создании мини-целей (и получении дополнительного удовольствия от вычеркивания пунктов из вашего списка).
Я поклонник бумажного списка или документа Google, если вы делаете что-то большее, вы можете создать электронную таблицу или доску Jira. Создавайте то, что лучше всего подходит для вас!
Сделайте еще один шаг вперед
Если вы делаете что-то большое и не уверены, сможете ли вы потратить время или довести дело до конца. Вы, вероятно, хотите, чтобы вас отчитывали за ваш прогресс!
Один из моих любимых способов поддерживать мотивацию и постоянно прогрессировать — рассказать об этом кому-нибудь. Это не обязательно должно быть «Можете ли вы привлечь меня к ответственности за этот проект, который я собираюсь начать», это может быть так же просто, как «У меня есть эта классная идея, и я собираюсь начать ее реализовывать, я Обязательно покажу его вам, как только соберемся».
Планируйте поток пользователей
Итак, у вас есть крутая идея, и теперь вы готовы ее воплотить. Но как это будет работать на самом деле? Вы не совсем уверены, но знаете, что это будет делать.
Похоже, вам нужно начать с описания пользовательского потока.
Что такое поток пользователей?
Пользовательский поток — это блок-схема, объясняющая различные способы навигации пользователя по вашему приложению.
Вы начнете планировать действия с момента, когда пользователь попадет на целевую страницу, до того момента, когда он войдет или войдет в систему.
В то время как вы могли бы сделать это практически где угодно — и я начал делать это в PowerPoint, Word и Canva. Лучший инструмент, о котором я знаю, это, вероятно, Whimsical, который также бесплатен (ура!).
Вот пример пользовательского потока, который я недавно создал для викторины.
Планирование пользовательского интерфейса (UI)
Планирование того, как будет выглядеть ваше приложение, очень помогает процессам программирования. Как я уже упоминал выше, это помогает:
- Сделайте проект менее сложным
- Помогите создать небольшие цели для достижения в рамках вашего проекта
Мне нравится начинать с макета каркаса в виде бумажного эскиза, макета в 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, чтобы упорядочивать и фиксировать свои идеи, чтобы я мог выбирать, какую следующую причудливую функцию я хочу добавить!
Удачи в создании вашего сайта! Не забудьте также изучить любые решения без кода, чтобы получить что-то быстрее (если это ваша миссия)!