출처
medium.com/plotly/introducing-dash-5ecf7191b503
(공식 블로그에서 더 많은 예제와 깔끔한 환경을 보실 수 있습니다.)
Pure Python 반응형 웹 어플리케이션 생성
Dash 는 반응형 웹 어플리케이션을 만들기 위한 오픈소스 파이썬 라이브러리이다.
Dash는 2년 전의 GitHub에 대한 공개적 개념 증명(proof-of-concept) 문서로 시작했다. 이 온라인 프로토타입을 유지하면서, 이후 Dash에 대한 작업은 비공개로 진행되었다.
우리는 은행, 연구실, 데이터 사이언스 팀들에게 Dash를 선공개하고 피드백을 받았다. 그리고 오늘, 우리는 엔터프라이즈 용으로 준비되었으며, Plotly의 일급 멤버인 Dash의 첫 공식 release 발표에 굉장히 신난다. Dash는 pip install dash 를 이용해서 다운로드 받을 수 있다. -이는 전체가 오픈소스이며, MIT 라이센스가 있다- Dash code와 tutorial은 여기서 볼 수 있다.
튜토리얼
open code
Dash는 데이터 분석용 웹 어플리케이션 생성을 위한 UI 라이브러리이다. 데이터 분석, 데이터 탐색, 시각화, 모델링, 계기 조종(Instrument control), 리포팅 등의 용도로 Python 쓰는 사람들이 쓸 수 있다.
Dash는 당신의 데이터 분석 코드에 대해 GUI를 오지게 쉽게 만들 수 있다. 이것은 드롭다운으로 만든 Dash App의 43줄짜리 예제이다. 사용자가 드롭다운에서 선택한 값으로 어플리케이션 코드가 즉각적으로 데이터를 추출해준다. 이 앱은 겨우 43줄로 이루어져 있다.
Dash App 코드는 선언적(declarative)이고 반응성이 강해 소통형 요소(interactive element)가 많이 포함된 복잡한 앱을 쉽게 만들 수 있다. 이 예제는 5개의 입력, 3개의 출력을 교차로 필터링(cross filtering)한다. 이 앱은 Python으로 구성된 160줄로 만들 수 있다.
앱의 모든 미적 요소는 모두 커스텀이 가능하다. 크기, 위치, 색, 폰트까지. Dash app은 웹 기반으로 구축되기 때문에, CSS를 마음껏 쓸 수 있다. 여기 예제는 Dash를 이용하여 만들어진 사용자 지정된 대화형 보고서의 예이다.
Dash app이 웹 브라우저로 서비스되도록 만들 때, 사용자는 Javascript나 HTML을 하나도 쓸 필요가 없다. Dash는 굉장히 많은 소통형 웹 기반 요소들(components)를 가진 Python 인터페이스를 제공한다.
import dash_core_components as dccdcc.Slider(value=4, min=-10, max=20, step=0.5,
labels={-5: '-5 Degrees', 0: '0', 10: '10 Degrees'})
Dash는 사용자의 데이터 분석 코드를 Dash 사용자 인터페이스에 연동하기 위한 간단한 반응형 도구(decorator)를 제공한다.
@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 함수들은 이 새로운 입력으로 뭐든 할 수 있다. Pandas dataframe 필터링이나, SQL 쿼리, 시뮬레이션 돌리기, 계산 가동하기, 실험 시작 등등. Dash는 사용자의 함수가 새로운 출력 요소가 그래프, 표, 텍스트 등의 요소로 UI로 새로운 값이 return되기를 기다릴 것이다.
여기 예시가 있다. 사용자의 입력에 반응해 text box 내부의 Graph 요소를 업데이트하는 간단한 Dash 어플리케이션이다. 이 코드는 Pandas의 DataFrame 를 이용해 사용자의 입력 포인트를 기반으로 데이터를 필터링한다.
이 Dash app은 사용자가 마우스를 올리는 좌표(hover over point)의 약물에 대한 메타 정보를 보여준다. 이 것의 코드는 드롭다운으로 다중 선택된 요소들을 Table로 볼 수 있게 해준다.
두 가지의 추상화(Python 컴포넌트/반응형 도구)를 이용하여 Dash는 소통형 웹 기반 어플리케이션을 만들기 위해 필요한 모든 기술과 프로토콜을 추상화한다. Dash는 오후 내로 사용자의 python code에 대한 UI를 만들어낼 수 있을 정도로 쉽다.
구조
Flask & React
Dash 어플리케이션은 Flask의 웹서버 구동과 JSON 패킷을 사용한 HTTP 통신을 이용한다. Dash의 프론트엔드는 Facebook이 제작한 자바스크립트 UI 라이브러리인 React.js의 컴포넌트를 이용하여 렌더링된다.
Flask는 멋지다. Python 커뮤니티에서 많이 사용되며, 어느 기기 환경에서든 올릴 수 있다(deploy). Flask의 기본 인스턴스와 구성 가능한 모든 속성은 Dash 앱 개발자가 액세스할 수 있다. 숙련된 개발자의 경우, 풍부한 플라스크 플러그인 세트를 통해서도 Dash 앱을 확장할 수 있다.
React 역시 말이 필요없다. Plotly에서, 우리는 우리의 전체 웹 플랫폼과 online 차트 편집기를 React로 새로 썼다. React의 대단한 점 중 하나는 커뮤니티가 풍부한 좋은 작품이 나온다는 것이다. 오픈 소스 React 커뮤니티는 몇 천개의 고퀄 반응형 컴포넌트를 제공한다. 드롭다운에서 슬라이더, 달력 선택기에 반응형 도표까지.
Dash는 Flask 와 React의 이점을 사용한다. 이는 Python을 사용하는 데이터 과학자들이 웹 전문가가 아니더라고 충분히 만들 수 있도록 한다.
React.js에서 Python Dash 컴포넌트까지
Dash 컴포넌트들은 특정 React 컴포넌트의 속성 및 값을 인코딩하고 JSON으로 직렬화하는 파이썬 클래스다. Dash는 손쉽게 React component를 Dash에서 사용할 수 있도록 하는 toolset을 제공한다. 이 toolset은 React propType에서 Python 클래스를 자동 생성하도록 동적 프로그래밍이 사용된다. 이렇게 얻은 Python 클래스들은 제공된 Dash 컴포넌트와 함께 사용할 수 있다. 자동적인 검증, 문서화 등을 함께할 수 있다.
github.com/plotly/dash-components-archetype
동적 생성된 검증 코드의 예시이다.
>>> import dash_core_components as dcc
>>> dcc.Dropdown(valu=3)
Exception: Unexpected keyword argument `valu`
Allowed arguments: id, className, disabled, multi, options, placeholder, value
(예제 그대로인데 맞는지 모르겠음;)
그리고 동적 생성된 컴포넌트 문서화의 예시이다.
>>> 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
(맞는지 모르겠음22)
HTML 태그를은 모두 React와 Python클래스에서 동적으로 렌더링된다. dash_html_component 라이브러리를 이용하여 사용할 수 있다. 드롭다운, 그래프, 슬라이더 같은 반응형 컴포넌트들은 dash_core_components 라이브러리에 있다. 두 라이브러리는 모두 기본 오픈소스 React-to-Dash 툴체인에 사용된다. 즉, 사용자는 직접 컴포넌트 라이브러리를 제작할 수 있다.
사용자는 기본 Dash 컴포넌트 라이브러리만 사용할 수 있는 게 아니다. Dash 컴포넌트 라이브러리는 원본에서 분리하여 import될 수 있다. React-to-Dash 툴체인과 함께하면, 쉽게 React.js의 요소를 Python 클래스로 만들어 Dash 어플리케이션을 커스텀할 수 있다.
튜토리얼: plot.ly/dash/plugins
컨설팅: plot.ly/products/consulting-and-oem/
동시성: 멀티 유저 어플리케이션
Dash 어플리케이션의 상태는 모두 프론트엔드에 저장된다. 이것은 multitenant 세팅에 사용될 수 있도록 한다. 다중의 사용자들이 Dash 앱을 동시에 접근하는 동안, 독립적인 세션을 가진다. Dash 어플리케이션 코드는 함수적이다.(functional) 사용자의 어플리케이션 코드는 파이썬 상태에서 나온 값을 읽을 순 있지만, 이를 직접 바꿀 순 없다. 이러한 함수적 접근은 이해하기가 쉽고, 테스팅에 유리하다. 이것은 그저 입출력일 뿐, 아무 반작용이 없다.
CSS와 기본 스타일
CSS과 기본 스타일은 모듈화/독립적 버전 생성/커스터마이징 격려 를 위해 기본 라이브러리에 포함되어 있지 않다. Dash 개발자들은 대신 스타일 가이드를 제공한다.
스타일 가이드: codepen.io/chriddyp/pen/bWLwgP
데이터 시각화
Dash는 plotly.js에서 렌더링된 그래프와 차트 컴포넌트를 사용할 수 있다. Ploty.js는 Dash와 찰떡이다. 선언적이고 오픈 소스이면서 빠르다. 게다가 전 범위의 과학, 재무 및 비즈니스 차트를 지원한다. Plotly.js는 D3.js와 WebGL의 위에 빌드되어 있다.
Dash의 그래프 요소는 Plotly.py 오픈소스 라이브러리와 같은 문맥을 지닌다. 그래서 두 개를 바꿔 사용해도 된다. Dash의 그래프 컴포넌트는 plotly.js의 이벤트 시스템을 걸 수 있고, Dash app 개발자는 Plotly 그래프에 대해 마우스 움직임(hovering), 클릭, 좌표 선택 등에 웹페이지를 반응시킬 수 있다.
오픈 소스 Repo
- Dash backend: https://github.com/plotly/dash
- Dash frontend: https://github.com/plotly/dash-renderer
- Dash core component library: https://github.com/plotly/dash-core-components
- Dash HTML component library: https://github.com/plotly/dash-html-components
- Dash component archetype (React-to-Dash toolchain): https://github.com/plotly/dash-components-archetype
- Dash docs and user guide: https://github.com/plotly/dash-docs, hosted at https://plot.ly/dash
- Plotly.js — the graphing library used by Dash: https://github.com/plotly/plotly.js
Prior Art
Dash는 Python 생태계에 처음이지만, 컨셉과 사용 동기는 몇 십년 전 부터 다양한 언어와 어플리케이션의 형태로 존재하였다.
만약 Excel 사용자라면, 제대로 찾아온 것이 맞다. Excel과 Dash는 모두 반응형 프로그래밍 모델이다. Excel에선 입력창이 바뀔 때, 출력창이 자동적으로 업데이트된다. 어떤 셀도 입력창이 될 수 있고, 출력창이 될 수도 있으며, 둘 다 될 수 있다. 입력창은 어떤 출력창이 자신에게 의존하는지 알지 못하기 때문에 새로운 출력 셀을 쉽게 추가하거나 일련의 셀을 체인으로 묶을 수 있다.
Excel "응용프로그램"의 예시이다.
이것은 Dash를 위한 Excel화이다. 셀 대신 슬라이더, 입력창, 드롭다운, 그래프와 같은 풍부한 웹 기반 컴포넌트로 제작할 수 있다. Excel이나 VBA script 대신, 우리는 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에서의 모델링은 한계가 있다. 이러한 스프레드 시트는 확장하지 못하는 경우가 생긴다. 그것들은 너무 크거나 취약해져서 생산 환경, 동료 검토, 시험 및 유지관리로 이동하지 못한다.
저자는 Dash가 Data project에 Python을 사용하는 개발자들이 그것을 더 쉽게 만들어주길 희망한다. 같은 함수적이고 반응형의 원칙들을 공유하며, Dash app을 분석 용도의 스프레드 시트처럼 사용할 수 있기를 바란다. 확실히 더욱 강력하고 어필이 될 것이다.
R을 사용하는 프로그래머라면, 운이 좋았다! Shiny 역시 R을 이용한 웹 어플리케이션을 생성하는 반응형 프로그래밍 프레임 워크로, 아주 멋지다! Plotly R library와 함꼐 Shiny의 소통형 그래프를 생성할 수 있다. Dash와 Shiny는 매우 비슷하지만, Dash는 Shiny의 복제품은 아니다. Python과 R은 둘의 용어과 철학이 확연히 달라, 다른 구문 역시 모두 다르기 때문이다.
Matlab 사용자라면, Matlab UI 라이브러리 "GUIDE"와 더 친숙할 것이다. Mathworks는 진정한 컴퓨팅 기술 발명가 중 하나이다. -GUIDE는 2004년, 13년 전에 제작되었다.
만약 데이터베이스를 이용하여 데이터를 구축했다면, Tableau를 사용하거나 다른 BI 도구를 사용할 수도 있다. Tableau는 굉장하다. 그들은 최종 사용자가 조직의 데이터를 탐색할 수 있는 자율성과 도구를 가져야 한다는 업계에 새로운 기대를 걸었다. 또한, 그들은 "드릴다운"과 크로스필터링의 개념을 대중화하는 데 도움을 주었다.
Dash는 BI 도구로서 다른 이들처럼 완벽하다. 이러한 도구들은 설계된 데이터에 잘 맞는다. 그러나 데이터의 변경과 분석이 닥치면, Python과 같은 프로그래밍 언어의 유연성과 커뮤니티의 폭을 기대할 수 없다. Dash는 UI 빌딩, 사용자 커스텀 데이터 분석 백엔드에 대해 아름다운 프론트엔드를 만드는 등의 엄청난 복잡성을 추상화한다.
마지막으로, Jupytor widget에 대해 말하고 싶다. Jupyter는 그들의 노트북 인터페이스 안에 정말 좋은 위젯 프레임워크를 제공한다. 사용자는 슬라이더를 그래프에 더해 로컬로 구동할 수 있다.
이 위젯은 Jupyter의 위젯과 비슷하다. Jupyter notebooks에서 사용자는 코드와 함께 위젯을 놓을 수 있다. Dash에서, 사용자는 제어와 어플리케이션은 코드와 분리되어있다. Dash는 공유 가능한 코드, 노트북보다 공유가능한 앱으로 맞춰져있다. 사용자는 이를 믹스 매치할 수 있으며, Dash 앱을 Jupyter Notebook환경에서 사용할 수 있다.
우리는 nteract 프로젝트의 큰 팬이다. Jupyter notebook을 로컬 어플리케이션으로 만들어, Python과 Jupyter notebook의 장벽을 확 낮춰버렸기 때문이다.
Licensing 부분은 번역하지 않았습니다. 원본을 이용하세요
너무 길어요
'본업 자연어처리 AI > 자료 번역' 카테고리의 다른 글
| DALL·E: Creating Images from Text (0) | 2021.01.18 |
|---|
