В мгновение ока прошло больше половины 2019. Как в начале года были завершены флажки, установленные друзьями, поклявшимися освоить новые навыки? В 2019 году изменения в области крупных интерфейсных технологий не слишком велики.В настоящее время три основных технических фреймворка становятся все более и более зрелыми, и маловероятно, что в ближайшее время появится подрывной интерфейсный фреймворк. срок (внутренняя ОС: не выучишься, если выберешься).
В этой статье представлен технический обзор первой половины 2019 года, основанный на личном и командном опыте, и разделены различные технические фреймворки/языки/инструменты на два измерения:
Жизненный цикл внедрения технологии
- Новаторы: технологические авантюристы, впервые пробующие новые технологии.
- Ранние последователи: первые последователи технологии, с определенным духом исследования, лидеры общественного мнения в определенной области.
- Раннее большинство: ранние массовые пользователи технологий, вдумчивые, часто применяющие относительно зрелые технологии.
- Позднее большинство: обычные люди, владеющие технологиями, следуют тренду и перенимают текущие основные технологии.
- Отстающие: Отстающие в технологиях, давно не обновляют стек технологий, много технического долга
Техническое направлениеВ соответствии с большой диаграммой технической архитектуры внешнего интерфейса, он примерно разделен на: управление состоянием, компоненты пользовательского интерфейса, апплет, кроссплатформенность, уровень инфраструктуры, язык программирования, проектирование, мониторинг, тестирование и сервер.
государственное управление
С ростом популярности интерфейсных сред, таких как React и Vue, разработка на основе компонентов стала мейнстримом.Однако с ростом сложности страниц в файле компонента должны быть реализованы рендеринг пользовательского интерфейса, обработка событий, управление состоянием и т. д. сделано, поэтому файл становится все более и более сложным. В то же время, после усложнения уровня компонента страницы, обмен данными между компонентами также становится очень громоздким, необходимо отсылать данные к родительскому узлу, передавать данные через свойство и обновлять статус родительского узла через метод обратного вызова.
Facebook первым предложилFluxПлатформа вводит режим программирования одностороннего потока данных, отделяет действие и хранилище от представления и значительно оптимизирует исходную архитектуру управления состоянием.
Redux=Flux+Reducer, Благодаря уникальности Store и чистой функции Reducer состояние данных предсказуемо, поэтому появилось множество средств отладки на основе механизма TimeMachine, что значительно повышает эффективность R&D и отладки. Однако из-за чисто функциональной природы Reducer необходимо ввести промежуточное программное обеспечение для побочных эффектов некоторых асинхронных запросов, что приводит к определенной сложности.
VuexКак лучший выбор для управления состоянием фреймворка Vue, основная идея находится в том же направлении, что и Flux/Redux, ослабляя концепцию Reducer и вместо этого используя Mutations, что упрощает понимание всего фреймворка.
MobxЭто очень легкая структура управления состоянием. Она вводит наблюдаемое состояние и вычисляемое значение, что значительно упрощает способ изменения состояния. По сравнению с Redux, она сокращает объем шаблонного кода и проста в использовании. Однако из-за отсутствия например, Redux. Обязательная спецификация требует необходимых ограничений в использовании.
dvaЭто структура управления состоянием данных, разработанная Ant Financial, dva=React+Redux+Saga, которая значительно упрощает программирование с помощью соглашений и заслуживает постоянного внимания.
Управление состоянием не обязательно для каждого внешнего приложения. Оно должно определяться исходя из его собственной бизнес-сложности. Его можно рассматривать только тогда, когда бизнес-логика имеет определенную сложность и ее необходимо отделить от каждого модуля. Если Todo использует Redux , я сомневаюсь, что ты хвастаешься ~
Компоненты пользовательского интерфейса
Когда три front-end фреймворка еще не объединили реки и озера, библиотеками компонентов являются Dojo, Bootstrap, Extjs и так далее. С момента появления React компонентизация стала стандартным режимом разработки интерфейса, и появились две основные библиотеки компонентов пользовательского интерфейса: Ant Design на основе React и ElementUI на основе Vue.
Как две зрелые библиотеки компонентов пользовательского интерфейса, если ваша система относится к среднему и внутреннему бизнесу, а требования к настройке пользовательского интерфейса не такие строгие, то эти две должны быть лучшим выбором.Между двумя нет большой разницы в функциях. , Основные элементы управления пользовательским интерфейсом, многоязычность, настройка темы и т. Д., Что вы хотите, единственный риск заключается в том, что Рождество принесет вам снежное яйцо (предупреждение о высоком риске на правительственном веб-сайте).
Библиотека компонентов пользовательского интерфейса может продолжать уделять внимание веб-компонентам, ведь это браузер Chrome, при поддержке Google, а теперь React/Vue все больше становится похожим на веб-компоненты? Кроме того, визуализация внешних данных и 3D-визуализация также являются хорошим направлением.
Апплеты
В 2019 году в маленьких программах расцвели сотни цветов, а крупные суперприложения запустили свои маленькие программные приложения.Фронтендерам приходится поддерживать множество маленьких программ, и их волосы стали реже (эм... я сделал солидный прогресс от старшего этапа НИОКР). Существует множество способов реализации мини-программ, и вам нужно выбирать в соответствии с собственными бизнес-сценариями. Вариант 1, оригинальный метод разработки небольших программ, в основном разработка небольших программ на WeChat, а затем перенос их на другие платформы с небольшим объемом модификации (рабочая нагрузка не оценивалась, но поскольку демоверсии апплета Alipay все копировали WeChat, я чувствую, что должно быть Не так много~) Вариант 2, встроенный метод разработки H5, естественный мультиплатформенный и кросс-энд, но будет некоторая потеря производительности и некоторые функциональные ограничения.Например, уведомления о сообщениях в WeChat не могут быть отправлены через H5. Вариант третий: mpvue — это метод разработки, основанный на определенной структуре, mpvue основан на структуре vue для разработки небольших программ, кривая обучения для студентов, знакомых с vue, очень низкая, и он также может обеспечить повторное использование логики кода. Вариант 4: кросс-мультитерминальная реализация Taro поддерживает однократное написание кода с помощью метода разработки React для создания приложений, которые могут работать в WeChat/Baidu/Alipay/ByteDance/QQ Mini Programs, Quick Apps, H5, React Native и т. д. Это больше подходит для сценариев, в которых функция должна удовлетворять несколько приложений апплета одновременно.
Кроссплатформенность
Цзиньтао поделился на Qcon -Динамичная практика мобильного терминала MeituanВ нем обобщается кроссплатформенная и динамичная практика отрасли и Meituan в мобильном терминале.Видно, что компания провела многомерное исследование и инвестировала в кроссплатформенную и динамичную деятельность, которые можно применять к различным формам бизнеса. .
Так как у мобильного терминала две платформы: iOS и Android, а также оригинальный веб-терминал H5, то самым оживленным местом во фронтенде за последние годы стала кроссплатформенность, ведь никто не готов менять одну функцию на три Началась борьба между пользовательским опытом и опытом НИОКР, и крупные производители продемонстрировали свои волшебные способности.
Появились самые ранние реализации на основе WebView, такие как Phonegap.Благодаря естественной кроссплатформенности WebView проблема уровня отображения была хорошо решена, а затем связь между WebView и Native была открыта через jsBridge, так что H5 код в браузере также может иметь собственные возможности. Таким образом, опыт разработки будет лучшим, а пользовательский опыт — худшим.
Затем есть React Native, Weex и Picasso, которые основаны на Virtual Dom или языке шаблонов, пишут пользовательский интерфейс с помощью кода js, а затем визуализируют их в нативные компоненты, что идеально обеспечивает баланс между пользовательским опытом и опытом исследований и разработок. Тем не менее, чтобы использовать эти фреймворки хорошо, вам все равно нужны относительно высокие требования к оптимизации производительности, сглаживанию различий и инженерии.Небольшие команды и небольшие компании должны использовать их с осторожностью, иначе легко попасть в яму и выйти из нее. .
Большим хитом этого года является Flutter, за которым можно следить постоянно.Отличная техническая архитектура, огромные амбиции и стремление объединить реки и озера.
Кроссплатформенность живая уже много лет и лично я считаю что нынешние решения все компромиссы.С постепенной оптимизацией производительности мобильных телефонов и расширением возможностей нативных браузеров может все вернутся к истокам и встанут на путь Н5.
слой кадра
В первой половине года уровень фреймворка не сильно изменился, и он по-прежнему контролируется тремя интерфейсными фреймворками: React, Vue и Angular. С точки зрения командного использования, React и Vue по-прежнему являются мейнстримом, а Angular, похоже, постепенно становится менее популярным, возможно, его слишком сложно изучить (вручную закрой лицо).
React 16.x был выпущен в первой половине года, и было представлено много новых функций, таких как хуки, ленивость, приостановка и т. д. Если вы изучаете стек технологий React, вам предлагается попробовать его на первый раз. Крючки все еще нуждаются в большей практике.Общая концепция реализации сильно отличается от исходного метода класса.Студентам, которые привыкли к исходному методу написания жизненного цикла, все еще нужно адаптироваться.
Vue 3.x было трудно создать до сих пор.Согласно дорожной карте 3.0, будет много обновлений, таких как переписывание виртуального дома, фреймворк будет меньше и быстрее, полный охват TypeScript, использование Proxy для реализации механизмов обнаружения и так далее. Призывая вас обновляться быстро, одноклассники Vue ненавидят это, и KPI во втором полугодии рассчитывает на это~
В последнее время Angular не уделялось особого внимания, но Angular — это настоящий MVVM-фреймворк, не более, чем React или Vue, на самом деле это View-фреймворк, так что это большой и всеобъемлющий фреймворк. Но команда ожидает, что стек технологий будет конвергентным, поэтому в этой области не так много инвестиций.
На уровне фреймворка вы можете продолжать уделять внимание PWA и WebAssembly.PWA очень полезен для улучшения взаимодействия с пользователем в слабых сетевых средах, а также может использоваться в качестве технической фреймворка для настольных приложений. WebAssembly может значительно улучшить производительность высокоплотных вычислений во внешнем интерфейсе, но сценарии приложений ограничены.
Я уже много написал, и всем очень тяжело это читать, остальную часть дополню в следующей статье. Из-за ограниченности личной энергии и в сочетании с текущей ситуацией в команде должно быть много недостатков, и друзья могут добавить.
Заинтересованные студенты могут подписаться на публичный аккаунт WeChat.папа фермер, время от времени делитесь информацией об инвестициях, управлении активами и ИТ:
Время рекламы: Shanghai Meituan Dianping набирает на работу старших/экспертных инженеров. Вы можете присоединиться. Вы можете отправить электронное письмо по адресу wangdan53[AT]meituan.com.