Dash — передовой web‑фреймворк Python

Библиотека пользовательского интерфейса

Посмотрите на эти великолепные web‑приложения, где вы изменяя состояние элементов в окне своего браузера, управляете картинкой, в том числе, и отображением актуальной информации в реальном времени:

1. Интерактивная карта изменения границ России на протяжении веков;
2. Живая карта;
3. Экспедиция Хритофора Колумба и Васко де Гама;
4. Александр Македонский;
5. Карта семантических полей мозга;
6. 3D‑карта загрязнения воздуха на планете в реальном времени;
7. What can a technologist do about climate change? A personal view.

Одним из инструментов подобного рода шедевров является Dash — библиотека пользовательского интерфейса для создания аналитических веб-приложений. Те, кто использует Python для анализа данных, исследования данных, визуализации, моделирования, управления приборами и отчетности, сразу же найдут применение для Dash.

Dash убийственно просто позволяет построить графический интерфейс в вашем коде анализа и обработки данных. Вот 43‑строчный пример приложения Dash, которое связывает выпадающее меню с графиком. Когда пользователь выбирает значение в раскрывающемся списке, код приложения динамически экспортирует данные из Google Finance^એ в фрейм данных Pandas. Это приложение было написано всего в 43 строках кода, (посмотрите ). Все просто.

Код приложения Dash является декларативным, что позволяет легко создавать сложные приложения, содержащие множество интерактивных элементов. Вот пример с 5 элементами управления, 3 диаграммами и перекрестной фильтрацией. Для реализации этого приложения потребовалось всего около 160 строчек кода на Python^એ.

Каждый эстетический элемент приложения настраивается: размер, позиционирование, цвета, шрифты. Приложения Dash создаются и публикуются в интернете, поэтому доступна полная мощность CSS. Вот пример интерактивного приложения для отчетов Dash, выполненного в фирменном стиле отчета Goldman Sachs^એ, где без CSS просто невозможно.

Dash‑приложения просматриваются в веб-браузере, но вам не надо писать никаких Javascript или HTML. В Dash есть полный интерфейс Python для богатого набора интерактивных веб-компонентов.

import dash_core_components as dcc

dcc.Slider(value=4, min=-10, max=20, step=0.5,
    labels={-5: '-5 Degrees', 0: '0', 10: '10 Degrees'})

Для привязки пользовательского кода анализа данных к пользовательскому интерфейсу в Dash используется простой реактивный декоратор.

@dash_app.callback(Output('graph-id', 'figure'),
    [Input('slider-id', 'value')])

def your_data_analysis_function(new_slider_value):
    new_figure = your_compute_figure_function(new_slider_value)
    return new_figure

Когда элемент управления изменяет своё состояние (например, вы открыли раскрывающийся список или перетаскиваете ползунок), декоратор Dash передаёт вашему коду Python новое значение элемента управления.

С этим новым значением ваша функция Python может делать все, что угодно: фильтровать DataFrame Pandas, сделать SQL‑запрос, запустить моделирование, выполнить расчет или начать эксперимент. Dash ожидает, что в результате ваша функция вернет какое-то новое свойство некоторого элемента в пользовательском интерфейсе, будь то новый график, новая таблица или новый элемент текста.

Например, вот простое Dash‑приложение, которое обновляет текстовое поле при взаимодействии с Graph элементом. Код приложения фильтрует данные в DataFrame Pandas, используя значение в текущей выбранной точке.

Следующее Dash‑приложение отображает мета-информацию о наркотиках при наведении курсора мыши на точки в Graph элементе. Код приложения также добавляет строки в Table компонент, когда элементы добавляются в мульти Dropdown элемент.

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

Архитектура

Flask & React

Dash‑приложения — это веб-серверы, работающие под управлением Flask и передающие пакеты JSON^એ в запросах HTTP^એ. Внешний интерфейс Dash отображает компоненты с помощью React.js^એ, библиотеки пользовательского интерфейса Javascript, написанной и поддерживаемой Facebook^એ.

Flask (веб-фреймворк)^એ — это классно. Он с радостью принят сообществом Python и повсюду развернут в production. Базовый экземпляр Flask и все его настраиваемые свойства доступны разработчикам приложений Dash. Продвинутые смогут расширить приложения Dash с помощью богатого набора плагинов Flask.

React.js^એ так-же фантастичен. В Plotly была переписана вся веб‑платформа и онлайн-редактор диаграмм на React. Одна из невероятных вещей, связанных с React — это плодовитость и талант участников сообщества. Open source сообщество React опубликовало тысячи высококачественных интерактивных компонентов: от раскрывающихся списков до ползунков, от подборщиков календарей до интерактивных таблиц.

Dash использует силу Flask и React, включая их в обработку данных Python аналитиками c не богатым опытом веб‑разработки.

От React.js к Python Dash-компонентам

Компоненты Dash — это классы Python, которые кодируют свойства и значения конкретного компонента React и сериализуются как JSON. Dash предоставляет набор инструментов для быстрого пакетирования компонентов React (написанных на Javascript) в качестве компонентов, которые могут быть использованы в Dash. Эта группа инструментов использует динамическое программирование для автоматического генерирования стандартных классов Python из аннотированных React propTypes. Полученные классы Python, представляющие компоненты Dash, удобны для пользователя: они поставляются с автоматической проверкой аргументов, записями документов и т. д.

Вот пример проверки динамически генерируемого аргумента:

>>> import dash_core_components as dcc

>>> dcc.Dropdown(valu=3)

Exception: Unexpected keyword argument 'valu'
Allowed arguments: id, className, disabled, multi, options, placeholder, value

и пример динамически генерируемых компонентов docstrings:

>>> help(dcc.Dropdown)

class Dropdown(dash.development.base_component.Component)
 | A Dropdown component. 
 | Dropdown is an interactive dropdown element for selecting one or more
 | items. 
 | The values and labels of the dropdown items are specified in the 'options'
 | property and the selected item(s) are specified with the 'value' property. 
| 
 | Use a dropdown when you have many options (more than 5) or when you are
 | constrained for space. Otherwise, you can use RadioItems or a Checklist,
 | which have the benefit of showing the users all of the items at once. 
/ 
 | Keyword arguments:
 | - id (string; optional)
 | - className (string; optional)
 | - disabled (boolean; optional): If true, the option is disabled
 | - multi (boolean; optional): If true, the user can select multiple values
 | - options (list; optional)
 | - placeholder (string; optional): The grey, default text shown when no option is selected
 | - value (string | list; optional): The value of the input. If 'multi' is false (the default)
 | then value is just a string that corresponds to the values
 | provided in the 'options' property. If 'multi' is true, then
 | multiple values can be selected at once, and 'value' is an
 | array of items with values corresponding to those in the
 | 'options' prop. 
| 
 | Available events: 'change

Полный набор HTML-тегов, например, div, img, table также отображается динамически с помощью React, и их классы Python доступны через dash_html_component библиотеку. Основной набор интерактивных компонентов, таких как, Dropdown, Graph, Slider будет поддерживаться командой Dash core через библиотеку dash_core_components. Обе эти библиотеки используют стандартную цепочку инструментов React-to-Dash с открытым исходным кодом, которую можно использовать, если вы захотите написать свою собственную библиотеку компонентов.

Вы не привязаны к стандартной библиотеке компонентов Dash. Библиотеки компонентов Dash импортируются отдельно от основной библиотеки. С помощью цепочки инструментов React-to-Dash вы можете легко написать или перенести React.компонент js в класс Python, который можно использовать в своём приложении Dash. Вот учебник по созданию собственных компонентов или команда Dash, которая всегда рада помочь и сделать для вас что-то абсолютно оригинальное.

Параллельные многопользовательские приложения

Состояние приложения Dash хранится во внешнем интерфейсе (т. е. в веб-браузере). Это позволяет использовать приложения Dash одновременно несколькими пользователями, создавая независимые сеансы при одновременном взаимодействии. Dash‑код приложения является функциональным и ваш код имеет доступ к значениям глобального состояния Python, однако, не может их изменить. Такой функциональный подход легко понять и проверить — это просто элементы управления и элементы отображения без побочных эффектов или состояний.

CSS и стили по умолчанию

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

Визуализация данных

В Dash включён компонент Graph, который отображает диаграммы с помощью plotly.js. Plotly.js отлично подходит для Dash — декларативный, с открытым исходным кодом, быстрый и поддерживает полный спектр научных, финансовых и бизнес‑диаграмм. Plotly.js построен поверх D3.js (для качественной публикации, векторизованного экспорта изображений) и WebGL^એ (для высокопроизводительной визуализации).

Компонент Graph имеет тот же синтаксис, что и библиотека с открытым кодом plotly.py, так что вы можете легко переключаться между ними. Компонент Graph Dash подключается к plotly.js через события js, и позволяет писать приложения, реагирующие на наведение курсора, щелчок мыши или выбор точки на графике.

Репозитарии с открытым исходным кодом

Вы можете проверить код самостоятельно в нескольких репозиториях.:

• Dash backend;
• Dash frontend;
• Библиотека ядра компонентов Dash;
• Библиотека HTML компонентов Dash;
• Компоненты архитектуры (React-to-Dash toolchain);
• Документация Dash и руководство пользователя;
• Plotly.js — графическая библиотека, использованная в Dash.

До нашей эры

Dash — новинка в экосистеме Python, но концепции и мотивы Dash существуют на протяжении десятилетий в различных языках и приложениях.

Если вы хотите что-то лучшее, чем Excel^એ, то ваша голова в нужном месте и работает в нужном направлении. И Dash, и Excel используют «реактивную» модель программирования. В Excel все ячейки обновляются автоматически при изменении в одной из них. Вот пример приложения Excel:

По аналогии с Excel в Dash вместо ячеек у нас есть множество управляющих веб-компонентов, таких как слайдеры, ячейки данных, выпадающие списки и графики. Вместо того чтобы писать сценарии, как в Excel или VBA, мы пишем код Python. Вот то же самое приложение для работы с электронными таблицами, переписанное в Dash:

app.layout = html.Div([
    html.Label('Hours per Day'),
    dcc.Slider(id='hours', value=5, min=0, max=24, step=1),
html.Label('Rate'),
    dcc.Input(id='rate', value=2, type='number'),
html.Label('Amount per Day'),
    html.Div(id='amount'),
html.Label('Amount per Week'),
    html.Div(id='amount-per-week')
])
@app.callback(Output('amount', 'children'),
              [Input('hours', 'value'), Input('rate', 'value')])
def compute_amount(hours, rate):
    return float(hours) * float(rate)
@app.callback(Output('amount-per-week', 'children'),
              [Input('amount', 'children')])
def compute_amount(amount):
    return float(amount) * 7

И посмотрите, как оно теперь выглядит:

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

Более того, электронные таблицы Excel частенько легче распространить, чем программы Python, а ячейки Excel легче редактировать, чем аргументы командной строки.

Тем не менее, моделирование в Excel имеет хорошо известные ограничения: таблицы часто перерастают сами себя. Они становятся слишком большими или слишком хрупкими для миграции в производственную среду, для рецензирования, тестирования и обслуживания. Помните опечатку 2013 года про экономию в Excel?

---

Если в бизнес-аналитике вы полагаетесь на язык программирования R, то вам повезло. Shiny — среда для генерации веб-приложений на чистом R великолепна! Вы даже можете создавать интерактивную графику с библиотекой Plotly’s R Shiny. Dash и Shiny похожи, но Dash не стремится быть точной копией Shiny. Идиомы и философии между Python и R достаточно различны, чтобы гарантировать иной синтаксис.

---

Если вы программируете в MATLAB, то можете быть знакомы с руководством по библиотеке пользовательского интерфейса MATLAB «GUIDE». Mathworks^એ был одним из подлинных новаторов в области технических вычислений — «GUIDE» было написано в 2004 году, 15 лет назад!

---

Если вы работаете с базами данных, то, возможно, используете Tableau или другие похожие инструменты бизнес-аналитики. Tableau невероятен. Он оправдал новые ожидания в отрасли — конечные пользователи должны иметь автономию и инструменты для исследования данных своей организации. Он помог популяризировать концепции «детализации» и перекрестной фильтрации.

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

---

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

Виджеты в Dash похожи на виджеты в Jupyter. В Jupyter Notebooks вы можете добавлять виджеты прямо рядом со своим кодом. В Dash элементы управления и приложения хранятся отдельно от кода. Dash больше ориентирован на разделяемые приложения, чем на разделяемый код и ноутбуки. Вы всегда можете смешивать и сочетать инструменты и писать свои Dash-приложения в среде Jupyter Notebook.

Честь и хвала проекту nteract, который действительно снижает барьер для входа на ноутбуки Python и Jupyter, заключая Jupyter Notebook и настольное приложение.

---

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

Дополнительные ресурсы и ссылки

1. Вся документация Dash по адресу https://plot.ly/dash;
2. Вся наша работа с открытым исходным кодом находится на GitHub по адресу https://github.com/plotly.

Если вы ищете вдохновение в построении пользовательских интерфейсах для технических вычислений, я настоятельно рекомендую эссе Брета Виктора о том, «What can a technologist do about climate change? A personal view» В частности, разделы Languages for technical computing и Model-driven debate.

Источник вдохновения: Introducing Dash

P.S. Большинство приведенных выше примеров проверены и хранятся на github, но прежде, чем вы их скачаете и попробуете запустить (а без этого ничему не научиться), рекомендую пройти объемный видео-курс, рассматривающий как основы языка Python, так и его специализированное применение для работы с данными. Кроме того, для освоения инструмента, с помощью которого, были проверены все упомянутые примеры, обязательно прочитайте статью «Начинаем с инструментов или как зарядить свой компьютер«.