привет всем, меня зовут 132, сегодня я представляю вам резюме рефакторинга о приложении станции c
задний план
Из-за большого количества пользователей старой версии приложения c station платформа apicloud требует загрузки корпоративной сертификации, иначе приложение не будет обновляться.
Эта волна операций просто... Главный разработчик нашего приложения, @小香豆 и я,... студенты::>_<::>
Итак... старое приложение зависло
В то же время, в связи с долгой историей и развитием станции c, нам также необходимо подумать о рефакторинге приложения.
Технический отбор
Прежде чем написать приложение, мы подумали о технологиях, которые мы использовали, в основном о флаттере и реагировании нативных
Помимо того, что оба могут удовлетворить большинство бизнес-сценариев, оба имеют недостатки:
- флаттер не поддерживает m3u8 и нет надежного видеоплеера
- React native находится под Android, а размер пакета большой
Между тем, оба были недавно обновлены:
- реагировать на нативную загрузку 60.2 гермеса
- Flutter выпущен 1.12, Dart выпущен 2.7, улучшена производительность
Вышеупомянутые два аспекта моего обычного технического выбора: дефекты и основные обновления.
Подводя итог, в связи со срочным рефакторингом и ограниченной поддержкой m3u8 во флаттере, меня больше интересует производительность гермеса, и тогда я смогу переиспользовать большую часть кода мастер-станции c с помощью хуков
Итак, этот рефакторинг выбрал RN
P.S. Немного сожалею после написания, ха-ха, ха-ха
Начинать
После подтверждения технического выбора непосредственно начинается работа в следующих аспектах:
дизайн
На предыдущей картинке интуитивно мы сначала использовали цвет нашей темы — светло-фиолетовый, а затем весь дизайн следовал пути к простоте, без границ, без слишком большого количества иконок и стилей, что всегда было в моем стиле.
Поскольку я разработал его сам, я в основном рассматривал компоненты RN и реализацию кода, поэтому следующий код работает очень плавно.
react navigation 5.x
Есть большая яма, т.к. RN давно не используется, предыдущий навигатор устарел, рекомендуется использовать реактивную навигацию
Эта штука - воровская яма, официальный документ 4.x, но когда я ищу документ, результаты 4 и 5.
Поэтому я написал его с 4, из-за проблемы с мониторингом ключа возврата поддерживается только 5, поэтому мне пришлось переписать всю логику
Итак, давайте сделаем открытый исходный код, не смешивайте две версии вместе, хорошо?
Несколько моментов:
- Скрыть вкладку страницы воспроизведения и судить о состоянии по параметрам
<Tab.Screen name='Home' component={HomeScreen} options={({ route }) => {
return { tabBarVisible: route.state && route.state.index > 0 ? false : true }
}} />
- Перемотайте назад, чтобы обновить представление, прослушивая событие фокуса
navigation.addListener('focus', () => setState())
expo
Так как я компьютер с Windows, то он не очень дружелюбный, поэтому для удобства использую expo
Это также самый неправильный выбор на этот раз, потому что объем упаковки слишком велик.
Тут особо нечего сказать, экспо очень удобно, можно пользоваться сразу после подключения к симулятору
игрок
В качестве видеосайта плеер действительно имеет первостепенное значение.
Для этого я просто написал компонент плеера с небольшим количеством кода и хорошей производительностью.
Наверное вот так...
Конечно это всего лишь целесообразная мера.В дальнейшем требования к настройке плеера будут выше.На данный момент есть не решенная проблема,а именно скрыть виртуальные кнопки на весь экран,увы
- Стремитесь переписать снизу
- В полноэкранном режиме скрыть виртуальные клавиши
- В будущем из ядра RN будут удалены многие компоненты, такие как Slider, а плеер может быть переписан.
Бизнес-код
Поскольку он полностью переписан, на бизнес-код не ложится историческая нагрузка.
- Все используют реагирующие хуки
Да, вы правильно прочитали, это одна из причин, почему я выбираю RN, потому что он может повторно использовать 40% кода мастер-станции, который написан fre
- Используйте новейшие технологии
Что ж, после одного или двух лет разработки, текущий технологический стек изменился более или менее. Например, с выборкой, Axios больше не требуется.
нерешенные вопросы
- Размер упаковки слишком большой
Поскольку RN поставляется с jscore и expo sdk, пакет по умолчанию будет очень большим, поэтому для улучшения может потребоваться подождать, пока RN упростит ядро.
- Невозможно скрыть виртуальные клавиши в полноэкранном режиме
RN использует StatusBar по умолчанию для управления строкой состояния, но нет компонента для управления виртуальной панелью кнопок, что отчаянно
Если вы знаете, как, пожалуйста, дайте мне знать, спасибо большое!
Суммировать
После этой реконструкции приложение станции c было окончательно заменено на архитектуру новейшего стека технологий, и приложение, наконец, может возобновить итерацию.
Но к сожалению гермес не используется, потрачу время на изучение в будущем
Сожалеть
Скажи что-нибудь немного с сожалением, то есть не выбрал флаттер
Из-за всего рефакторинга я чувствую, что вся работа находится в моей [зоне комфорта], даже если я давно не писал RN, я не сталкивался с большими ямами, и весь рефакторинг проходит очень гладко.
Это также привело к небольшому прорыву и выходу
Теперь жалею, что не воспользовался флаттером, может, заставлю себя, могу написать плеер или что-то в этом роде
Однако будущее далеко, и нет приложения, которое не нуждается в рефакторинге.
Следующий рефакторинг может решительно отказаться от RN, хахахаха
Открытый исходный код
Весь код станции c является открытым исходным кодом, адрес с открытым исходным кодом:github.com/cliclitv
Адрес открытого кода проекта РН:GitHub.com/ProcessingTV/cl…
Адрес проекта флаттера с открытым исходным кодом (@江河):GitHub.com/HandleHandleTV/В дополнение к…
Адрес старой версии в открытом доступе (@bean curd):GitHub.com/HandleHandleTV/В дополнение к…
Добро пожаловать в звезду и пр!
Наконец-то поставил QR-код
последнее обновление
- Удалить выставку
Поскольку файл пакета слишком велик, удалите первые 49 М, удалите 10 М и одновременно откройте Hermes.
Но все плагины были переписаны снова, у-у-у-у