Эта статья написана
GitChatДля авторизованной пересылки, перепечатки необходимо связаться с GitChat.Оригинальная ссылка
автор этой статьи: Мэйтуан Дяньпин Ху Чэнцюань
предисловие
С момента запуска Мини-Программы уже больше года, это оказало огромное влияние на фронтенд-разработку.Там, где есть мобильные приложения, есть и следы Мини-Программ. После более чем года разработки и осаждения возможности небольших программ постоянно высвобождаются, а форма продукта становится все более и более зрелой.Он превратился в независимую систему технологий разработки терминалов, которая, кажется, формирует сильную тенденцию с H5 и родной. Но в то же время сообщество Мини-программы недостаточно активно, а техническая система и решения Мини-программы относительно слабы. Таким образом, среда, дружественная к разработчикам, способная работать со сложными сценариями приложений и хорошо сочетающаяся с существующими интерфейсными технологиями, безусловно, принесет большую пользу сообществу апплетов. mpvue является такой средой для разработки апплетов.
что такое мпвуе
mpvue — это интерфейсная среда для разработки небольших программ и крупномасштабной разработки. Она ловко интегрирует популярную интерфейсную среду Vue.js в апплет, чтобы разработчики могли в полной мере использовать возможности Vue.js во время разработки апплета. Кроме того, mpvue предоставляет разработчикам полное техническое решение и инфраструктуру Vue.js в рамках проекта быстрого запуска.
Откуда берется mpvue?
mpvue — это технологический проект Meituan Dianping с открытым исходным кодом, который в настоящее время занимает первое место среди всех проектов Meituan Dianping с открытым исходным кодом и поддерживается специальной командой. Перед завершением mpvue мы прошли через ранние проблемы разработки апплета: невозможность повторного использования существующего кода веб-интерфейса, невозможность поддержки разработки компонентов, невозможность поддержки внешних зависимостей npm, высокая стоимость обучения... С апплетом как бизнесом продолжает расти, эффект масштаба проблем продолжает увеличиваться, а необходимые технические решения становятся все более очевидными: стек интерфейсных технологий плавно переносится, код на обоих концах используется повторно, предоставляется возможность компонентизации для адаптации к большим масштабные возможности разработки, а автоматизированное строительство повышает эффективность разработки.
стадия разработки mpvue
Формирование финальной программы MPVUUE пережила три фазы.
- Первый этап: мы планируем внедрить инструмент преобразования кода, который может быстро преобразовывать HTML в код апплета для повторного использования внешнего кода. Однако из-за ограниченного позиционирования возможностей инструмента повышение эффективности принесло только сцену преобразования существующего кода.
- Второй этап: На основе инженерной идеи, ориентируясь на повышение эффективности, мы разработали механизм компонентизации кода. Выбор прост: на основе существующего стека технологий, ссылаясь на Vue.js, кодирование реализует формат однофайловой группы версии апплета. Мы решили ряд проблем, таких как пространство имен компонентов и синхронизация данных, но не можем поддерживать сложные сценарии приложений, и улучшения ограничены. А поддержка дополнительных функций синтаксиса Vue.js сделает рабочую нагрузку разработки чрезвычайно большой и неустойчивой.
- Третий этап: Планируется кардинально решить оставшиеся проблемы второго этапа и реализовать полную поддержку синтаксиса Vue.js. После нескольких исследований он, наконец, был завершен введением и преобразованием среды выполнения Vue.js. После постоянной оптимизации и многократной практики в бизнесе способность и эффект были окончательно проверены.
Основные возможности mpvue
Прежде всего, mpvue напрямую поддерживает синтаксис Vue.js, который существенно отличается от «поддержки синтаксиса, подобного Vue.js». В настоящее время фреймворк поддерживает более 90% синтаксиса Vue.js. Поэтому мы можем перевести пакет технических решений, включенных в фреймворк Vue.js.Как и вся инфраструктура mpvue, это основная возможность и преимущество mpvue.
Во-вторых, возможности разработки компонентов mpvue. Студенты, разрабатывавшие небольшие программы, должны понимать, что извлечение нативных публичных компонентов нужно разбивать на три файла и ссылаться в разных записях, что крайне неудобно в использовании, а mpvue их инкапсулирует просто и легко.
Для построения интеграции позиционирование структуры апплета представляет собой простую структуру логического представления.В начале недостаточно внимания для сложных сценариев.По мере увеличения масштаба приложения и усложнения бизнеса необходимо выполнить много работы делается вручную для достижения автоматического построения и интеграции, и mpvue Этот набор возможностей предоставляется напрямую.
Вышеупомянутые возможности нельзя получить через собственный фреймворк апплета, но их можно получить напрямую с помощью mpvue.
продолжение mpvue с открытым исходным кодом
После того, как mpvue был использован во многих внутренних проектах, 8 марта он был официально открыт. В официальном отчете о технологии Meituan Dianping была опубликована статья, в которой рассказывается о тонкостях всего mpvue. В течение этого периода он также привлек большое внимание, испытания и практику со стороны сообщества, и некоторые статьи были размещены на некоторых технических сайтах или в блогах.
На данный момент количество запусков mpvue на GitHub превысило 8000, количество проблем превысило 324, а 259 были решены с коэффициентом разрешения 80%. В сообществе npm есть 26 сопутствующих решений, из которых более 20 предоставлено сообществом, кроме того, мы организовали пять групп общения WeChat для обсуждения ежедневных технических вопросов.
сценарии использования mpvue
Каждый будет интересоваться сценариями использования mpvue, Мы суммируем их, которые в основном делятся на две категории:
- Используйте небольшую собственную программу или стороннюю платформу, чтобы использовать интегрированный MPVue для разработки приращения после определенного этапа.
- При разработке с нуля используйте mpvue напрямую для новой разработки.
Для этих сценариев mpvue предлагает специальные решения. Чтобы использовать mpvue с нуля, вы можете напрямую создать среду проекта mpvue через официальную документацию. Для поэтапной разработки с использованием mpvue мы предоставляем облегченный инструмент построения mpvuesimple, который может создавать отдельные страницы или интегрировать построение в существующие решения.
идеи дизайна mpvue
Позиционирование апплета представляет собой простую структуру уровня логического представления, и структура делит код на две части: логику и представление. Код части представления — это стиль и шаблон, а логическая часть — код js. Во время выполнения апплет загружает весь код одновременно, а затем анализирует и выполняет его. Каждая страница отображается в отдельном окне веб-просмотра, а весь логический код выполняется в движке js. Движок js отвечает за взаимодействие с известными окнами, поддержание модели данных и реагирование на события.
Для mpvue необходимо запустить код спецификации синтаксиса Vue.js в движке JS Конкретный метод реализации — представить SDK mpvue. В рабочей среде апплета есть как объект апплета, так и объект vue. mpvue реализует связь между двумя объектами через прокси-сервер событий, открытие жизненного цикла и синхронизацию данных.
Основная работа mpvue отражается в трех аспектах: на этапе разработки проект быстро собирается с помощью инструментов командной строки; этап построения кода отвечает за компиляцию и преобразование кода в целевой код апплета; выполнение кода Этап отвечает за управление апплетом, поддерживая объект программы Vue.js.
Придумать идею использования синтаксиса Vue.js, подкрепленную введением среды выполнения Vue.js, несложно.Написать демонстрацию, чтобы проверить ее выполнимость, гораздо сложнее, но самая сложная часть конкретной реализации. На наш взгляд, трудности и основные возможности mpvue в основном отражаются в следующих трех аспектах:
- Возможность компиляции кода на этапе сборки, то есть код слоя представления шаблона Vue компилируется в версию апплета. Наш дизайн таков: Vue.js поддерживает полный набор кода уровня логического представления, кроме того, набор кода слоя представления создается отдельно для апплета для генерации представления апплета. Сложность здесь в том, что код встроенного шаблона апплета должен иметь некоторые специфические возможности, которые будут подробно рассмотрены ниже.
- Связь с двумя экземплярами и совместимость жизненного цикла во время выполнения. Экземпляр Mini Program Page и экземпляр Vue необходимо заранее связать в среде выполнения Vue.js. Конкретные детали реализации: сначала создайте объект Vue, вызовите функцию апплета Page в области действия объекта Vue, чтобы инициализировать страницу, и в то же время смонтируйте всю информацию в экземпляр Vue, установите крючки в жизненном цикле страниц. для вызова функции жизненного цикла Vue, во время которой все данные берутся из примера Vue.
- Кроме того, мы разрабатываем mpvue с руководящим принципом: не создавать спецификации, не вводить новое обучение. Мы в максимальной степени поддерживаем весь синтаксис Vue.js и делаем все возможное, чтобы обеспечить переход с Vue.js на апплет с нулевой стоимостью.
лучшие практики mpvue
mpvue фокусируется на решении проблемы эффективности разработки небольших программ и повышает удобство сопровождения кода за счет механизмов фреймворка и спецификаций синтаксиса. В то же время он также предоставляет рабочее пространство для повторного использования кода апплета и H5. Учащиеся, знакомые с фронтенд-разработкой, знают, что между Mini Programs и самой H5 существуют различия в платформах, и некоторые возможности не могут быть согласованы. Мы получаем много вопросов о том, как код, написанный в mpvue, работает в браузере. Как mpvue решает кроссплатформенное приложение апплета и H5. В ответ на эти проблемы предлагаемые нами решения заключаются в следующем:
- Вы можете использовать как можно больше функций синтаксиса апплета или компонентов апплета, потому что вам не нужно уделять внимание их последующему преобразованию в компоненты H5.
- Избегайте использования функций, связанных с браузерами, эта часть кода не может быть запущена в апплете.
- Сведите к минимуму использование устаревших функций синтаксиса, производительность среды апплета не очень хорошая, например, $ref, filter и т. д.
Для сценариев, в которых mpvue учитывает как апплет, так и H5:
- Используя независимый от платформы синтаксис для публичного построения, нет существенной разницы в производительности этой части способности между двумя концами.
- Платформа сильно зависит от кода, который будет реализован отдельно, а различия платформ экранируются за счет абстрагирования слоя адаптации.Если вы хотите реализовать слайд, карту, в апплете есть нативные компоненты, но H5 нужно реализовывать отдельно, и такая же компиляция не может быть достигнута через фреймворк. Идею можно сравнить с реакцией нативной.
Как быстро освоить возможности mpvue и использовать его для ежедневной разработки:
- Прочтите официальную документацию, чтобы понять, как использовать mpvue.
- Поймите разницу в возможностях между мини-программами и H5, чтобы различать функции, подходящие для сценариев H5 и сценариев мини-программ.
- Прочтите выпуск проекта mpvue, чтобы избежать распространенных проблем и узнать о решениях.
- Для долгосрочного создания небольших программ продолжайте извлекать общие компоненты или решения и повторно использовать их в большем количестве сценариев.
планы на будущее
Какова текущая практика использования mpvue в сообществе? В нашей компании мы широко используем mpvue с сентября прошлого года, и мы прошли почти все сцены. Сейчас мы разбираем набор лучших практик с точки зрения бизнес-приложений, в дальнейшем будем синхронизировать для всех в виде технических блогов.
Что собирается делать mpvue? Сама конструкция фреймворка может быть дополнительно оптимизирована, а размер базовой библиотеки может быть сжат для использования в более легких сценариях. Со стороны сообщества улучшите набор планов строительства библиотеки. В долгосрочной перспективе мы планируем встроить mpvue в самый популярный фреймворк для апплетов.
общественное здание mpvue
У самого mpvue есть план, и мы набираем больше участников для участия в построении сообщества. Теперь некоторые студенты присоединились внутри и за пределами компании один за другим, и мы будем улучшать построение сообщества с помощью некоторых механизмов.
В то же время вы можете видеть, что крупные компании уже начали свои небольшие программы. Что мы можем сделать с mpvue? Представьте себе в будущем, предположим, что у нас есть план из десяти небольших программ.Если мы можем попытаться сопоставить эти маленькие программы одновременно, написав набор кода... Разве это не замечательно?
напиши в конце
Цель этого обмена в основном состоит в том, чтобы представить, что такое mpvue, какие у него преимущества, что он может делать и каковы планы на будущее. Предоставьте ссылку на технический выбор каждого. Для долгосрочного обслуживания проектов с открытым исходным кодом у нас есть выделенные технические каналы связи, и вы можете вносить предложения или вносить свой вклад в совместное продвижение развития сообщества Mini Program.
BTW:
Добро пожаловать в использование mpvue,mpvueС момента открытия исходного кода 8 марта 2018 г. он широко используется и получает отзывы в сообществе.Для получения помощи и подробностей, пожалуйста, посетите наш официальный сайт: