Explanation
The explanation section aims to clarify, deepen, and broaden the understanding of Panel with discussions about topics at a high-level or from alternate angles. This may include reasoning about design decisions, historical development, and technical constraints.
Beyond the Getting Started > Core Concepts, which new users must complete before working with Panel, this explanation section is intended to help practitioners form and strengthen a conceptual web that facilitates new and advanced usage directions.
Developing in Panel
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}code;2.5em;sd-mr-1 sd-animate-grow50 Develop Seamlessly 🔗 develop_seamlessly :link-type: doc
Learn how we enable you and your team to work seamlessly with Panel across a wide range of development environments :::
::::
APIs
In this section we will discuss the principles and design decisions behind Panel's APIs in order to guide you towards the best approach for structuring your applications. We begin with a set of explanations behind the use of Param in Panel, how it unlocks reactive approaches to write applications and contrast function and class based approaches for writing apps.
::::{grid} 1 1 3 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}infinity;2.5em;sd-mr-1 sd-animate-grow50 Parameters in Panel 🔗 api/param :link-type: doc
Background on the use of Param in Panel. :::
:::{grid-item-card} {octicon}infinity;2.5em;sd-mr-1 sd-animate-grow50 Reactivity in Panel 🔗 api/reactivity :link-type: doc
A deep dive into the reactive and callback based APIs in Panel. :::
:::{grid-item-card} {octicon}infinity;2.5em;sd-mr-1 sd-animate-grow50 Functions vs Classes 🔗 api/functions_vs_classes :link-type: doc
A discussion that contrasts function and class based APIs in Panel. :::
::::
Next let us contrast the different APIs offered by Panel by applying them to a particular problem.
::::{grid} 1 1 3 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}infinity;2.5em;sd-mr-1 sd-animate-grow50 1. Reactive API 🔗 api/reactive :link-type: doc
Linking functions or methods to widgets using pn.bind or the equivalent pn.depends decorator. :::
:::{grid-item-card} {octicon}codespaces;2.5em;sd-mr-1 sd-animate-grow50 2. Declarative API 🔗 api/parameterized :link-type: doc
Declare Parameters and their ranges in Parameterized classes, then get GUIs (and value checking!) for free. :::
:::{grid-item-card} {octicon}link;2.5em;sd-mr-1 sd-animate-grow50 3. Callbacks API 🔗 api/callbacks :link-type: doc
Generate a UI by manually declaring callbacks that update panels or panes. :::
::::
Finally let's look at some examples demonstrating how each API can be applied to build the same app:
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Stock Explorer - Callback API :img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_callback.png 🔗 api/examples/stocks_callbacks :link-type: doc
Build a stock explorer app using the .param.watch callback API. :::
:::{grid-item-card} Stock Explorer - Declarative API :img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_declarative.png 🔗 api/examples/stocks_declarative :link-type: doc
Build a stock explorer app using the Param based declarative API. :::
:::{grid-item-card} Stock Explorer - Reactive API :img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_reactive.png 🔗 api/examples/stocks_reactive :link-type: doc
Build a stock explorer app using the reactive API. :::
:::{grid-item-card} Outlier Explorer - Declarative API 🔗 api/examples/outliers_declarative :link-type: doc
Build a simple outlier explorer app using the declarative API. :::
::::
Components
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}rows;2.5em;sd-mr-1 sd-animate-grow50 Built in components 🔗 components/components_overview :link-type: doc
Deepen your understanding about Panel's built in components. :::
:::{grid-item-card} {octicon}plus-circle;2.5em;sd-mr-1 sd-animate-grow50 ReactiveHTML components 🔗 components/reactive_html_components :link-type: doc
Deepen your understanding about custom ReactiveHTML components :::
::::
Architecture
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}arrow-both;2.5em;sd-mr-1 sd-animate-grow50 Panel Communications 🔗 architecture/comms :link-type: doc
Deepen your understanding about how Panel communicates between Python and Javascript in different contexts. :::
::::
Styling
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}paintbrush;2.5em;sd-mr-1 sd-animate-grow50 Designs & Themes 🔗 styling/design :link-type: doc
Understand how the Panel Design and Theme components work internally. :::
:::{grid-item-card} {octicon}repo-template;2.5em;sd-mr-1 sd-animate-grow50 Templates 🔗 styling/templates_overview :link-type: doc
Discover Panel templates and how to use them. :::
::::
Dependencies
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Panel and Param 🔗 dependencies/param :link-type: doc
Learn about why and how Panel utilizes the Param library.
:::
:::{grid-item-card} Panel and Bokeh 🔗 dependencies/bokeh :link-type: doc
Learn about why and how Panel utilizes the Bokeh library.
:::
::::
Technology comparisons
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Panel vs. Dash 🔗 comparisons/compare_dash :link-type: doc
:::
:::{grid-item-card} Panel vs. ipywidgets 🔗 comparisons/compare_ipywidgets :link-type: doc
:::
:::{grid-item-card} Panel vs. Voila 🔗 comparisons/compare_voila :link-type: doc
:::
:::{grid-item-card} Panel vs. Streamlit 🔗 comparisons/compare_streamlit :link-type: doc
:::
:::{grid-item-card} Panel vs. JavaScript 🔗 comparisons/compare_js :link-type: doc
:::
:::{grid-item-card} Panel vs. Bokeh 🔗 comparisons/compare_bokeh :link-type: doc
:::
::::