существуетПредыдущийВ статье уже было представлено содержимое большого интерфейса об управлении состоянием, компонентах пользовательского интерфейса, апплетах, кроссплатформенных слоях и слоях фреймворка. В этой статье я продолжу знакомить вас с языками программирования, инжинирингом, мониторингом, тестированием и серверами, а также с нетерпением жду частей, на которых можно сосредоточиться во второй половине года.
Основываясь на личном и командном опыте, подготовьте техническое резюме за первую половину 2019 года и разделите различные технические фреймворки/языки/инструменты на два измерения:
- Жизненный цикл внедрения технологии
- Техническое направление
Язык программирования
В настоящее время основной язык программирования уже является комбинацией ES6/7+Babel.После использования ES6/7 практически невозможно вернуться к исходной эпохе ES5.Появилась концепция классов и модулей для облегчения модульной загрузки JS-код — своеобразный синтаксический сахар для счастливого полета. Синтаксис асинхронного ожидания также заменяет метод написания обещания, делая логику кода более лаконичной. Спецификация ES все еще находится в стадии быстрой итерации, и каждый год выпускается обновленная версия, в которой представлены многие языковые функции.В то же время, с благословения Babel, новую грамматику можно перевести в версию ES5 для запуска в браузере.
существует2019 stateofcssЕсть также статистика использования функций CSS.Внешний круг каждой функции представляет количество услышанных, а внутренний круг представляет количество фактически использованных.
На самом деле охват использования функций CSS во многом зависит от степени поддержки браузера: чем лучше браузер поддерживает, тем легче добиться более высоких коэффициентов использования. Видно, что некоторые часто используемые функции CSS очень хорошо поддерживаются браузерами.За исключением Opera Mini и небольшого количества IE11, другие основные браузеры могут поддерживать их на отлично.
Интересным явлением является то, что уровень использования Flexbox выше, чем у Grid с точки зрения макета.Возможная причина в том, что Flexbox лучше поддерживает браузеры более низких версий, но на самом деле нет никакой разницы в поддержке текущих основные браузеры. Еще одним фактором может быть то, что React Native также рекомендует использовать для верстки Flexbox, который имеет большую массовую базу.
CSS in JSИдея должна исходить от React Native, которая при первом контакте была довольно подрывной, соответствующие CSS-определения были прописаны прямо в JS-файлах, что довело сплоченность компонентов до предела и решило проблему глобального CSS. загрязнение. Во внешнем интерфейсе веба есть много способов реализовать css в js, но это все еще относительно рано.Традиционные фреймворки предварительной обработки CSS Less и Sass смогли хорошо решить некоторые проблемы, и они также находятся в одном и том же вытекает из привычек программирования, поэтому концепция css в js хороша, но для ее популяризации потребуется время.
CSS HoudiniВыдвинули беспрецедентную идею: открыть CSS API для разработчиков, разработчики могут самостоятельно расширять CSS через этот интерфейс и предоставлять соответствующие инструменты, позволяющие разработчикам вмешиваться в процесс стиля и компоновки движка рендеринга браузера. Проще говоря, Houdini позволяет каждому писать полифиллы CSS, чтобы значительно повысить скорость внедрения новых функций CSS. Но по иронии судьбы, он также нуждается в поддержке браузеров.Стандарт w3c все еще находится в рабочем проекте, и большинство браузеров еще не поддерживают его должным образом.Вы можете с нетерпением ждать его~
Инжиниринг
Когда дело доходит до разработки, сначала сфотографируйте городское здание, которым поделилась команда прямой трансляции Tencent. Многие мелкие партнеры будут узко думать, что разработка — это просто упаковка с помощью webpack или gulp. На самом деле это должно охватывать создание проекта, разработку, компиляция, упаковка, тестирование., релиз и мониторинг всего процесса.
Инициализация проектаСкаффолдинг проектов сейчас очень распространен, например, create-react-app или vue-cli являются официальными стандартными инструментами скаффолдинга. Некоторым крупным компаниям рекомендуется упаковать набор собственных шаблонов, что может привести к внедрению многих лучших практик, таких как структура каталогов проекта, конфигурация lint, конфигурация мониторинга, конфигурация управления и т. д. Таким образом, шаблоны необходимы для стандартизации интерфейсная архитектура.кольцо.
местное развитие lintСпецификация должна быть реализована в начале проекта, вы можете напрямую взять спецификацию airbnb или настроить ее. Lint может значительно улучшить качество кода, по крайней мере, с точки зрения стиля кода для обеспечения единообразия.SonarВведение кода может дополнительно улучшить качество кода, помочь проанализировать возможные проблемы, а также проанализировать частоту повторения кода, слишком длинные высокие числа и т. д. Это так называемые неприятные запахи кода. разработать, стоимость обслуживания проекта будет прямой рост.MockНеобходимость инструментов может быть полностью осознана во время совместной отладки внешнего и внутреннего интерфейса.Во многих случаях процесс совместной отладки представляет собой процесс споров из-за нечеткого определения интерфейсов внешнего и внутреннего интерфейса.Если есть отсутствие фиктивных инструментов, внешний интерфейс также станет триггером для отладки внутреннего интерфейса. Нажмите на страницу внешнего интерфейса, и отладка внутреннего интерфейса займет много времени. друзья не могут позволить себе причинить боль. Мок-инструменты должны, по крайней мере, иметь определение интерфейса и возможности локального имитации, что может значительно улучшить ваш опыт исследований и разработок.
БэйлНастоятельно рекомендуется использовать интерфейсные инженерные инструменты упаковки.webpack 4, мощный подключаемый модуль позволяет делать практически все что угодно. Webpack4 представляет более мощную и интеллектуальную возможность разделения кода, которая может значительно уменьшить размер пакета.После практики уменьшение обычно составляет 30–50%, а скорость упаковки также значительно повышается, обычно на 30%.
монитор
Когда босс присылает вам скриншот онлайн проблемы, вы не можете воспроизвести его локально, и у вас недостаточно логов.Вы в это время в депрессии, а лодка, которой доверяет босс, переворачивается.
Мониторинг делится на несколько этапов по возможностям: Первый этап: возможности эксплуатации и обслуживания оборудования, такие как работа сервера, ЦП, память, диск, сеть и т. д., могут быстро реагировать в случае расширения машины. Второй этап: мониторинг сервисов приложений, таких как доступность сервиса, мониторинг аномального трафика, время отклика интерфейса страницы, сбой приложения и т. д. Третий этап: мониторинг основных бизнес-показателей, таких как годовое сравнение данных по основным бизнес-связям и т. д. Четвертый этап: мониторинг данных всей ссылки, от клиента, внешнего интерфейса до уровня обслуживания, до уровня данных, может быть подключен последовательно через уникальный идентификатор, который может легко отслеживать операции пользователя и воспроизводить проблемную сцену. .
Очевидно, что для контроля за этими четырьмя этапами требуется обширная инфраструктура, и часто крупные заводы имеют полный комплект колес. Для небольших команд использование решений с открытым исходным кодом может быстро дополнить возможности.
CatЭто отраслевое решение для мониторинга совести с открытым исходным кодом от Meituan. Оно имеет хорошие возможности мониторинга для передней и задней частей, а также завершен сбор данных. Оно может предоставлять индикаторы производительности в реальном времени, состояние здоровья, сигналы тревоги в реальном времени и другие. данных. Это также практикуется во многих интернет-компаниях. Это необходимый инструмент для спасения волос кодера, вы это заслужили ~
umengКак инструмент анализа мобильного поведения, он широко используется, но пользовательские данные очень важны для крупных производителей.Если у вас есть возможность, рекомендуется разработать свой собственный.В конце концов, данные о поведении пользователей являются основным активом, и вы может в будущем на основе этих данных дать рекомендации и анализ.Ждите чего-то стоящего.
lighthouse/perf curve/perf budgetЭто инструменты для мониторинга производительности, позволяющие не только получать реальные данные об онлайн-среде, но и заранее предупреждать о проблемах с производительностью на этапе разработки и внедрять лучшие практики для оптимизации производительности.Они также являются незаменимым хорошим партнером для небольших партнеров~
контрольная работа
Обычно это относится к автоматизированному тестированию, а не к ручному тестированию.По охвату тестов его можно разделить на модульное тестирование, тестирование пользовательского интерфейса, тестирование интерфейса и функциональное автоматизированное тестирование. Почти ни одна из компаний или команд, с которыми я сталкивался, не может хорошо проводить автоматизированное тестирование.Частое изменение времени и требований часто является самой большой отговоркой, но программисты неохотно пишут тест-кейсы в душе (вручную закрывают лицо).
С точки зрения сложности посадки лучше всего реализовать тестирование интерфейса и модульное тестирование, не говоря уже о том, что сложность интерфейса невелика, а преимущества неплохие, в основном нужно иметь некоторые требования к подготовке данных. Сначала модульное тестированиеJest, и коэффициент покрытия можно рассчитать одновременно, но модульный тест должен уточнять область тестирования, а общая бизнес-логика и лежащий в основе общий метод более подходят. Поэтому очень важно отделить код бизнес-логики от кода уровня пользовательского интерфейса.В настоящее время фреймворки управления состоянием, такие как redux, имеют естественные преимущества, а части редьюсера и действия могут быть покрыты одним тестом.
Тестирование пользовательского интерфейса обычно полезно для библиотек компонентов.Простым способом является сравнение DOM с помощью снимка, что является простым и грубым. Автоматизация функций реализуется редко, и среди них appium или selenium.Это зависит от ситуации в бизнесе.Если есть частые изменения страниц, то автоматизацию функции легко написать в начале, а стоимость последующего обслуживания поражает.Кроме того , из-за плохого времени охвата функций все еще требуется много ручного тестирования.
Сервер
С момента появления Node фронтенд-технологии официально вошли в серверную разработку, так что фронтенд-партнеры могут разрабатывать полные стеки, объем технологического стека стал больше, а возможность контролировать бизнес стала сильнее.
Узел может принести несколько очевидныхвыгодаВо-первых, его можно использовать как слой BFF (Backend for Frontend) для решения проблемы частой смены интерфейсов front-end и back-end, можно реализовать более гибкие интерфейсы, фильтрацию полей интерфейса, агрегацию интерфейсов и т. д. через слой BFF. Во-вторых, его можно использовать как SSR (рендеринг на стороне сервера).Благодаря изоморфизму слоя Node код внешнего интерфейса может быть размещен на стороне сервера для реализации рендеринга на стороне сервера первого экрана и улучшения рендеринга. время первого экрана. В-третьих, согласно закону «До тех пор, пока это можно реализовать с помощью JS, в конце концов это будет реализовано с помощью JS», Node позволяет студентам, изучающим интерфейс, использовать JS для написания внутреннего кода.Это ощущение контроля над всем. это так круто~
У узла также есть некоторыенедостатокВо-первых, требуется дополнительный сервер.Во многих сценариях уровень Node выполняет только работу по прозрачной передаче интерфейса, что является пустой тратой для сервера, и как основной узел, как только все приложение будет приостановлено, он не будет быть доступным. Во-вторых, необходимо иметь полный набор возможностей для упаковки, развертывания, мониторинга и т. д. для сервисов Node. Это выдвигает более высокие требования к возможностям эксплуатации и обслуживания для фронтенд-студентов, что часто делает фронтенд-студентов несчастными.
В последнее время серверная сторона может по-прежнему уделять внимание GraphQL/Serverless, Эти две технологии окажут глубокое влияние на дизайн архитектуры интерфейса и сервера.
Прогноз на вторую половину 2019 года.
Новое изобретение мидл- и бэк-офисаПринимая во внимание характеристики среднего и внутреннего бизнеса, отсутствие подробного дизайна взаимодействия, отсутствие достаточных внешних ресурсов и относительно одинаковые стили страниц, отрасль предлагает создавать средние и внутренние интерфейсные системы с небольшое количество кода или отсутствие кода. Некоторые современные передовые практики: Fusion Design, Flying Ice, Ant Design Pro. Все работают в нескольких направлениях, чтобы реализовать отказ от кодирования промежуточных и внутренних интерфейсных систем.Ant Design Pro предоставляет полный набор средних и внутренних фреймворков веб-сайтов и шаблонов страниц на основе Ant Design, что очень удобно. полезно для быстрого строительства. Fusion Design и Feibing напрямую экспортируют соответствующий код страницы из документа эскиза, открывая ссылки на дизайн и кодирование, что также значительно снижает нагрузку на кодовую страницу учащихся переднего плана.
Кроссплатформенное решение FlutterВ качестве кросс-мультитерминала (iOS, Android, ПК, Embedded) Flutter имеетКрасивый, быстрый, эффективный, открытыйВ настоящее время есть сценарии посадки в компаниях Xianyu, Shell, Ali и других. Как кроссплатформенное решение следующего поколения, мы можем продолжать уделять ему внимание. У него очень большие амбиции, и его поддерживает Google. стоит ожидать в долгосрочной перспективе, выравнивая различия на всех концах и имея сильную техническую базу для его поддержки.
-
Создать сервис: Видно, что вся строительная служба имеет большое количество сценариев, будь то в середине и за кулисами, весь беспроводной терминал и терминал ПК.Такое большое количество сценариев необходимо стандартизировать всю структуру.Я надеюсь чтобы стандартизировать компоненты, компоненты и модули в нем.Служба может обслуживать все сегодня, будь то середина и фон, или страница C-side, я надеюсь, что такая система - служба стандартизированным образом, чтобы открыть всей системы, поэтому важнейшим для будущего направлением считается строительное обслуживание.
-
Serverless: это может приблизить внешний интерфейс к бизнесу и позволить использовать больше возможностей. Переключить интерфейс на Node-систему — большая проблема, но когда дело доходит до Serverless, нам не нужно обращать внимание на развертывание, эксплуатацию и обслуживание, все DevOps и состояние базовой базы данных. система делает еще один шаг вперед, как интерфейсные и серверные слои.
-
Разумный: Потому что, когда придет ИИ, сможем ли мы перейти от Дизайна к Коду? Сегодня передняя часть каждой компании имеет большое количество дизайнов и большое количество исходных кодов.Мы проводим машинное обучение с помощью большого количества эскизов проектов и оригинальных кодов, чтобы можно было изучить макет в середине, и Компоненты в середине можно изучить. Я верю, что D2C сможет решить проблему внешнего интерфейса в будущем. Узкое место в производительности освобождает передний конец от сегодняшнего большого количества низкоуровневой разработки и ручной работы, а также переводов свою энергию для всестороннего участия и прорывов во многих областях.
-
IDE: Сегодня внешний интерфейс Али называется средней платформой проекта.Промежуточная платформа проекта обеспечивает управление и контроль внешнего кода от отправки до выпуска, конечно, включая компиляцию, построение, обнаружение и выпуск всего код после промежуточной отправки. Но во фронт-офисе у каждой команды есть инструмент, и этот инструмент фрагментирован между командами и не может использоваться повторно. Поскольку разработка не только передается в релиз, фронтенд-инжиниринг должен начинаться от кодирования до релиза, он должен быть полной связью и полным шаблоном.
Стандартизация переднего стека технологийОт разработки фронтенда до современности весь стек технологий пока находится на стадии расцвета, но компаниям или командам необходимо постепенно переходить из эпохи грубой в эпоху регулярной армии, что требует принятия мер по стандартизации стека технологий. Например, для фронтенд-команды примерно из 10 человек, если три основных фронтенд-фреймворка сосуществуют, то технология осаждения и повторное использование кода исключены. Поэтому для фронтенд-команды очень важен стандартизированный стек технологий, требующий унифицированных скаффолдинга, конфигурации lint, mock-инструментов, языков программирования, фреймворков, мониторинга и многого другого.
напиши в конце
Технология большого фронтенда очень сложна, из-за ограниченной энергии отдельных людей и команд всегда остается много недоработок, которые нужно дополнять за счет друзей. Жизненный цикл принятия каждой технологии также ограничен личным опытом, и всегда есть некоторые разногласия, я могу только попытаться быть относительно разумным.
Помещение различных технологий в разные жизненные циклы не имеет целью обесценить ту или иную технологию, напротив, возможность появления в цикле отстающих часто означает, что эта технология была крещена временем и проверена в течение длительного времени. Просто в эпоху всегда есть основная технология. Это краткое изложение надеется, что каждый может постоянно анализировать и анализировать текущий стек технологий. Сохранение его в основной отрасли очень полезно для поддержки будущих проектов и привлечения талантов.
Независимо от того, какая технология однажды устареет, как фермер, работающий с кодом, вы должны продолжать изучать не только практику методов, чтобы оставаться на использовании различных технологий, но и развивать множество аспектов, чтобы быть в состоянии отложить в сторону поверхность техники, увидеть за ней принцип и суть решения проблемы.
Заинтересованные студенты могут подписаться на публичный аккаунт WeChat.папа фермер, время от времени делитесь информацией об инвестициях, управлении активами и ИТ: