Javascript & Python Usergroups Graz Meetup¶

30.Mai 2023

@Smaxtec

Python & Javascript Libraries : new kids on the block¶

Dorian Santner - Providens Analytics GmbH.

content¶

  • established players in python and javascript
  • aspects of selecting libraries
  • the 'new' kids
    • two javascript examples
    • two python examples

established players in the field - (year is release 1.0)¶

  • Javascript on the frontend:

    • jquery (2006) - "write less, do more"
    • Angular (2010 - Angular.js) - "the framework for building the future"
    • React (2013) - "the library for web and native interfaces"
    • Vue (2015) - "the progressive JavaScript framework"

  • python in the backend :

    • Plone/Zope (1995/2003) - Plone: "The CMS that gives you peace of mind"
    • django (2005) - "the webframework for perfectionists"
    • flask (2010) - "webdevelopment - one drop a time" (old)

established players in the field - buzzword bingo¶

  • javascript : jquery , angular, react, vue

  • python : plone/zope, django, flask

buzz¶

#proprietary #opensource #CrossBrowser #CrossPlatform #monolitic #modular #framework #library #SyntacticSugar #opinionated #reactive #shadowdom #typescript #LockIn #vendorspecific #WebComponents #ProgressiveEnhancement #EasyToLearn¶

'new' kids - javascript¶

  • svelte (2016) - write less code, no shadow-dom, truely reactive
  • htmx (2020) - high power tools for HTML
  • unpoly (2021) - unobtrusive framework for server-side web applications - no dependencies

Svelte¶

  • Write less code,
    • Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript
  • No virtual DOM
    • Svelte compiles your code to tiny, framework-less vanilla JS, your app starts fast and stays fast
  • Truly reactive
    • No more complex state management libraries — Svelte brings reactivity to JavaScript itself

Prefere JS in the Backend --> SvelteKit

() Smaxtec uses Svelte for Dashboarding

Unpoly¶

The unobtrusive JavaScript framework for server-side web applications

  • extensible
  • fix concurrency
  • opinionated navigation, layers
  • like the approach -> go with it

Unpoly¶

opinionated enhancements for HTML

  • Linking to fragments
  • Custom JavaScript
  • Forms
  • Layers
  • Fragment API
  • Passive updates
  • Animation
  • Navigation feedback
  • Network requests
  • Events
  • Server protocol
  • DOM helpers
  • Scrolling and focus
  • History
  • Utility functions
  • Framework initialization
  • Logging

Unpoly - fragments¶

Partial Rendering

<nav>
  <a href="/pages/a">A</a>
  <a href="/pages/b">B</a>
  <a href="/pages/b">C</a>
</nav>

<article>
  Page A
</article>

<nav>
  <a href="/pages/a" up-target="article">A</a>
  <a href="/pages/b" up-target="article">B</a>
  <a href="/pages/b" up-target="article">C</a>
</nav>

Unpoly - layer¶

Unpoly allows you to open page fragments in an overlay. Overlays may be stacked infinitely.

<a href="/companies/new"
   up-layer="new"
   up-accept-location="/companies"
   up-on-accepted="up.render('.companies', { response: event.response }">
  New company
</a>

other UseCase: Selection Field -> Layer to show list -> selection closes Layer and returns selected Results

  • Demo

Unpoly - python¶

  • by Florian Apolloner (!)
  • pip install unpoly
  • Full unpoly protocol implementation
  • Django support out of the box (by middleware)
  • Easily extendable & easy to use
def my_view(request):
    if request.up: # Unpoly request
        # Send an event down to unpoly
        request.up.emit("test:event", {"event": "params"})
        # ... and also clear the cache for certain paths
        request.up.clear("/users/*")
    else:
        ...

def form_view(request):
    form = MyForm(request.GET)
    # When unpoly wants to validate a form it sends
    # along X-Up-Validate which contains the field
    # being validated.
    if form.is_valid() and not request.up.validate:
        form.save()
    return render(request, "template.html", {"form": form})

'new' kids - Python¶

  • many async frameworks
  • Pyodide (0.23.2) - python distribution for the browser
  • Pyscript (2023.03.1) - run Python in your html
  • Solara (2023) - A pure Python, react-style web framework

Solara - teaser¶

teaser

Solara¶

  • Solara

"A pure Python, React-style web framework Solara helps you build powerful & scalable Jupyter and web apps faster and easier." (*)

standing on the shoulders of giants ...

  • jupyter-server (ipython)
  • ipwidgets (traits)
  • ipyvue (vue)
  • material design - (for now : widgets are vue and material design, more to come!)

(*) "pure python" for the user; Its components do use CSS, JS and HTML.

Solara "Components"¶

  • Input : Button, Checkbox, Input, Select, Slider, ToggleButtons, File Browser, File Drop
  • Output : Markdown, Markdown Editor, Html, Image, Sql Code, FileDownload, Tooltip
  • Status : Success, Info, Warning, Error, Spinner, Progress
  • Viz : FigureAltair, Echarts, Matplotlib, Plotly, Plotly Express
  • Layout : AppLayout, AppBar, Card, CardActions, Columns, ColumnsResponsive, Column, Row, GridDraggable, GridFixed, Sidebar, Hbox, Vbox
  • Data : Dataframe, Pivot Table
  • Page : Head, Title
  • Cross filter : CrossFilterDataFrame, Cross Filter Report, Cross Filter Slider, Cross Filter Select
  • Enterprise : Avatar, AvatarMenu
  • Lab (experimental) : Tab, Tabs

Solara Example¶

In [1]:
import solara

clicks = solara.reactive(0)


@solara.component
def Page():
    def increase_clicks():
        clicks.value += 1
        
    with solara.Div() as main:
        solara.Button(label=f"Clicked {clicks} times", on_click=increase_clicks)
    return main

display(Page())
Cannot show widget. You probably want to rerun the code cell above (Click in the code cell, and press Shift+Enter ⇧+↩).

Solara Features¶

  • for the user : pure python user interface library
    • (*) widgets do have javascript
  • stand alone server included
  • one code for notebook usage and standalone app
  • standard tools for static publishing (jupyter tools chain, nbconvert)

Solara Beispiele¶

  • Examples, Showcase, local plot.py
In [2]:
# local example "plot.py"
from plot import * 
Page()
Cannot show widget. You probably want to rerun the code cell above (Click in the code cell, and press Shift+Enter ⇧+↩).

Thank you ! Questions?¶

sources & making of this slides¶

  • original notebook of this presentation
  • revealjs - present in the browser
  • Jupyter - notebook / lab
  • RISE: Reveal.js - Jupyter/IPython Slideshow Extension
  • Solara
  • Unpoly