// tailwind.config.js
  модуль.экспорт = {
+ режим: 'джит',
    удалять: [
      // ...
    ],
    тема: {
      // ...
    }
    // ...
  } 

 // tailwind.config.js
  модуль.
  экспорт = {
    режим: «джит»,
+ // Эти пути являются просто примерами, настройте их в соответствии со структурой вашего проекта
+ очистка: [
+ './public/**/*.html',
+ './src/**/*.{js,jsx,ts,tsx,vue}',
+ ],
    тема: {
      // ...
    }
    // ...
  } 

 


Поделиться в Twitter

<дел>
  
 

 <дел>...
...
 

 
...
...
 

  

  Это будет средним шрифтом, несмотря на то, что полужирный шрифт появляется позже в CSS. 
 

 - 

+ 
 

 < раздел>
  

 <р>
  Я желтый, когда вы выделяете меня.
 

 

  
Одио и др. 
  
Voluptatem perferendis optio est id.
  
Accusamus et aut odit.
 

• only (for only-child )
• first-of-type
• last-of-type
• только тип
• цель
• по умолчанию
• неопределенный
• местозаполнитель0019
• autofill
• required
• valid
• invalid
• in-range
• out-of-range

Caret color utilities

You can now set the цвет курсора в полях формы с помощью новых утилит Caret-{color} :

Они настраиваются с помощью клавиши CaretColor в теме вашего файла tailwind. config.js .

Варианты родственных селекторов

Подобно вариантам group-* , которые мы поддерживали в течение многих лет для стилизации элемента на основе родительского состояния, вы можете использовать новые варианты peer-* для стилизации элемента на основе родительского состояния. состояние одного из его предыдущих братьев и сестер:

 
  <тип ввода="флажок">
  <диапазон>
    
  
  
 

Просто отметьте предыдущего интересующего вас брата с помощью класса peer , затем используйте такие варианты, как peer-hover , peer-checked , peer-focus и т. д., чтобы стилизовать элемент на основе состояние этого брата.

Упрощенная композиция преобразования, фильтра и фонового фильтра

Классы преобразования , фильтра и фонового фильтра больше не нужны для «включения» соответствующего набора компонуемых утилит.

 - <дел>
+ 
 

Теперь эти функции автоматически включаются каждый раз, когда вы используете любую из соответствующих вспомогательных утилит.

Изменения

Мы рассматриваем движок JIT в качестве предварительного просмотра того, что мы планируем поставлять в качестве Tailwind CSS v3.0, поэтому есть несколько небольших критических изменений, которые следует учитывать при регистрации. Мы действительно не ожидаем, что они повлияют очень много людей, но стоит прочитать, особенно если вы заметите какие-то тонкие различия в том, как выглядят ваши проекты.

Варианты отображаются вместе

В классическом движке варианты утилит группируются в сгенерированном CSS для каждой утилиты следующим образом:

 /* Классический движок */
.bg-черный {цвет фона: #000}
.hover\:bg-black:hover {цвет фона: #000}
.focus\:bg-black:focus {цвет фона: #000}
/* ... */
.opacity-75 {непрозрачность: 0,75}
.hover\:opacity-75:hover { непрозрачность: 0,75 }
. focus\:opacity-75:focus { непрозрачность: 0,75 }
/* ... */
.translate-x-4 { --tw-translate-x: 1rem }
.hover\:translate-x-4:hover { --tw-translate-x: 1rem }
.focus\:translate-x-4:focus { --tw-translate-x: 1rem } 

В механизме JIT варианты группируются вместе для каждого варианта :

 /* Механизм JIT */
.bg-черный {цвет фона: #000}
.opacity-75 {непрозрачность: 0,75}
.translate-x-4 { --tw-translate-x: 1rem }
/* ... */
.hover\:bg-black:hover {цвет фона: #000}
.hover\:opacity-75:hover { непрозрачность: 0,75 }
.hover\:translate-x-4:hover { --tw-translate-x: 1rem }
/* ... */
.focus\:bg-black:focus {цвет фона: #000}
.focus\:opacity-75:focus { непрозрачность: 0,75 }
.focus\:translate-x-4:focus { --tw-translate-x: 1rem } 

Это означает, что больше нельзя указывать порядок вариантов для каждого основного плагина — варианты всегда будут в одном порядке для всех утилит. Это может быть проблемой для вас, если ранее вам требовалось hover для победы над focus , например, для конкретной утилиты, и вы обеспечили hover после focus в списке вариантов.

 // хвостовой ветер.config.js
  модуль.экспорт {
    // Конфигурация вариантов (включая порядок) не учитывается механизмом JIT
- варианты: {
- // ...
- backgroundColor: ['фокус', 'зависание']
- }
  } 

Чтобы справиться с такими ситуациями с помощью JIT-движка, мы рекомендуем вместо этого использовать варианты с накоплением:

Стекированные варианты позволяют вам указать, как что-то должно быть оформлено, когда несколько вариантов активны одновременно, поэтому вместо того, чтобы пытаться переопределить стилей focus стилями hover , вы явно указываете, как должен выглядеть элемент когда оба hover и focus активны одновременно.

Варианты вставляются в варианты @tailwind

В классическом движке все варианты утилит вводятся как часть директивы утилит @tailwind .

В механизме JIT варианты вводятся в директиве @tailwind варианты , которая была переименована из @tailwind screens .

Эта директива не является обязательной.0019 всегда был) и полезен только в том случае, если вы хотите явно контролировать, куда вводятся варианты утилит. По умолчанию они всегда вставляются в самый конец вашей таблицы стилей.

Если вы использовали экраны @tailwind ранее, вам следует обновить свой код, чтобы использовать варианты @tailwind :

 @tailwind base;
  компоненты @tailwind;
  утилиты @tailwind;
- Экраны @tailwind;
+ Варианты @tailwind;
  /* Некоторый пользовательский CSS... */ 

Варианты @tailwind 9Функция 0019 считается расширенным аварийным люком, и мы рекомендуем по умолчанию не использовать ее. Вы должны использовать его только в том случае, если ваш проект не будет работать должным образом без него, что действительно верно только в том случае, если вы внедряете Tailwind в устаревшую систему с очень хрупкой существующей кодовой базой CSS, которая имеет стили, которые абсолютно нуждаются в , чтобы быть на уровне. самый конец таблицы стилей для работы.

Преобразования и фильтры не требуют явного включения

Преобразование 9Классы 0019 , filter и background-filter не нужны для «включения» этих функций при использовании механизма JIT:

 - 

+ 
 

Это означает, что вы больше не можете ожидать, что преобразования и фильтры будут бездействующими по умолчанию и активированными по условию путем добавления transform , filter или background-filter .

Вместо этого вы можете поставить любые варианты на сами вспомогательные утилиты:

- <дел>
+ 
 

Ограничения

Этот новый движок поддерживает почти все функции, существующие в классическом движке, а также множество новых функций, которые были бы невозможны, если бы все нужно было создавать заранее.

Однако из-за характера работы движка есть несколько вещей, которые в настоящее время невозможны:

• Параметр списка надежных отправителей не поддерживает регулярные выражения . Поскольку CSS по умолчанию не создается, список надежных отправителей должен представлять собой список полных имен классов. Невозможно внести регулярное выражение в безопасный список, потому что нет предварительно сгенерированного списка имен классов для сопоставления с этим регулярным выражением.
• Параметр префикса не может обнаруживать полные имена классов, если он сконфигурирован как функция . Поскольку мы не генерируем имена классов заранее, мы можем передать служебное «пространство имен» только пользовательским префиксным функциям. См. этот комментарий для примера.
• Вы можете только @apply классов, которые являются частью ядра, сгенерированы плагинами или определены в правиле @layer . В настоящее время вы не можете @apply произвольных классов CSS, которые не определены в @layer , хотя мы можем добавить поддержку этого правила в будущем.

Мы также все еще устраняем некоторые проблемы совместимости с некоторыми инструментами сборки, за которыми вы можете следить в нашем трекере проблем.

Если вы столкнетесь с какими-либо другими проблемами или обнаружите какие-либо ошибки, откройте проблему, чтобы мы могли ее исправить.

Устранение неполадок

Стили не удаляются при удалении классов

Когда механизм JIT работает в режиме наблюдения, вы можете заметить, что когда вы добавляете класс в свой HTML, а затем удаляете его, класс равен все еще присутствует в вашем CSS.

Это не ошибка, а преднамеренная оптимизация производительности, которая резко увеличивает скорость инкрементной перестройки, особенно в больших проектах.

Мы рекомендуем всегда компилировать свой CSS в отдельной одноразовой сборке перед развертыванием в рабочей среде, чтобы можно было минимизировать выходные данные. Для большинства современных инструментов (таких как Next.js, например) такого рода вещи происходят автоматически, потому что ваш скомпилированный CSS в любом случае никогда не передается в систему управления версиями.

Если вы хотите, чтобы Tailwind полностью перестраивал CSS с нуля в режиме наблюдения, сохранение файла tailwind. config.js или входного файла CSS сделает недействительными все кэши и вызовет новую перестройку.

Стили не обновляются при сохранении файлов содержимого

Начиная с Tailwind CSS v2.2+, механизм JIT зависит от сообщений о зависимости каталога PostCSS для регистрации файлов содержимого в качестве зависимостей сборки CSS с помощью инструмента сборки. Это довольно новое дополнение к PostCSS (добавлено в мае 2021 года), и еще не все инструменты сборки были обновлены для их поддержки.

Если ваш CSS не перестраивается при изменении файлов содержимого, попробуйте установить TAILWIND_MODE=watch как часть вашего сценария наблюдения, чтобы указать Tailwind использовать вместо этого устаревшую стратегию отслеживания зависимостей, которая хорошо работает со многими инструментами сборки.

Например, если вы используете postcss-cli , установите TAILWIND_MODE=watch в своем сценарии dev/watch:

 // package.json
{
  // . ..
  скрипты: {
    // Установите TAILWIND_MODE=watch при запуске сервера разработки
    "dev": "TAILWIND_MODE=смотреть postcss -i tailwind.css -o build.css --watch",
    // Не устанавливайте TAILWIND_MODE для разовых сборок
    "build": "postcss -i tailwind.css -o build.css --minify",
    // ...
  },
  // ...
} 

Если вы используете Windows, мы рекомендуем использовать cross-env для установки переменных среды в ваших сценариях.

Обратите внимание, что установка TAILWIND_MODE=watch запустит длительный процесс наблюдения в фоновом режиме, поэтому, если вы установите эту переменную среды при попытке выполнить разовую сборку, это будет выглядеть так, как будто сборка зависла.

Вы должны устанавливать TAILWIND_MODE=watch только тогда, когда вы фактически запускаете сервер разработки/наблюдательный процесс, и только если ваш инструмент сборки еще не поддерживает сообщения о зависимости каталога PostCSS. Этот флаг является временным обходным решением для несовместимых инструментов и в конечном итоге будет удален в будущей версии Tailwind CSS.

Стили перестраиваются в бесконечном цикле

Если кажется, что ваш CSS перестраивается в бесконечном цикле, есть большая вероятность, что ваш инструмент сборки не поддерживает параметр PostCSS glob при регистрации зависимостей.

Многие инструменты сборки (такие как webpack) не поддерживают эту опцию, и в результате мы можем только указать им смотреть определенные файлы или целые каталоги . Например, мы не можем указать веб-пакету просматривать только *.html файлов в каталоге.

Это означает, что если сборка вашего CSS приведет к изменению любых файлов в этих каталогах, будет запущена перестройка, даже если измененный файл не соответствует расширению в вашем глобусе.

 // хвостовой ветер.config.js
модуль.экспорт = {
  удалять: [
    // Ваш CSS будет перестроен в любое время *любой* файл в `src` изменяется
    './src/**/*.{html,js}',
  ],
  // ...
} 

Итак, если вы просматриваете src/**/*. html на наличие изменений, но записываете выходной файл CSS в src/css/styles.css , вы получите бесконечный цикл перестроения в некоторых инструментах.

В идеале мы могли бы предупредить вас об этом в консоли, но многие инструменты отлично поддерживают это (включая наш собственный инструмент CLI), и у нас нет надежного способа определить, какой инструмент сборки вы используете.

У вас есть несколько вариантов решения этой проблемы:

1. Используйте более конкретные пути в конфигурации очистки . Убедитесь, что вы включаете только каталоги, которые не изменятся при сборке вашего CSS.

    // tailwind.config.js
     модуль.экспорт = {
       удалять: [
   - './src/**/*.{html,js}',
   + './src/pages/**/*.{html,js}',
   + './src/components/**/*.{html,js}',
   + './src/layouts/**/*.{html,js}',
   + './src/index.html',
       ],
       // ...
     } 

   При необходимости измените фактическую структуру каталогов проекта, чтобы убедиться, что вы можете настроить таргетинг на файлы шаблонов без случайного обнаружения файла CSS или других артефактов сборки, таких как файлы манифеста.

2. Используйте инструмент сборки с поддержкой глобусов PostCSS . Если вы абсолютно не можете изменить конфигурацию очистки или структуру каталогов, лучше всего скомпилировать свой CSS отдельно с помощью инструмента, который имеет полную поддержку glob. Мы рекомендуем использовать интерфейс командной строки Tailwind — быстрый, простой и специально созданный инструмент для компиляции CSS с помощью Tailwind.

Кажется, что он работает неправильно

Если вы испытываете странные, трудно поддающиеся описанию проблемы с выводом или вам кажется, что они вообще не работают, велика вероятность, что это связано с ваш инструмент сборки не поддерживает должным образом сообщения о зависимостях PostCSS (или вообще) . Одним из известных примеров этого в настоящее время является Stencil.

При возникновении подобных проблем мы рекомендуем использовать инструмент командной строки Tailwind для компиляции CSS отдельно, а не пытаться интегрировать Tailwind в существующие инструменты.

Вы можете использовать такие пакеты, как npm-run-all или одновременно , чтобы скомпилировать свой CSS вместе с вашей обычной командой разработки, добавив в свой проект несколько скриптов, например:

 // package.json
{
  // ...
  "скрипты": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:parcel": "доставка посылки ./src/index.html",
    "dev:css": "tailwindcss -o src/tailwind.css --watch",
    "build": "npm-run-all build:css build:parcel",
    "build:parcel": "сборка пакета ./src/index.html",
    "build:css": "tailwindcss -o src/tailwind.css --minify",
  },
} 

В любом случае, обязательно проверьте существующую проблему или откройте новую, чтобы мы могли выяснить проблему и попытаться улучшить совместимость с любым инструментом, который вы используете.

Инструменты с известными проблемами совместимости в настоящее время включают:

• postcss-cli (#383)
• Parcel (#6299)
• Stencil (#35)

Обзор Microsoft Power Fx0 — Power Platform

1 9 06601 9 Статья
• 23. 02.2023
• 20 минут на чтение

Power Fx — это язык с низким кодом, который будет использоваться в Microsoft Power Platform. Это универсальный, строго типизированный, декларативный и функциональный язык программирования.

Power Fx представлен понятным для человека текстом. Это язык с низким кодом, с которым производители могут работать непосредственно в строке формул, подобной Excel, или в текстовом окне Visual Studio Code. «Низкий» в low-code объясняется лаконичным и простым характером языка, упрощающим общие задачи программирования как для создателей, так и для разработчиков. Это обеспечивает полный спектр разработки от без кода для тех, кто никогда раньше не программировал, до «профессионального кода» для опытных профессионалов, без обучения или переписывания обрывов между ними, что позволяет различным командам сотрудничать и экономить время и деньги.

Примечание

• Microsoft Power Fx — это новое название языка формул для приложений на основе холста в Power Apps. Этот обзор и связанные с ним статьи находятся в стадии разработки, поскольку мы извлекаем язык из приложений на основе холста, интегрируем его с другими продуктами Microsoft Power Platform и делаем его доступным с открытым исходным кодом. Чтобы узнать больше о языке и испытать его сегодня, начните с Начало работы с формулами в приложениях на основе холста в документации Power Apps и подпишитесь на бесплатную пробную версию Power Apps.
• В этой статье мы ссылаемся на создателей , когда описываем функцию, которая может использоваться на любом конце спектра навыков программирования. Мы называем пользователя разработчиком , если функция является более сложной и, вероятно, выходит за рамки обычного пользователя Excel.

Power Fx связывает объекты вместе с декларативными формулами, подобными электронным таблицам. Например, представьте свойство Visible элемента управления пользовательского интерфейса как ячейку на листе Excel со связанной формулой, которая вычисляет его значение на основе свойств других элементов управления. Логика формулы автоматически пересчитывает значение, аналогично тому, как это делает электронная таблица, что влияет на видимость элемента управления.

Кроме того, Power Fx при необходимости предлагает императивную логику. На листах обычно нет кнопок, которые могут отправлять изменения в базу данных, но в приложениях они часто есть. Один и тот же язык выражений используется как для декларативной, так и для императивной логики.

Power Fx будет доступен как программное обеспечение с открытым исходным кодом. В настоящее время он интегрирован в приложения на основе холста, и мы извлекаем его из Power Apps для использования в других продуктах Microsoft Power Platform и в качестве открытого исходного кода. Дополнительная информация: Microsoft Power Fx на GitHub

Эта статья представляет собой обзор языка и принципов его разработки. Чтобы узнать больше о Power Fx, см. следующие статьи:

• Типы данных
• Операторы и идентификаторы
• Таблицы
• Переменные
• Императивная логика
• Глобальная поддержка
• Грамматика выражений
• Грамматика формулы YAML

Думайте о электронной таблице

Что, если бы вы могли создать приложение так же просто, как рабочий лист в Excel?

Что, если бы вы могли воспользоваться своими знаниями в области электронных таблиц?

Эти вопросы вдохновили на создание Power Apps и Power Fx. Сотни миллионов людей ежедневно создают рабочие листы в Excel; давайте обеспечим им простое создание приложений с использованием знакомых им концепций Excel. Отделив Power Fx от Power Apps, мы собираемся ответить на эти вопросы об автоматизации построения, виртуальном агенте или других областях.

Все языки программирования, включая Power Fx, имеют выражения : способ представления вычислений над числами, строками или другими типами данных. Например, масса * ускорение на большинстве языков выражает умножение массы на и ускорения на . Результат выражения можно поместить в переменную, использовать в качестве аргумента процедуры или вложить в большее выражение.

Power Fx делает еще один шаг вперед. Выражение само по себе ничего не говорит о том, что оно вычисляет. Создатель должен поместить его в переменную или передать функции. В Power Fx вместо того, чтобы просто написать выражение, не имеющее конкретного значения, вы пишете формула , которая связывает выражение с идентификатором. Вы пишете сила = масса * ускорение в качестве формулы для расчета сила . При изменении массы или ускорения сила автоматически обновляется до нового значения. Выражение описывало вычисление, формула давала этому вычислению имя и использовала его как рецепт. Вот почему мы называем Power Fx языком формул .

Например, эта формула из Stack Overflow ищет строку в обратном порядке. В Excel это выглядит следующим образом.

Скриншот строки формул в Excel с формулой: =ВПРАВО(A1,ДЛИН(A1)- НАЙТИ("|", ПОДСТАВИТЬ(A1," ","|", ДЛСТР(A1)-ДЛСТР(ЗАМЕНИТЬ(A1," ","")))) Ячейка A1 содержит текст «Привет, мир! Приятно познакомиться!» Ячейка A2 содержит текст «вы!»

Power Fx работает по той же формуле, но ссылки на ячейки заменены ссылками на свойства управления:

Снимок экрана строки формул Power Fx в Power Apps. Формула =ВПРАВО(Ввод.Текст,Длина(Ввод.Текст)- НАЙТИ("|", ПОДСТАВИТЬ(Ввод. Текст," ","|", Лен(Ввод.Текст)-Лен(Подстановка(Ввод.Текст," ","")))) В поле ввода под формулой появится текст «Привет, мир! Приятно познакомиться!» появляется, буква за буквой. В то же время в поле Метка появляются буквы последнего слова. Когда в поле ввода появится полный текст, слово «вы!» появится в поле Метка.

При изменении значения элемента управления Input элемент управления Label автоматически пересчитывает формулу и показывает новое значение. Здесь нет обработчиков событий OnChange , которые были бы распространены в других языках.

Другой пример, в котором используется формула для Заливки цвета экрана. При изменении ползунков, управляющих красным, зеленым и синим цветом, цвет фона автоматически изменяется по мере его пересчета.

Нет событий OnChange для ползунковых элементов управления, как это было бы распространено в других языках. Невозможно явно установить значение свойства Fill . Если цвет не работает должным образом, вам нужно взглянуть на эту формулу, чтобы понять, почему она не работает. Вам не нужно искать в приложении фрагмент кода, который устанавливает свойство в неожиданное время; нет элемента времени. Правильные значения формулы всегда сохраняются.

Поскольку ползунки установлены на темный цвет, метки для красного, зеленого и синего меняют цвет на белый для компенсации. Это делается с помощью простой формулы для свойства Color для каждого элемента управления надписями.

Что хорошо в этом, так это то, что он изолирован от того, что происходит с цветом Fill : это два совершенно разных расчета. Вместо больших монолитных процедур логика Power Fx обычно состоит из множества независимых формул меньшего размера. Это упрощает их понимание и позволяет вносить улучшения, не нарушая существующей логики.

Power Fx является декларативным языком, как и Excel. Создатель определяет, какое поведение они хотят, но система должна определить и оптимизировать, как и когда это сделать. Чтобы сделать это практичным, большая часть работы выполняется с помощью чистых функций без побочных эффектов, что делает Power Fx также функциональным языком (опять же, как и Excel).

Всегда активны

Отличительной чертой рабочих листов является то, что они всегда активны, а изменения отражаются мгновенно. На рабочем листе нет режима компиляции или запуска. Когда формула изменяется или вводится значение, рабочий лист немедленно пересчитывается, чтобы отразить изменения. Любые обнаруженные ошибки немедленно отображаются и не мешают остальной части рабочего листа.

То же самое реализовано в Power Fx. Инкрементный компилятор используется для постоянной синхронизации программы с данными, с которыми она работает. Изменения автоматически распространяются через график программы, влияя на результаты зависимых вычислений, которые могут управлять свойствами элементов управления, такими как цвет или положение. Инкрементный компилятор также предоставляет широкие возможности редактирования формул с помощью IntelliSense, предложений, автозаполнения и проверки типов.

На анимации ниже номер заказа отображается в элементе управления меткой, зависящем от ползунка, несмотря на то, что на метках под ним есть две ошибки. Приложение очень живое и интерактивное. Первая попытка исправить формулу вводом .InvalidName приводит к немедленной красной строке и отображению ошибки, как и должно быть, но приложение продолжает работать.

При вводе .Employee это приводит к тому, что панель данных добавляет таблицу «Сотрудники», извлекаются метаданные для этой таблицы и немедленно предлагаются варианты столбцов. Мы просто перешли связь из одной таблицы в другую, и система внесла необходимые коррективы в ссылки приложения. То же самое происходит при добавлении .Клиент .

После каждого изменения ползунок сохраняет свое последнее значение, и все переменные сохраняют свое значение. На протяжении всего времени номер заказа продолжал отображаться на верхней этикетке, как и должно быть. Приложение все время работало, обрабатывая реальные данные. Мы можем сохранить его, уйти, а другие могут открыть и использовать его так же, как Excel. Здесь нет этапа сборки, нет компиляции, есть только этап публикации, чтобы определить, какая версия приложения готова для пользователей.

Младший код

Power Fx описывает бизнес-логику в кратких, но мощных формулах. Большую часть логики можно свести к одной строке с большим количеством выразительности и контроля для более сложных нужд. Цель состоит в том, чтобы свести к минимуму количество концепций, которые должен понимать производитель, — в идеале не больше, чем пользователь Excel уже должен знать.

Например, чтобы найти имя сотрудника для заказа, вы пишете Power Fx, как показано на следующей анимации. Помимо концепций Excel, единственная добавленная концепция, используемая здесь, — это точка 9.0010 "." Нотация для детализации структуры данных, в данном случае .Employee.'First Name' . Анимация показывает сопоставление между частями формулы Power Fx и концепциями, которые необходимо явно закодировать в эквивалентном JavaScript.

Давайте более подробно рассмотрим все то, что Power Fx делает для нас, и свободу, которую он имеет для оптимизации, поскольку формула была декларативной: . Создателю не нужно указывать это, и ему не нужно синхронизировать операции после завершения вызова. Создателю вообще не нужно знать об этой концепции, ему не нужно знать, что такое обещание или лямбда-функция.

Без кода

Вам не нужно читать и писать Power Fx, чтобы начать выражать логику. Существует множество настроек и логики, которые можно выразить с помощью простых переключателей и конструкторов пользовательского интерфейса. Эти инструменты без кода были созданы для чтения и записи Power Fx, чтобы гарантировать, что у кого-то будет достаточно места для дальнейшего развития, признавая при этом, что инструменты без кода никогда не предложат всю выразительность полного языка. Даже при использовании со сборщиками без кода панель формул находится в центре Power Apps, чтобы информировать создателей о том, что делается от их имени, чтобы они могли начать изучать Power Fx.

Давайте рассмотрим несколько примеров. В Power Apps панель свойств содержит переключатели и ручки без кода для свойств элементов управления. На практике большинство значений свойств являются статическими. Вы можете использовать построитель цветов, чтобы изменить цвет фона галереи . Обратите внимание, что строка формул отражает это изменение, обновляя формулу до другого вызова RGBA . В любой момент вы можете перейти к строке формул и сделать еще один шаг — в этом примере, используя ColorFade для настройки цвета. Свойство цвета по-прежнему отображается на панели свойств, но при наведении курсора появляется значок fx , и вы перенаправляетесь в строку формул. Это полностью работает двумя способами: удаление вызова ColorFade возвращает цвет к тому, что может понять панель свойств, и вы можете использовать его снова, чтобы установить цвет.

Вот более сложный пример. В галерее представлен список сотрудников Dataverse. Dataverse обеспечивает просмотр данных таблицы. Мы можем выбрать одно из этих представлений, и формула изменится, чтобы использовать Функция фильтра с этим именем представления. Два раскрывающихся меню можно использовать для выбора нужной таблицы и просмотра, не касаясь строки формул. Но допустим, вы хотите пойти дальше и добавить сортировку. Мы можем сделать это в строке формул, и панель свойств снова покажет значок fx и направит изменения в строку формул. И снова, если мы упростим формулу до того, что панель свойств сможет читать и записывать, ее снова можно будет использовать.

Это были простые примеры. Мы считаем, что Power Fx — отличный язык для описания взаимодействий без кода. Он лаконичен, мощен и прост в анализе, а также обеспечивает достаточный запас, который так часто необходим, с «отсутствием обрывов» вплоть до low-code.

Код Pro

Создатели low-code иногда создают вещи, которые требуют помощи эксперта или передаются профессиональным разработчикам для поддержки и улучшения. Профессионалы также понимают, что разработка с низким кодом может быть проще, быстрее и дешевле, чем создание профессионального инструмента. Не во всех ситуациях требуются все возможности Visual Studio.

Профессионалы хотят использовать профессиональные инструменты для максимальной производительности. Формулы Power Fx могут храниться в исходных файлах YAML, которые легко редактировать с помощью Visual Studio Code, Visual Studio или любого другого текстового редактора и позволяют помещать Power Fx в систему контроля версий с помощью GitHub, Azure DevOps или любого другого исходного кода. система контроля.

Power Fx поддерживает компоненты на основе формул для совместного использования и повторного использования. Мы объявили о поддержке параметров для свойств компонентов, что позволяет создавать чисто пользовательские функции с дальнейшими улучшениями.

Кроме того, Power Fx отлично подходит для объединения компонентов и услуг, созданных профессионалами. Стандартные соединители обеспечивают доступ к сотням источников данных и веб-служб, настраиваемые соединители позволяют Power Fx взаимодействовать с любой веб-службой REST, а компоненты кода позволяют Power Fx взаимодействовать с полностью настраиваемым JavaScript на экране и странице.

Простой

Power Fx предназначен для целевой аудитории разработчиков, члены которой не прошли обучение в качестве разработчиков. Везде, где это возможно, мы используем знания, которые эта аудитория уже знает или может быстро усвоить. Количество концепций, необходимых для успеха, сведено к минимуму.

Быть простым полезно и для разработчиков. Для аудитории разработчиков мы стремимся быть языком с низким кодом, который сокращает время, необходимое для создания решения.

Консистенция Excel

Язык Microsoft Power Fx во многом заимствован из языка формул Excel. Мы стремимся использовать знания и опыт Excel многих производителей, которые также используют Excel. Типы, операторы и семантика функций максимально приближены к Excel.

Если у Excel нет ответа, мы затем обращаемся к SQL. SQL является следующим наиболее часто используемым декларативным языком после Excel и может предоставить рекомендации по операциям с данными и строгой типизации, которых нет в Excel.

Декларативный

Создатель описывает что они хотят, чтобы их логика делала, не совсем то, как или когда это делать. Это позволяет компилятору выполнять оптимизацию, выполняя операции параллельно, откладывая работу до тех пор, пока она не понадобится, а также предварительно извлекая и повторно используя кэшированные данные.

Например, на листе Excel автор определяет отношения между ячейками, но Excel решает, когда и в каком порядке оцениваются формулы. Точно так же формулы в приложении можно рассматривать как «пересчет» по мере необходимости на основе действий пользователя, изменений в базе данных или событий таймера.

Функциональный

Мы предпочитаем чистые функции, не имеющие побочных эффектов. Это приводит к более простой для понимания логике и дает компилятору больше свободы для оптимизации.

В отличие от Excel, приложения по своей природе изменяют состояние — например, в приложениях есть кнопки, которые сохраняют изменения в записи в базе данных. Поэтому некоторые функции имеют побочные эффекты, хотя мы ограничиваем их настолько, насколько это практически возможно.

Состав

Там, где это возможно, добавленная функциональность хорошо сочетается с существующей функциональностью. Мощные функции можно разбить на более мелкие части, которые легче использовать независимо друг от друга.

Например, элемент управления Галерея не имеет отдельных свойств Сортировка и Фильтр . Вместо этого функции Sort и Filter объединены в одно свойство Items . Пользовательский интерфейс для выражения поведения Sort и Filter накладывается поверх свойства Items с помощью двустороннего редактора для этого свойства.

Строго типизированный

Типы всех значений известны во время компиляции. Это позволяет на раннем этапе обнаруживать ошибки и предлагать подробные предложения во время разработки.

Поддерживаются полиморфные типы, но прежде чем их можно будет использовать, их тип должен быть прикреплен к статическому типу, и этот тип должен быть известен во время компиляции. Функции IsType и AsType предназначены для типов тестирования и литья.

Вывод типа

Типы выводятся из их использования без объявления. Например, установка переменной в число приводит к тому, что тип переменной устанавливается как число.

Использование конфликтующего типа приводит к ошибке времени компиляции.

Десятичные разделители с учетом региональных настроек

В некоторых регионах мира в качестве десятичного разделителя используется точка ( . ), а в других — запятая ( , ). Это то, что делает Excel. Это обычно не делается в других языках программирования, которые обычно используют каноническую точку ( . ) в качестве десятичного разделителя для всех пользователей по всему миру. Чтобы быть максимально доступным для производителей всех уровней, важно, чтобы 3,14 было десятичным числом для человека во Франции, который использовал этот синтаксис всю свою жизнь.

Выбор десятичного разделителя оказывает каскадное влияние на разделитель списка, используемый для аргументов вызова функции, и оператор цепочки.

Десятичный разделитель авторского языка	Десятичный разделитель Power Fx	Разделитель списка Power Fx	Цепной оператор Power Fx
. (точка)	. (точка)	, (запятая)	; (точка с запятой)
, (запятая)	, (запятая)	; (точка с запятой)	;; (двойная точка с запятой)

Дополнительная информация: Глобальная поддержка

Не объектно-ориентированный

Excel не является объектно-ориентированным, как и Power Fx. Например, в некоторых языках длина строки выражается как свойство строки, например "Hello World".length в JavaScript. Excel и Power Fx вместо этого выражают это с точки зрения функции, как Len("Hello World") .

Компоненты со свойствами и методами являются объектно-ориентированными, и Power Fx легко с ними работает. Но там, где это возможно, мы предпочитаем функциональный подход.

Расширяемый

Создатели могут создавать свои компоненты и функции с помощью самого Power Fx. Разработчики могут создавать свои компоненты и функции, написав JavaScript.

Подходит для разработчиков

Хотя производители являются нашей основной целью, мы стараемся быть дружественными к разработчикам везде, где это возможно. Если это не противоречит принципам проектирования, описанным ранее, мы делаем вещи так, чтобы разработчик это оценил. Например, в Excel нет возможности добавлять комментарии, поэтому мы используем строчные и встроенные комментарии в стиле C.

Развитие языков

Развитие языков программирования необходимо и сложно. Все справедливо обеспокоены тем, что изменение, каким бы благонамеренным оно ни было, может нарушить существующий код и потребовать от пользователей изучения нового шаблона. Power Fx серьезно относится к обратной совместимости, но мы также твердо верим, что не всегда сможем сделать все правильно с первого раза, и мы вместе узнаем, что лучше, как сообщество. Мы должны развиваться, и Power Fx с самого начала разработала поддержку эволюции языка.

Штамп версии языка прилагается к каждому сохраняемому документу Power Fx. Если мы хотим внести несовместимое изменение, мы напишем то, что мы называем «преобразователь обратной совместимости», который автоматически переписывает формулу при следующем редактировании. Если изменение является чем-то значительным, о чем нам нужно сообщить пользователю, мы также отобразим сообщение со ссылкой на документы. Используя это средство, мы по-прежнему можем загружать приложения, созданные с помощью предварительных версий Power Apps много лет назад, несмотря на все изменения, произошедшие с тех пор.

Например, мы представили функцию ShowError для отображения сообщения об ошибке на красном фоне.

Пользователям это понравилось, но они также попросили нас показать способ показа баннера успеха (зеленый фон) или информационного баннера (синий фон). Итак, мы придумали более общую функцию Notify , которая принимает второй аргумент для типа уведомления. Мы могли бы просто добавить Notify и оставить ShowError как было, но вместо этого мы заменили ShowError с Уведомить . Мы удалили функцию, которая ранее была в продакшене, и заменили ее чем-то другим. Поскольку было бы два способа сделать одно и то же, это вызвало бы путаницу, особенно у новых пользователей, и, самое главное, добавило бы сложности. Никто не жаловался, все оценили изменение, а затем перешли к следующей функции уведомлений.

Так выглядит то же приложение при загрузке в последнюю версию Power Apps. От пользователя не требовалось никаких действий, чтобы это преобразование произошло, оно произошло автоматически при открытии приложения.

Благодаря этому средству Power Fx может развиваться быстрее и агрессивнее, чем большинство языков программирования.

Нет неопределенного значения

В некоторых языках, таких как JavaScript, используется концепция неопределенного значения для неинициализированных переменных или отсутствующих свойств.