ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Dash 后端开发指南:为 Dash 框架打造全新语言后端(MAKE_A_NEW_BACK_END 全解)

Dash 后端开发指南:为 Dash 框架打造全新语言后端(MAKE_A_NEW_BACK_END 全解) 前端后端数据可视化【免费下载链接】dashData Apps Dashboards for Python. No JavaScript Required.项目地址https://gitcode.com/gh_mirrors/da/dash点击查看免费下载本指南以 Dash 官方文档 MAKE_A_NEW_BACK_END.md 为核心骨架结合本仓库Dash Python 参考实现中的源码证据系统讲解如何为 Dash 框架实现一个全新的语言后端。你将掌握Dash 组件体系的结构化序列化与资源注册机制、服务器必须实现的全部路由清单、Web 服务器选型标准以及 Dash App 对象layout / callback / run需要复刻的完整 API 面。读完本文你可以据此为 Julia、F#/.NET、R 乃至任意科学计算语言规划自己的 Dash 后端实现路径。设计哲学前端为主后端为辅Dash 作为一个框架刻意把尽可能多的工作放在前端完成这既是出于性能考量降低服务器负载、减少网络延迟也是为了让新后端更容易实现。因为框架的核心运行逻辑渲染、diff、状态管理都发生在浏览器端的 dash-renderer 中后端只需要提供“布局 JSON、依赖清单、回调执行”等少数几项服务。尽管如此Python 后端仍是事实上的规范实现——它既是最早的版本也与其前端代码位于同一仓库中。因此创建新后端的首要目标就是复刻 Python 版本的功能而非逐字匹配 Python 语法。每个后端都应当以该语言用户自然的方式实现特性但在命名与语法上尽量贴近 Python 版本是有益的便于文档互通与跨语言使用便于 Python 用户初期在数量上会远超其他语言用户在社区论坛上帮助其他语言的用户排错。仓库证据Python 后端本身已经不再是唯一选择。在 dash/backends/ 目录下除了 Flask 之外还提供了 dash/backends/_fastapi.py、dash/backends/_quart.py 与 dash/backends/ws.py 等实现且 dash/backends/base_server.py 中定义了统一的BaseDashServer抽象基类说明“同一套 Dash 核心逻辑对接不同 Web 服务器”正是当前 Python 后端正在走的路也是新语言后端可以借鉴的架构模式。Dash ComponentsReact 组件与各语言包装层组件包内到底有什么从根本上说Dash 组件就是 React 组件。以 components/dash-core-components/ 为例每个组件仓库都会生成需要提供给浏览器加载的资源一个主 JavaScript bundle如dash_core_components.js若干异步加载的子 bundleasync-*.js如 datepicker、dropdown、graph、markdown、slider、upload 等通常每个 bundle 对应一个 sourcemap*.js.map。此外还有两个仅用于生成组件的文件metadata.json对每个组件及其 React props 和 prop types 的结构化描述是各语言包装层的生成源package-info.json仓库中 package.json 的副本主要用于读取版本号。Python 包装层由 metadata 生成Python 侧的组件类大部分直接由metadata.json生成。以Checklist.py为例它是一个与 Checklist React 组件对应的类定义继承自dash.development.base_component.Componentdocstring 用 Python 语法列出全部 props 及类型例如把 array of objects 写成 list of dicts构造函数保证只能用合法 props 创建实例。生成逻辑位于 dash/development/_py_components_generation.py其核心入口generate_class_string见该文件 L48-L80会动态生成带格式化 docstring、关键字参数与 repr 的类源码文件头部明确标注# AUTO GENERATED FILE - DO NOT EDIT并从 dash/development/base_component.py 导入Component基类。另有一批非生成的 Python 文件从dash_core_components_base目录直接拷贝__init__.py收集全部组件类并在_js_dist必要时还有_css_dist中显式列出所有浏览器资源。见 components/dash-core-components/dash_core_components_base/init.py通过读取package-info.json获取package_name与__version__主 bundledash_core_components.js及其.map列入_js_dist不带任何加载标志各异步子 bundle 标记为async: True其 sourcemap 标记为dynamic: True每个组件类在模块末尾通过setattr(locals()[_component], _js_dist, _js_dist)挂上资源清单。新后端的四项关键要求每个新后端都必须有自己的 React 组件包装生成方式Python 是生成源码文件其他语言可以选择生成文件或预编译对象但无论如何必须满足以下关键要求自然的数据结构创建方式为使用者提供该语言习惯的组件创建方式牢记组件可能嵌套在其他组件的childrenprop 中且多数 props 是可选的。尽力提供内建文档与 IDE 自动补全。按框架要求序列化为 JSON格式固定为{namespace: dash_core_components, type: Checklist, props: {...}}包被引入时必须“自我宣告”即在该语言中执行相当于import dash_core_components的操作时包必须让框架知道它已启用以便框架在主页面 HTML 中引入其主 JS bundle并知晓其余 JS 及相关文件的位置。关于第 4 点文档特别强调了一个细节在_js_dist中部分文件带有async: True或eager/lazy或dynamic: True标志而主 bundle 则两者皆无。新后端无需实现这套完整复杂度——只需知道忽略async: eager文件把所有带标志的其余文件都视为“不进入初始 HTML、按需提供”即可。还有两点必须注意有些包还有 CSS 文件组件要正常显示与工作必须加载它们。Python 侧将这些文件收集到_css_dist在包导入时与_js_dist一样注册给 Dash。绝不能等到包中某个组件被实例化才告知框架该包已被使用——初始页面布局非常常见地不会用到所有包中的组件。因此“包已启用”的注册必须发生在更早的时机即包导入时。新一代后端的仓库策略Python 的组件产物与 JavaScript 源码位于同一仓库R 与 Julia 目前也是同样模式但官方正在脱离该模式。新后端应当把 JavaScript bundle 复制到一个新仓库并在该新仓库中生成自己需要的其余产物。Dash 服务器路由清单必须准备的 URL 集合Dash 服务器需要服务的路由数量相对较少。想直观感受这些路由可以打开任意 Dash 应用在 Chrome DevTools 的 Elements 与 Network 面板观察页面结构与请求/响应。全部路由模式可以通过搜索主文件 dash/dash.py 中的self._add_url调用以及其上方唯一一处self.server.register_blueprint调用看到。在本仓库中路由注册集中在 dash/dash.py 的_setup_routes方法L862-L896里经由_add_urlL847-L850在统一前缀routes_pathname_prefix下拼接路由名并委托给self.backend.add_url_rule完成1. 首页 / index 路由以及未被其他路由捕获的一切路径即 catchall。该路由返回 HTML 页面骨架。Python 实现了一堆定制选项但第一版后端不必实现。基础结构见 dash/dash.py 中的_default_index模板L111-L130!DOCTYPE html html head {%metas%} title{%title%}/title {%favicon%} {%css%} /head body !--[if IE]script alert(Dash v2.7 does not support Internet Explorer. Please use a newer browser.); /script![endif]-- {%app_entry%} footer {%config%} {%scripts%} {%renderer%} /footer /body /html模板中最关键的是三个占位符{%config%}注入诸如是否显示浏览器内 devtools 等配置信息渲染为id_dash-config的节点{%scripts%}加载必要的script标签含 dash-renderer 脚本{%renderer%}初始化 Dash renderer。其余占位符{%metas%}、{%title%}、{%favicon%}、{%css%}、{%app_entry%}分别对应 meta 标签、页面标题、favicon、外部样式表与应用入口容器idreact-entry-point。index_string属性在 dash/dash.pyL1024-L1031设有 setter 校验确保用户自定义模板仍包含必需的占位符。在 Flask 后端中该路由与 catchall 的注册见 dash/backends/_flask.py 的setup_indexL216-L221与setup_catchallL209-L214。2._dash-component-suites/package_name/path按组件包提供 JavaScript 及相关文件如前一节所述。注意每个文件名中都包含一段额外的**缓存破坏cache-busting**片段Python 版本使用文件在文件系统中的版本号与 unix 时间戳。注册见 dash/backends/_flask.py 的setup_component_suitesL250-L260路由模式为_dash-component-suites/string:package_name/path:fingerprinted_path并调用check_fingerprint见 dash/fingerprint.py解析指纹后定位包内资源。3._dash-layout返回页面初始渲染的 Dash 组件 JSON 结构Python 中即app.layout。在 Python 中由self.serve_layout提供服务。4._dash-dependencies返回应用内全部回调函数的 JSON 数组。5._dash-update-component处理所有服务端回调以 JSON 响应。注意children输出可以包含 Dash 组件必须按与_dash-layout相同的方式做 JSON 编码。注册时显式限定为POST方法dash/dash.py L866-L870委托给self.backend.serve_callback(self)。6._reload-hash仅在实现并启用热重载时通常只在开发期提供服务告诉页面服务器侧何时发生了变化、页面应当刷新。7._favicon.icofavicon页面标题栏图标通常是 Plotly logo。Python 实现见 dash/dash.py L1496-L1502若配置了_favicon则走get_asset_url加修改时间参数否则回退到{prefix}_favicon.ico?v{__version__}。8.assets/path供页面使用的静态文件可能嵌套。此目录中的 CSS 与 JS 文件应被包含进 HTML index 页面目录内任何文件都应可被页面请求。Python 中由register_blueprint调用处理Flask 后端通过 dash/backends/_flask.py 的register_assets_blueprint以Blueprint(static_folderassets_folder, static_url_pathassets_url_path)方式注册。补充新版本还支持通过self.backend抽象注册健康检查端点health_endpoint、WebSocket 回调路由与启动路由_dash_startup_route/...见 dash/dash.py L2141-L2147这些属于 Python 参考实现的最新扩展第一版新后端可以先不实现。选择 Web 服务器需要为要接入 Dash 的语言挑选一个 HTTP(S) 服务器。现有各语言分发的选择如下Dash 语言分发所用 HTTP(S) 服务器Dash PythonFlask另有社区维护的 Django 版本Dash JuliaHTTP.jlDash .NETF#GiraffeDash RFiery官方明确表示不想自己写一个 Web 服务器框架应当挑选现成的。选型时建议考虑易于在该语言使用的所有主流操作系统/平台上安装为生产环境可扩展性应能运行多 worker 或以其他方式充分利用多核机器若开发模式能生成带堆栈跟踪的友好错误信息以便调试是加分项若没有可以自己构建本仓库的 dash/backends/_utils.py 中的format_traceback_html就是 Python 侧把 traceback 格式化为 HTML 错误页的参考实现。Dash App 对象必须复刻的 API 面Python 中用户的使用流程分为四步任何新后端都必须以某种方式提供全部这些功能第一步创建 Dash 对象from dash import Dash app Dash(...)第二步设置布局为嵌套的 Dash 组件app.layout html.Div(...)第三步添加回调app.callback(Output(...), Input(...), Input(...), State(...), ...) def my_callback(input1, input2, state): do stuff return my_output_value app.clientside_callback( JavaScript function as a string or reference, Output(...), Input(...), Input(...), State(...), ... )第四步运行服务器app.run_server(...)Dash()构造函数的选项Dash()构造函数有大量选项全部在 dash/dash.py 的构造函数签名中列出并带有文档本仓库中约在 L480-L560 区间含requests_pathname_prefix、routes_pathname_prefix、serve_locally、compress、meta_tags、index_string、external_scripts、external_stylesheets、suppress_callback_exceptions、prevent_initial_callbacks等。其中有些是 Python 专属的name、server、plugins其余选项最终应当复刻但很多可以在第一个概念验证proof-of-concept实现中省略。app.run/app.run_server的选项app.run旧称app.run_server方法也有大量选项。其中很多只是转传给self.enable_dev_tools——这是因为 Python 中 flask 的server.run在app.run_server末尾调用通常只在开发期使用生产环境会用 gunicorn 等更强的服务器但用户仍可能希望在用生产服务器时启用 devtools。新后端语言是否也需要这种“开发/生产分离”需要由该语言领域的专家自行判断。后端抽象层Python 的现成答案如果新后端的语言恰好能复用 Python 生态本仓库提供了一个值得研究的解耦范式dash/backends/base_server.py 定义了RequestAdapter抽象类统一不同框架的请求对象访问args、get_json、is_json、cookies、headers、path、url、remote_addr、origin等ResponseAdapter抽象类统一响应对象的 cookie/header/body 设置BaseDashServer抽象基类要求子类实现create_app、register_assets_blueprint、add_url_rule、before_request、after_request、run、make_response、jsonify、enable_compression、setup_component_suites、serve_callback、setup_index、setup_catchall等方法。Flask 与 Quart/FastAPI 等后端都实现同一接口因此 Dash 核心逻辑布局、回调、路由注册与具体 Web 框架解耦。这个核心逻辑 服务器适配器的抽象层次正是文档中新后端应复刻 Python 功能思想的落地示范。贡献自己的后端社区协作与工作量预期官方非常乐意与任何想为 Dash 制作新后端的人合作。若已开始此类工作请通过社区论坛与团队联系。经验表明为 Dash 框架新增一门语言不是周末项目官方也在持续努力降低门槛目前预期需要数月工作量含编写文档。目前已存在成熟 Dash 后端的语言包括Python、Julia、F#/.NET、R。MATLAB、Scala、SAS 是文档中提到的其他可能受益于 Dash 这种低代码前端框架的科学编程语言示例——它们都可以考虑将 Dash 的AI 与数据科学应用模式引入自己的社区。结语一份可执行的新后端实现路线图综合文档与仓库源码一个全新语言后端的落地路径可以归纳为组件层读取各组件包的metadata.json生成该语言的数据结构包装实现{namespace, type, props}形式的 JSON 序列化在包导入时向框架注册_js_dist/_css_dist资源清单主 bundle 无条件加载带async/dynamic标志的资源按需提供。服务器层为语言挑选成熟的 HTTP(S) 服务器至少实现文档列出的 8 类路由index、_dash-component-suites、_dash-layout、_dash-dependencies、_dash-update-component、_reload-hash、_favicon.ico、assetsHTML 骨架必须包含{%config%}、{%scripts%}、{%renderer%}三个关键注入点缓存破坏片段可参考 Python 的版本号 文件 unix 时间戳方案。App 对象层复刻Dash(...)→app.layout ...→app.callback(...)/clientside_callback(...)→app.run_server(...)的完整用户流程首版可精简构造函数选项再逐步补齐 devtools 等能力。协作层通过社区论坛与 Dash 团队沟通按数月工作量预期安排文档与测试。文章对应仓库核心参考文件MAKE_A_NEW_BACK_END.md本文骨架、dash/dash.py路由注册与 index 模板、dash/backends/base_server.py后端抽象接口、dash/backends/_flask.pyFlask 参考实现、dash/development/_py_components_generation.py组件类生成器以及 components/dash-core-components/dash_core_components_base/init.py资源注册示例。赞分享前端后端数据可视化【免费下载链接】dashData Apps Dashboards for Python. No JavaScript Required.项目地址https://gitcode.com/gh_mirrors/da/dash点击查看免费下载相关推荐跨语言开发实践linux-dash多后端代码结构对比跨语言开发实践linux dash多后端代码结构对比 在服务器监控工具开发中如何让不同技术栈的运维人员都能轻松部署和使用linux dash给出了独特解决运维观测指标监控监控大盘跨语言开发效率对比linux-dash后端实现开发周期分析跨语言开发效率对比linux dash后端实现开发周期分析 在Linux系统监控工具开发中后端技术栈的选择直接影响开发效率和系统性能。linux dash项运维观测指标监控监控大盘3 步拿到全部教材 PDFtchMaterial-parser 使用介绍3 步拿到全部教材 PDFtchMaterial parser 使用介绍 在平台上逐本打开电子课本 备课时想把国家中小学智慧教育平台上的电子课本留存在本地浏网页爬虫教育上一篇Iosevka 29.0.2 变更解析Unicode 16 新字符支持与 Quasi-proportional 数字字形调整下一篇Vitest 全特性指南基于 Vite 的下一代测试框架核心能力与实战入门创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表