Вначале не было ничего желаемого. В первый день мы собрались и решили создать приложение для выдачи бейджей сотрудникам. Мы назвали это Badges, и оно нам понравилось.
При создании нового веб-приложения вам нужно принять множество решений до и во время разработки. Мы решили попробовать несколько технологий, отличных от тех, которые мы обычно используем, например, React.
Мы решили использовать React / Redux во фронтенде. Задачи управления пользователями и аутентификации мы оставили Auth0. В этом сообщении в блоге я хотел бы поделиться положительным и отрицательным опытом, с которым наша команда столкнулась в процессе разработки приложения React / Redux.
Все на борту!
Как вся команда, мы собрались вместе, чтобы обсудить, как проводить фронтенд-дизайн. Для нас было несколько вариантов, таких как AngularJS, Vue.js или React. Как вы понимаете из заголовка этого поста, мы выбрали React! Так зачем мы это сделали?
Я не собираюсь перечислять здесь преимущества и недостатки этих библиотек и фреймворков JavaScript. Вы можете проверить этот средний пост для этой цели.
Вот почему нам нравится React:
- Дизайн React, ориентированный на JavaScript, упрощает обучение.
- React легко поддерживать, потому что все компоненты React имеют одинаковую структуру.
- Реагировать быстро. Очень быстро! Они достигают этого с помощью Virtual DOM.
- У него отличное сообщество…
Под парусами
Мы начали с этого урока. С бэкендом все шло хорошо, так как у команды было достаточно знаний и опыта в бэкэнд-разработке. Однако во внешнем интерфейсе мы были не так уж и искушены.
Нашей миссией было создание одностраничного веб-приложения.
Мы реализовали все операции CRUD для разных сущностей в одном и том же представлении. Приложение работало правильно, однако в итоге мы получили приложение, которое имеет только одно представление вместо одностраничного веб-приложения! Чтобы решить эту проблему, мы разделили веб-приложение на несколько представлений с помощью React Router.
Независимо от того, сколько рыбы в море, потому что без меня оно кажется таким пустым
Поскольку каждый из нас был новичком в разработке внешнего интерфейса, всякий раз, когда один из членов команды вводил функцию, другие следовали его / ее стилю, копируя и вставляя. Однако это «копирование и вставка» распространило ошибки на все приложение!
Одним из примеров этого было использование componentDidMount (). Сначала мы использовали этот метод повсюду, потому что это было то, что мы видели в уроке. Позже мы поняли, что обновление состояния в componentDidMount () заставляло страницу каждый раз повторно отрисовываться. Затем мы проверили документацию по API и нашли порядок вызова этих методов компонента React:
constructor() componentWillMount() render() componentDidMount()
Затем мы заново реализовали нашу монтажную конструкцию в соответствии с этим порядком. Вам следует ознакомиться с документацией по API, чтобы лучше понять, как работает установка.
После того, как мы закончили реализацию общей структуры, мы почувствовали себя успешными в жизни.
Расположение файлов: структура главной деки
Используя макет, предложенный в этом посте, мы смогли организовать наш с нуля.
/src
/scenes
/Home
/components
/ButtonShare
/index.js
/index.js
/Sign
/components
/ButtonHelp
/index.js
/scenes
/Login
/components
/Form
/index.js
/ButtonFacebookLogin
/index.js
/index.js
/Register
/index.js
/index.js
Прямое копирование из статьи:
«Компоненты, определенные на корневом уровне вашего проекта в папке компонентов, являются глобальными и могут использоваться в любом месте вашего приложения. Но если вы решите определить новый компонент внутри другого компонента (вложение), этот новый компонент может использоваться только своим прямым родителем ».
Важность UI / UX
Как инженер, когда я работаю над проектом, я сначала ставлю одну вещь в список. Я должен как можно скорее создать минимально жизнеспособный продукт. Однако никому не нравится ваше приложение, если это глупое веб-приложение без какого-либо CSS, как в начале 90-х: когда Интернет только изобрел. Прошло время, и теперь людям тоже хочется насладиться его эстетикой.
К нашей команде присоединился дизайнер, чтобы украсить приложение. Он реализовал страницы в статическом HTML с потрясающими стилями, а программисты превратили их в динамические страницы с помощью прекрасной функции React: JSX.
Просмотр статических страниц помог нам визуализировать бизнес-логику. Это ускорило период разработки.
Тук-тук. Кто там? Это Redux.
Когда мы только начали проект, мы знали, что нам может понадобиться Redux.
Однако мы решили больше сосредоточиться на React и на время забыть о Redux. Мы думали, что внедрить Redux в наш дизайн не так уж и сложно.
Но мы ошибались, мы ожидали, что рефакторинга кода будет достаточно, но нам пришлось перепроектировать всю архитектуру и практически заново реализовать приложение. Опять таки.
Точка кипения была моментом, когда мы осознали проблему с реквизитом. Когда вы создаете приложение с помощью React, вы передаете множество свойств сверху вниз, слева направо, снизу вверх… но должен быть лучший способ сделать это.
Вуаля! Redux решает эту проблему, вводя магазин. Лучшая модель проектирования: Flux!
Теперь у нас есть один магазин, чтобы управлять ими всеми!
Торнадо: внедрение Redux нарушает макет файла
Правильное создание макета файла - это одно, а поддержание его в порядке - другое. Однако, как команда разработчиков, мы не видели в этом важности.
Спустя несколько недель у нас возникла проблема с организацией папок. Очевидно, что контейнеры не были контейнерами (которые являются интеллектуальными компонентами) или компоненты больше не были компонентами. Они использовались как взаимозаменяемые. Мы не уделяли этому так много внимания, потому что нашей основной задачей было увеличение количества функций приложения. Мы проигнорировали лучшие практики и отложили их на некоторое время, чтобы получить больше возможностей. Это была огромная ошибка.
После нашей первой внутренней демонстрации у нас было время для ретроспективной встречи. Мы правильно определили наши проблемы и переделали верстку файлов, следуя советам из той статьи.
Уроки выучены
- UI / UX-дизайн - это то, что делает ваше приложение крутым. Это то, что видят люди, и это оказывает огромное влияние на оценку вашего приложения. Как можно больше обращайте на это внимание.
- Возможно, вам придется время от времени переписывать некоторые части вашего кода. Не бойтесь этого; Действуй! Но если вы хотите свести эти изменения к минимуму, вам следует потратить больше времени на их изучение.
- Если вы в конечном итоге будете использовать Redux со своим приложением React, я настоятельно рекомендую вам использовать его с самого начала. Внедрение redux позже может привести к множеству изменений в макете файла, как это было с нами.
- Очень важно поддерживать аккуратность и чистоту макета файла. Не забудьте выделить для этого достаточно времени, в дальнейшем это сэкономит вам больше.
- Изучить новую технологию невозможно, просто следуя инструкциям или просматривая видео. Вы должны запачкать руки, вы должны продолжать программировать! Однако вы также не можете просто продолжать программировать. Иначе вы не научитесь на своих ошибках. Учись, программируй, повторяй!
И это все. Увидимся в другом сообщении в блоге!
Хотите узнать больше?
