Вот такой челлендж нашел мой друг, который проводит Dicoding Indonesia. Одной из тем было развитие туристического сектора. Итак, что находится в нашем мозгу:

  1. Клон Uber/Gojek, но с гидами вместо водителя.
  2. Клон Pinterest, но только для фотографий туристических мест.

Flutter был нашим первоначальным решением, потому что нас трое, и двое разработчиков флаттера. Да, я единственный, кто использует React. Но однажды я написал приложение с использованием Flutter, так что это действительно большое дело.

Пока я не понял, что:

  1. Это испытание имеет крайний срок 40 дней
  2. То приложение, которое я когда-то написал, было просто таймером с переключателем
  3. я нахожусь на стажировке

Да, давайте просто перестраховаться. Я просто разработаю веб-версию с помощью React и назову ее мультиплатформенным приложением.

В то время я недавно нашел эту статью. и я, хотя я просто буду использовать его для этого проекта. CRA с TypeScript + React Router + React Snap + React Helmet и Tailwind для стилизации.

Вот как выглядит мой первый дизайн для клона Pinterest:

Для чего эта кнопка звонка? Почему он отображает только 2 изображения одновременно? Зачем кнопка назад? Его не будет на главной странице?

Не знаю, я просто имитирую дизайн мобильной версии приложения.

Почему? Я не знаю. Я чувствую себя глупо и изменил дизайн.

Теперь вы можете четко видеть, сколько там страниц. Кроме того, эта панель поиска теперь меньше. Кнопка звонка? удаленный.

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

Нет, я шучу. Но я там как-то напрягся. Какой смысл в мультиплатформенном приложении, если его можно использовать только на телефоне?

Итак, вот моя третья ревизия:

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

  1. Далее вместо предыдущего статического стека. Потому что проще настроить.
  2. Интерфейс Chakra вместо Tailwind. Потому что я не знаю, как создать хороший пользовательский опыт.

А еще мне нужно переписать приложение.

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

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

Домашняя страница.

Сначала я подумал, что в Chakra UI есть какая-то навигация. Но мальчик, я чертовски ошибался. Мне пришлось сделать свою собственную панель навигации, используя ее компонент Box. На самом деле мне просто нужно положить несколько иконок в коробку. Что в этом сложного?

Да, это было довольно просто, в основном потому, что я беззастенчиво украл дизайн с fireship.io.

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

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

Я не понял документацию. Вроде вообще. я вообще этого не понимаю.

Я хотел использовать Masonry Component, и вот что написано в Masonry docs:

Обзор

Измерение и планировка

Рендеринг происходит в два этапа:

Фаза 1: Измерение

На этом этапе используются оценочные размеры ячеек (предоставленные свойством cellMeasurerCache), чтобы определить, сколько ячеек нужно измерить в пакете. Размер пакета выбирается с использованием быстрого, наивного алгоритма компоновки, который укладывает изображения по порядку до тех пор, пока область просмотра не будет заполнена. После завершения измерения (componentDidMount или componentDidUpdate) этот компонент оценивает позиционированные ячейки, чтобы определить, требуется ли еще один проход измерения (например, если фактические размеры ячеек были меньше предполагаемых размеров). Все измерения постоянно кэшируются (с ключом keyMapper) для повышения производительности.

Фаза 2: Макет

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

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

Хм? Я думаю, мне нужно сначала изучить компонент списка, чтобы понять основы этого?

Список

Этот компонент отображает оконный список (строки) элементов. Он использует внутренний Grid для рендеринга строк, и все реквизиты передаются этому внутреннему Grid. Это означает, что List также принимает Grid props в дополнение к реквизитам, показанным ниже.

Типы объектов
(…)

Эээ… это про обзор?

Я просто прочитаю этот учебник. - Эрик Кристиан, 2020 г.

Хорошо, теперь я знаю, как составить список. Как это относится к масонству? Я не знаю.

Но все же, я попробовал. А в результате… ничего. Ничего не показало (к сожалению скриншот удалили). Мой мозг уже был перегрет там.

Пока не нашел эту библиотеку.

И АД ЭТО БЫЛ СПАСАТЕЛЬ.

Просто перечислите свой товар там, и бум. Это просто работает. (скриншота тоже нет)

Не совсем готово, но, думаю, я продолжу эту историю позже.

Вот что я узнал на данный момент:

  1. Я должен был просто использовать Flutter, потому что это просто вызов
  2. Я знаю, как использовать Next и React Virtualized (хотя и только основы)
  3. Я знаю, как развернуть приложение Next в Netlify
  4. Должен знать, как использовать CSS, если вы используете Tailwind

Что вы думаете, ребята?

В любом случае, спасибо за чтение. Ваше здоровье.