В последние годы в области фронтенда появляется все больше и больше кросс-энд технологий: React Native, Weex, Flutter, Electron, Kraken и др.
Есть ли у них общее представление при таком количестве межсетевых решений? Можем ли мы найти основной принцип из стольких схем?
В этой статье будет предпринята попытка исследовать следующие вопросы:
- что такое кроссплатформенность
- Какие программы кроссплатформенные
- В чем разница между кросс-эндом и кросс-платформой
- Какие есть кросс-энд решения в области фронтенда?
- В чем общий принцип кроссплатформенности и кроссэнда
что такое кроссплатформенность
Мы знаем, что процессоры имеют разные архитектуры и наборы инструкций, а верхний уровень также имеет разные операционные системы.Исполняемый файл одной системы не является исполняемым в другой системе.Например, exe-файл Windows не может быть напрямую запущен на Mac. Разные системы — разные операционные платформы. Исполняемые файлы не являются кроссплатформенными.
API-интерфейсы, предоставляемые разными платформами, различаются, поэтому логика кода также может быть разной, и разные платформы должны поддерживать код отдельно. Это порождает несколько проблем:
- Мультиплатформенная разработка, как обеспечить согласованность функций
- Если несколько платформ разрабатываются отдельно, нужно ли их отдельно тестировать?
Итак, есть некоторые кроссплатформенные технологии, цель которых — запустить код на любой платформе.
Давайте сначала рассмотрим некоторые кроссплатформенные решения в различных областях:
браузер
В зависимости от операционной системы код веб-страницы, работающей в браузере, действительно одинаков. Браузеры — это кроссплатформенное решение с многолетней историей.
То, что веб-страница является кроссплатформенной, не означает, что браузер также является кроссплатформенным, исполняемый файл браузера разрабатывается и компилируется отдельно для каждой платформы, но поддерживаемая ими логика парсинга веб-страницы одинакова, поэтому что веб-страница, работающая на нем, является кроссплатформенной.
Браузер предоставляет контейнер, который скрывает базовые различия и предоставляет унифицированный API (дом API), так что один и тот же код может выполняться в унифицированном контейнере на разных платформах. Этот контейнер называется движком браузера, который состоит из движка js, движка рендеринга и так далее.
docker
Docker — это технология виртуализации, которая может добавить виртуальный уровень поверх операционной системы, разделить один или несколько контейнеров поверх этого уровня, а затем запустить систему и приложение в контейнере, что может реализовать разделение аппаратного и программного обеспечения. динамическое выделение аппаратных ресурсов контейнерам и облегчение общей миграции среды выполнения приложения (сохранение в виде образа).
Docker, очевидно, также является кроссплатформенной технологией, один и тот же образ может работать на докере любой операционной системы. Пока разные операционные системы реализуют один и тот же контейнер.
jvm
Java — это компилируемый + интерпретируемый язык.Исходный код Java компилируется в байт-код, а затем байт-код напрямую интерпретируется и выполняется на виртуальной машине.
Почему джава такая горячая? В основном из-за кроссплатформенности.
Код, написанный на языке c и c++, необходимо компилировать в исполняемые файлы на разных операционных системах для запуска, а код каждой платформы может быть разным, и нужно писать несколько копий.
Поскольку java предоставляет контейнер jvm, вам нужно только скомпилировать исходный код в байт-код, который может быть интерпретирован jvm, а jdk предоставляет унифицированный API, который реализуется базовым API разных операционных систем, так что для кода java разные операций Код системы непротиворечив.
JVM также реализует код для работы на нескольких платформах с помощью технологии контейнеров, а jre предоставляет унифицированный API для защиты базовых различий.
узел, дено
Node и deno также являются кроссплатформенными технологиями.Благодаря согласованному набору API-интерфейсов их код js может быть кроссплатформенным. Эти API также реализованы на разных платформах.
electron
Electron имеет встроенный хром и внедрил в него API узла и некоторые API, связанные с графическим интерфейсом.Это кроссплатформенное решение, основанное на двух кроссплатформенных технологиях. На основе комбинации этих решений компания Electronic поддерживает разработку настольных терминалов с передовыми технологиями.
Преимущества и недостатки кроссплатформенных решений
Преимущество кроссплатформенного решения очевидно, то есть кусок кода запускается в одном контейнере на разных платформах, и его не нужно разрабатывать отдельно на разных платформах, что экономит затраты.
Но есть у кроссплатформенного решения и недостатки:
-
Поскольку есть дополнительный слой контейнеров, производительность будет ниже, чем вызов системного API напрямую.
-
Для достижения многоплатформенной согласованности необходимо предоставить унифицированный набор API.У этого набора API есть две проблемы:
-
Как спроектировать API. Чтобы интегрировать возможности разных платформ, возьмите подходящий набор для достижения. Есть некоторые сложности в дизайне. Node, deno и java абстрагируют возможности операционной системы и предоставляют свои собственные кросс-платформенные API.
-
Некоторые API трудно обеспечить согласованность на нескольких платформах.
-
Это проблематично, когда возможности, которые не предоставляет контейнер, должны быть расширены.Например, мост js-движка, jni jvm и дополнение C++ узла — все это способы расширить возможности контейнера. .
-
Кросс-энд решения в области фронтенда
Кросс-платформенность относится к кросс-операционным системам, а кросс-энд относится к клиентам.
Характеристики клиента заключаются в том, что он имеет интерфейс и логику, поэтому включает в себя кросс-энд логики и кросс-энд рендеринга. Основные клиенты — веб, андроид, ios, iot устройства и т.д.
Теперь основные кросс-энд решения включают в себя React Native, Weex, Flutter, Kraken и различные кросс-энд движки собственной разработки.
react native
Кросс-энд включает в себя логический кросс-энд и кросс-энд рендеринга.Логический кросс-энд rn основан на движке js, и некоторые API-интерфейсы с поддержкой устройств внедряются через мост, в то время как кросс-энд рендеринга должен использовать Android и ios для реализации рендеринга виртуального дома реакции.
Среди них собственный API и компонент (часть, нарисованная серым цветом) не согласованы на обоих концах, и иногда серая часть на диаграмме расширения требует собственного взаимодействия, а смешанный код rn и саморасширяемый код делают код сложнее в управлении. Самое известное событие — это когда airbnb превратилась из крупнейшего сторонника React Native в устаревшего React Native.
weex
У Weex также есть аналогичная идея для достижения кросс-энда, но платформа пользовательского интерфейса верхнего уровня, которую он состыковывает, — это vue, и она стремится достичь согласованности двухконечных компонентов и API (хотя последующее обслуживание не может идти в ногу). Архитектура аналогична картинке выше.
flutter
Flutter — популярное кросс-энд решение в последние годы, включая Android, ios, веб и т. д. Его самая большая особенность заключается в том, что рендеринг не основан на компонентах операционной системы, а рисуется непосредственно на основе библиотеки рисования (skia), что обеспечивает сквозной рендеринг. Кросс-энд логики основан не на движке js, а на собственной разработке dart vm для кросс-энда и записи логики через язык dart.
kraken
Кросс-энд включает в себя две части: кросс-энд рендеринга и логический кросс-энд. Иногда вам нужен только кросс-энд рендеринг, иногда вам нужен только логический кросс-энд, а иногда вам нужен полноценный кросс-энд движок Эти три ситуации имеют свои собственные применимые сценарии.
Kraken — это кросс-энд рендеринг, который реализует рендеринг css на основе возможностей рисования флаттера и реализует кросс-энд рендеринг.
Самостоятельно разработанный движок рендеринга
Движок кросс-энда очень сильно зависит от компонентов и API, реализованных внизу, также необходимо расширять эту часть решениями с открытым исходным кодом, поэтому команды определенного масштаба выберут разработку самостоятельно.
Кроссовый движок собственной разработки будет отличаться от rn и weex:
-
Часть рендеринга не должна реализовывать рендеринг виртуального дома, но напрямую подключается к API-интерфейсу dom, а приложение верхнего уровня реализует кросс-энд рендеринг на основе этих API-интерфейсов dom. Таким образом, теоретически можно состыковать любой интерфейсный фреймворк.
-
Логическая часть также основана на движке js, который напрямую внедряет некоторые API, реализованные на C++, через привязку или внедряет некоторые API, реализованные в Android и iOS, через мост во время выполнения.
Преимущество кросс-энда собственной разработки в том, что компоненты и API могут расширяться сами по себе и быстрее реагировать на потребности бизнеса. Среди них двусторонняя согласованность компонентов и API, а также дизайн унифицированного API — все это сложные моменты.
Каков общий принцип кросс-энда
На самом деле идея кросс-энда и кросс-платформы схожа.Они оба реализуют контейнер и предоставляют ему унифицированный API.Этот набор API реализуется разными платформами для обеспечения согласованности функций.
Чтобы быть более конкретным, кросс-энд делится на рендеринг и логический кросс-энд, Иногда требуется только отдельное кросс-энд решение для рендеринга (например, karen) и логическое кросс-энд решение, а иногда требуется полный кросс-энд движок. требуется.
Часть рендеринга Weex и React Native реализуется путем рендеринга виртуального дома, который реализуется соответствующими методами рендеринга Android и ios.Логическая часть использует движок js и вводит некоторые Android и ios API через мост.
Flutter использует библиотеку рисования skia для прямого рисования и использует dart vm для логического кросс-энда.
Но какой бы ни была конкретная реализация, идеи схожи:Кросс-энд-движок должен реализовать движок рендеринга и виртуальную машину, реализовать различные компоненты и API-интерфейсы на основе этой архитектуры, подключить инфраструктуру пользовательского интерфейса к верхнему уровню кросс-контейнера, а затем бизнес-код верхнего уровня может реализовать кросс-энд рендеринг и логика на основе API контейнера
web container
В последние два дня относительно популярен веб-контейнер, на самом деле это тоже кроссплатформенная технология, это контейнер, реализованный в браузере, API ноды реализовано через wasm, так что код ноды можно запускать в этот контейнер. На самом деле идея относительно распространена, но это новая сцена.
Поверх контейнера браузера запускался другой контейнер, матрешка-контейнер.
Суммировать
Мы говорили о разнице между кросс-платформой и кросс-эндом, кросс-платформа — это кросс-операционная система, а кросс-энд — это кросс-клиент.
Кроссплатформенная технология говорила о докере, браузере, jvm, узле, дено, электроне, веб-контейнере и т. д. Все они являются кроссплатформенными (операционными системами) решениями. Кроссплатформенность имеет свои преимущества и недостатки. Недостатком является то, что дизайн API сложнее.Node, deno, java и т. д. у всех свой уровень дизайна API, гарантия согласованности API также сложнее, во-вторых, метод расширения сложнее (jni из jvm, c++ надстройка узла, так далее.).
Кросс-энд решения говорят о React Native, Weex, Flutter, Kraken и т. д. Некоторые привязаны к интерфейсным фреймворкам, таким как React и Vue, и рендерятся непосредственно из виртуального дома, а некоторые реализованы с помощью dom API, который может быть подключается к любому интерфейсному фреймворку. Конечно, вы можете делать рендеринг или логический кросс-энд в одиночку. Визуализируйте кросс-энд или используйте методы, предоставляемые Android и ios, или нарисуйте его самостоятельно, логический кросс-энд или используйте js-движок (который можно подключить к интерфейсному фреймворку) или используйте dart vm.
Я надеюсь, что эта статья поможет вам понять идеи, преимущества и недостатки межплатформенных и межплатформенных контейнеров, и вы сможете быстро разобраться в некоторых новых технологиях (таких как веб-контейнеры).