- задний план
- решение
- принцип
- пробовал и тестировал
- Примеры производственных приложений
- Легко использовать
- полиморфный протокол
- низкая стоимость обучения
- прогрессивный доступ
- Сравнение отрасли
- Позднее планирование
- идеализм
После почти 20 месяцев полировки межтерминальное решение Didi, хамелеон, наконец-то открыто.GitHub.com/Brother/Что за чай..., Сосредоточьтесь на одном наборе кода, работающем с нескольких сторон.
задний план
WeChat имеет 1 миллиард активных пользователей в месяц (больше, чем количество пользователей сети, и пользователи имеют несколько учетных записей?), 400 миллионов активных пользователей в месяц Alipay и 330 миллионов активных пользователей в месяц Baidu; в третьем квартале 2018 года на телефоны Android в Китае приходилось более 80% рынок смартфонов, будь то BAT или Android Quick AppsВсе это настоящие пользовательские порталы для китайских интернет-пользователей.Как небольшая интернет-компания, все они надеются наверстать упущенное в небольшой программе, чтобы захватить волну трафика.
Историческое развитие компьютерных технологий говорит нам о том, что каждая новая технология будет проходить стадию «отдельного правительства», и технология апплетов не является исключением. Как создатель апплета WeChat, хотя другие программы-апплеты намеренно имитируют принцип технической реализации и дизайн интерфейса, как разработчику на переднем крае, сталкивающемуся с той же реализацией приложения, им часто приходится повторять разработку и тестирование, а рабочая нагрузка первого единица стала рабочей нагрузкой N единиц.
Одними из самых заметных «жертв» стали инженеры отдела исследований и разработок Didi: у Didi Chuxing есть соответствующие порталы в WeChat Wallet, Alipay и Android Quick Apps, а доля пользовательского трафика немалая.
Различные небольшие программы смогли охватить всех пользователей сети в Китае.С тех пор, как Facebook открыл исходный код в 2013 году, сам проект становится все больше и больше. Проект ReactNative, созданный на основе самого раннего движка WebUI, имеет еще более амбициозные цели.
Vue.js был выпущен примерно в 2014 году, и он занял большое количество групп пользователей по сравнению с текущим.В 2016 году Alibaba также выпустила проект weex на основе vue, который можно написать на vue.NativeAPP.
Google официально выпустила ориентированную на будущее версию Flutter 1.0.0 для Android и IOS в конце 2018 года. У ориентированной на будущее кросс-эндовой платформы будущее светлое.
решение
Хотя фреймворки различных терминалов постоянно меняются, независимо от всевозможных небольших программ, Weex, React-Native, Flutter и быстрых приложений, они неотделимы от идеи проектирования архитектуры MVVM. Chameleon надеется использовать набор кода для выполнения всех конечных требований и объединить одну и ту же бизнес-логику в один и тот же уровень системы без ухудшения ремонтопригодности из-за последовательной абстракции проекта.
Унифицировать кросс-энд среду MVVM: используя различные кросс-энд технологии (Weex, React-Native, браузер WebView, Flutter) и продуктовый бизнес (апплет WeChat, Quick App, апплет Alipay, апплет Baidu Smart, апплет Toutiao, общие технические характеристики других различных небольших программ) - проектирование архитектуры MVVM, языковая среда программирования, направленная на унификацию платформы кросс-конечной архитектуры MVVM.Chameleon(Любой терминал, созданный с использованием архитектуры MVVM, можно разработать и запустить с помощью Chameleon).
View:
ChameleonSDK включает в себя различные апплеты, веб и клиент (React-Native, Weex, Flutter).В настоящее время он поддерживает апплет WeChat, Web и Weex, а в будущем будет поддерживать больше терминалов стандарта MVVM.
View Model:
CML (Chameleon MarkupLanguage) — это набор языков разметки для разработки фреймворка, который в сочетании с базовыми компонентами, системой событий и привязкой данных может создавать структуру страницы. В то же время, чтобы снизить стоимость обучения, поддержать классыVueTemplate.
принцип
пробовал и тестировал
Когда в 2017 году был выпущен апплет WeChat, Диди как пользователь из белого списка впервые начал пытаться получить доступ. В настоящее время мы специально создали небольшую проектную группу из 1 или 2 человек для завершения проекта под названием MPV. Цель первого этапа — «внедрить набор кодов для запуска небольших веб-приложений и приложений WeChat, не влияя на производительность пользователя». и не опираясь на принципы фреймворка "программа". После завершения разработки MPV в практике многих проектов действительно выполнено более 90% переиспользования кода, значительно повышена общая эффективность разработки и эффективности тестирования, выявлено больше проблем:
- Проблемы с ремонтопригодностью, нет изоляции общего кода и разностного кода на каждом конце.
- Неправильный выбор направления, MPV использует стандарт синтаксиса мини-программы (жизненный цикл мини-программы, интерфейс API и т. д.), что делает невозможным для пользователей четкое понимание спецификаций использования.
- Вокруг каждого конца слишком много мелких различий.
- Синтаксис шаблона DSL нестандартен.
- Эффекты интерфейса на обоих концах непоследовательны.
- Стоимость многотерминальной отладки высока.
- Отстает инженерное строительство.
- Существующие экологические компоненты на каждом конце нельзя использовать напрямую, то есть отсутствуют стандартные спецификации для доступа к существующим компонентам с открытым исходным кодом на определенном конце.
В апреле 2018 года мы еще больше расширили масштабы проекта cross-end, и решение cross-n-end было названоChameleon/kmiln/, сокращенно CML, китайское название Cameron; по-китайски означает хамелеон, что означает сквозное общее решение, которое может адаптироваться к различным средам, как хамелеон.
С накоплением практики MPV Chameleon не только решает различные возникающие проблемы с ремонтопригодностью, но и делает более четким последующее планирование.Цель состоит в том, чтобы действительно сосредоточиться на разрешении запуска набора кодов на нескольких терминалах и предоставлении стандартного MVV. Режим M для объединения различных терминалов.
После года накопленного практического опыта десятков фронтенд-разработчиков на сотнях страниц,Официально открытый исходный код на этой неделе:GitHub.com/Brother/Что за чай.....
Примеры производственных приложений
Легко использовать
Набор кода работает с многотерминальной концепцией, и наиболее сложной задачей является обеспечение простоты использования.
- Разработка идет быстро, и общий процесс разработки должен быть эффективным.
- Простота, пространство для разработки и настройки каждого конца велико, и общий код не будет смешиваться с кодом определенного конца.
- Производительность хорошая, а размер выходного файла не может быть увеличен.
- Последовательность, многоцелевой эффект реализации является последовательным.
| Быстрое развитие | |||
|---|---|---|---|
| Ключевые слова | Инженерные разработки | унификация на уровне проекта | Унификация на уровне компонентов |
| описывать | Коллекция лучших инженерных функций: Различные макеты данных, расположение ресурсов, отладка прокси, LivereLoad и т. д., CML — это не только кросс-энд, но и помогает разработчикам эффективно разрабатывать единый конечный продукт. |
Когда весь бизнес нескольких терминалов в высокой степени согласован, один набор кода проекта может использоваться для запуска нескольких терминалов. | Код был разработан с помощью собственного апплета, веб-страница была разработана с помощью vue, и у них есть повторяющиеся компоненты разработки, такие как вход в систему.
|
| Простота (большое пространство для настройки на каждом конце) | хорошее выступление | последовательность | ||
|---|---|---|---|---|
| Ключевые слова | полиморфный протокол | Размер выходного пакета ресурсов, оставьте только односторонний код | проверка грамматики | Многоконечное восстановление согласованности |
| описывать | Полиморфный протокол можно использовать на нескольких уровнях, пользователи могут свободно переключаться сверху вниз: уровень метода, уровень компонента, уровень страницы, уровень приложения. | На этапе компиляции будет сохранена только часть кода для экспорта, а встроенные компоненты и API будут упакованы по мере необходимости. | Чтобы обеспечить одинаковый эффект от каждого конца, нет необходимости отлаживать каждый конец один за другим, а проверка грамматики выполняется при сохранении для выявления потенциальных проблем. | Большой объем работы на уровнях компиляции и выполнения обеспечивает тот же эффект. |
полиморфный протокол
После слияния нескольких терминалов неизбежно, что каждый терминал будет дифференцированным.В начале дифференцированный код и бизнес-логика смешиваются вместе. Это смущает.Если вы думаете, что вышесказанное не сложно, предположим, что есть 4 или 5 терминалов, бизнес-логика смешана с кросс-терминальной логикой, логика продукта не должна прерываться, читабельность плохая, а изменения в требованиях повлияют на весь Оба теста, кросс-энд эффективность кода становится контрпродуктивным.
Дифференцированный код на каждом конце рисунка ниже также смешивается с логикой.
Дизайн полиморфного протокола вдохновлен Apache Thrift — масштабируемой платформой разработки межъязыковых сервисов, которая по существу является кросс-конечной и кросс-языковой.
Это позволяет разработчикам Chameleon быстро получать доступ к базовым функциям каждого клиента или реализовывать дифференцированные службы, избегая проблем с плохой читабельностью и плохой ремонтопригодностью.
Полиморфный протокол определяет стандартный интерфейс (интерфейс), каждый конечный модуль реализуется независимо, а ввод и вывод реализованного интерфейса проверяются во время компиляции и во время выполнения.
2 основные цели:
- Обеспечение многотерминальной ремонтопригодности
- Разделить многотерминальный код во время компиляции
Когда пользователь расширяет функции отдельных продуктов с непоследовательными эффектами или специфическими базовыми возможностями в соответствии со стандартными спецификациями, полиморфный протокол может эффективно изолировать общий код и код различия каждого конца и гарантировать, что «речная вода не нарушает правила». вода из колодца".
Пример: когда вы разрабатываете функциональный компонент диаграммы, вы можете использовать echarts:
- По веб-версии в проекте
npm install echartsСкачать связанные файлы с версией WeChat - Затем определите полиморфные диаграммы компонентов
- Определите ввод и вывод этого компонента в charts/charts.interface
- Вызовите версию WeChat (вы можете использовать папку компонента апплета WeChat) и веб-версию (вы можете вызвать файл с суффиксом .vue) в charts/charts.wx.cml и charts/charts.web.cml соответственно.
- Наконец, компонент можно использовать в проекте
Выходной пакет содержит код только одного конца компонента; из-за ограничения ввода и вывода вызовы компонента полностью согласованы, и нет необходимости выполнять специальную логическую обработку в соответствии с определенным концом. Вы можете поместить полиморфный компонент echart в репозиторий для отдельного обслуживания и выпуска, другим людям не нужно иметь отношение к внутренним деталям, напрямуюnpm install echartготов использовать.
низкая стоимость обучения
Синтаксис CML уровня VM представляет собой абстрактный DSL, который связывает уровень представления и уровень логики. Многие студенты-энтузиасты, помогающие нам, больше всего рекомендуют проблему стоимости обучения. Стоимость обучения CML сама по себе очень низкая, и она это не что иное, как двусторонняя привязка данных, привязка событий, деревья компонентов, условные операторы, обходы циклов и многое другое. Сначала мы отклонили его, но после всестороннего рассмотрения мы скомпрометировали и поддержали синтаксис, подобный Vue, что позволило разработчикам быстрее начать работу с CML.
прогрессивный доступ
Многие люди уже разработали небольшие программы, но большинство из них они не хотят изобретать заново, а также хотят использовать CML?Конечно, есть два способа использования CML:
| Описание/Тип | Весь проект использует CML | Общие компоненты используют CML |
|---|---|---|
| диаграмма отношений | ||
| иллюстрировать | Требования бизнес-уровня очень похожи в каждой конечной среде. Первоначально необходимо было повторить разработку и повторить тестирование для разных целей. Затем используйте Chameleon для запуска всего проекта «сверху вниз» с помощью одного набора кода. |
Первоначально общие компоненты необходимо разрабатывать и многократно тестировать. Используйте набор кода для разработки общих компонентов, Каждая сторона может напрямую использовать общие компоненты |
| Пример | Домашняя страница, подробная страница, заказ | Компонент обмена, компонент оплаты, компонент карты, компонент выбора |
Сравнение отраслей
Другие фреймворки в отрасли преследуют цели, отличные от наших. Мы надеемся, что реальный набор кодов может работать с несколькими концами, в то время как другие фреймворки представляют собой не что иное, как «улучшение синтаксиса небольшой программы» или «продвижение определенного фреймворка для написания небольших программ». но есть перекрывающиеся точки. , перечислите функцию сравнения:
Позднее планирование
| направление | поднаправление | выполнить проект |
|---|---|---|
| Повышенная простота использования |
|
|
| Оптимизация фреймворка |
|
|
| Расширение конечной продукции |
|
|
| расширение компонента |
|
|
| расширение возможностей терминала |
|
|
| Оптимизация процесса |
|
|
| Расширение службы |
|
|
идеализм
- Мы терпеть не можем тратить время на повторяющуюся работу.
- Или не делайте это до крайности, набор кода для запуска мультипорта всегда был идеалистичным, этот путь очень труден, но мы твердо верим, что фанатизм должен сделать все возможное, чтобы сделать это как менее уверенный человек, а не приносить пользу боится выпустить.
- Каждая деталь фреймворка CML должна быть доведена до совершенства.Мы не можем мириться с недостатками дизайна, поэтому члены команды часто обсуждают на еженедельных собраниях CML по 6 часов до поздней ночи.
Быстрый старт:Долгое молчание, чтобы сказать, что .org/doc/quick_ это…
Общая проблема:долгое молчание, чтобы сказать .org/doc/frame i...
Добро пожаловать в код:didi/chameleon