Tweet
Tweet

Slide 1

Slide 1 text

Buganini Chiu (aka. Bug) email: buganini@b612.tw https://github.com/buganini/PUI PUI: Declarative UI Framework for Python sciwork 2023

Slide 2

Slide 2 text

About Me • Freel a ncer • Odds & Ends Developer • Web, Mobile App, FW, a bit HW • ❤ 🐍 🐍 🐍 (Python *3*) • Su ff er from UI progr a mming 🤡 https://github.com/buganini/PUI

Slide 3

Slide 3 text

Declarative UI • Apple: SwiftUI • Android: Jetp a ck Compose • Web: Angul a r, Re a ct, Vue … https://github.com/buganini/PUI • Python: PUI 🎉 🎉 🎉

Slide 4

Slide 4 text

Wishlist • Code structure == UI structure SwiftUI VBox { Text(“Item 1”) Text(“Item 2”) } Hierarchy by statements Hierarchy by code structure Traditional Python layout = VBoxLayout() layout.addChild(Text(“Item 1”)) layout.addChild(Text(“Item 2”)) root.addChild(layout) Hierarchy by statements

Slide 5

Slide 5 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters

Slide 6

Slide 6 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools

Slide 7

Slide 7 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar

Slide 8

Slide 8 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generator

Slide 9

Slide 9 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators

Slide 10

Slide 10 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger

Slide 11

Slide 11 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDE Integration

Slide 12

Slide 12 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration

Slide 13

Slide 13 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness

Slide 14

Slide 14 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability

Slide 15

Slide 15 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve

Slide 16

Slide 16 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance

Slide 17

Slide 17 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability

Slide 18

Slide 18 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability Job Security

Slide 19

Slide 19 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability Job Security Fun

Slide 20

Slide 20 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability Job Security Fun for younger me 🤡

Slide 21

Slide 21 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Parenthesis VBox( Text(“Item 1”), Text(“Item 1”) ) Control Flow Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability Job Security Fun for younger me 🤡

Slide 22

Slide 22 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters DSL Item 1 Item 2 Parenthesis VBox( Text(“Item 1”), Text(“Item 1”) ) Control Flow Disturbing 😨 Another language Another ton of tools * Syntax & Grammar * Code Generators * Debugger * IDEs Integration Turing Completeness Interoperability Learning Curve Language Maintenance Traceability Job Security Fun for younger me 🤡

Slide 23

Slide 23 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge Source: pix a b a y ×N ×N

Slide 24

Slide 24 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge Source: pix a b a y

Slide 25

Slide 25 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility Source: Wikipedi a - Hyperloop

Slide 26

Slide 26 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility Source: 2023 Apr 23

Slide 27

Slide 27 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility Source:

Slide 28

Slide 28 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility • Even Better Developer Experience • Hot Relo a ding Source: Wikipedi a - Gl a dys Ingle REAL FUN

Slide 29

Slide 29 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility • Even Better Developer Experience • Hot Relo a ding with just Python 🤔

Slide 30

Slide 30 text

Syntax Challenge Traditional Python layout = VBoxLayout() layout.addChild(Label(“Item 1”)) layout.addChild(Label(“Item 2”)) root.addChild(layout) Swift / Kotlin Style VBox { Label(“Item 1”) Label(“Item 2”) } VBox ({ Label(“Item 1”) Label(“Item 2”) }) Hierarchy by statements Hierarchy by code structure Not available in Python Tr a iling Closure

Slide 31

Slide 31 text

Python Syntax Challenge Swift / Kotlin VBox { Label(“Item 1”) Label(“Item 2”) } • Construct hier a rchy with Python synt a x • 🚫 No multi-line l a mbd a in Python • How do children f ind their p a rent? 🤔

Slide 32

Slide 32 text

Python Syntax Challenge with VBox(): Label(“Item 1”) Label(“Item 2”) parent = VBox() enter parent ➡ push stack Label(“Item 1”) # attach to parent Label(“Item 2”) # attach to parent exit parent ➡ pop stack Where to store the st a ck ? 🤔 Glob a l V a ri a ble? Thre a d-S a fety? ➡ Per-Thre a d Glob a l V a ri a ble Thre a d-Loc a l Stor a ge ✅ Context M a n a ger

Slide 33

Slide 33 text

Hello World from PUI.PySide6 import * class Example(Application): def content(self): with Window(title="test", size=(320,240)): Label("Hello world") root = Example() root.run() 👆 👆

Slide 34

Slide 34 text

One way to do declarative UI Virtual Document Object Model Virtu a l DOM B a ckend- a gnostic blueprint Actu a l UI (DOM in web world) with Tree(): Star() Ball(color=green) Ball(color=red)

Slide 35

Slide 35 text

Virtual DOM Proper synt a x + D a t a Binding + Virtu a l DOM = Decl a r a tive wr a pper for imper a tive b a ckends Indirection

Slide 36

Slide 36 text

Di ffi ng Virtual DOM diff( , ) with Tree(): Star() Ball(color=green) Ball(color=red) with Tree(): Ball(color=green) Ball(color=blue)

Slide 37

Slide 37 text

Patching Virtual DOM

Slide 38

Slide 38 text

Different Backends Virtu a l DOM B a ckend- a gnostic blueprint B a ckend 1 B a ckend 2

Slide 39

Slide 39 text

Backend: PySide6

Slide 40

Slide 40 text

Backend: Textual 👈 in termin a l (TUI ‼)

Slide 41

Slide 41 text

Same source code, di ff erent backends Textual vs. PySide6 in termin a l

Slide 42

Slide 42 text

Backend: f let ( f lutter based)

Slide 43

Slide 43 text

Backend: tkinter

Slide 44

Slide 44 text

Backends Other interested b a ckend

Slide 45

Slide 45 text

Data Binding state = StateDict() state[“var”] = “python” ## UI with VBox(): Label(state[“var”]) state[“var”] = “boa” ➡ Register listener for the view root in st a te getter Trigger view upd a te in st a te setter ⬅ class StateDict(BaseState): def __getitem__(self, key): try: view = find_puiview() self.__listeners.add(view) except PuiViewNotFoundError: pass return self.__values[key] def __setitem__(self, key, value): if not key in self.__values or self.__values[key] != value: self.__values[key] = value _notify(self.__listeners) PUI/st a te.py

Slide 46

Slide 46 text

data = State() data.var = 0 def content(self): with Window(title="blah"): with VBox(): with HBox(): Button("-").click(self.on_minus) Label(f"{data.var}") Button("+").click(self.on_plus) with HBox(): for i in range(0, data.var): Label(f"{i}") def on_minus(self): data.var -= 1 def on_plus(self): data.var += 1 ex a mples/generic_minim a l.py Data Binding

Slide 47

Slide 47 text

data = State() data.var = 0 def content(self): with Window(title="blah"): with VBox(): with HBox(): Button("-").click(self.on_minus) Label(f"{data.var}") Button("+").click(self.on_plus) with HBox(): for i in range(0, data.var): Label(f"{i}") def on_minus(self): data.var -= 1 def on_plus(self): data.var += 1 ex a mples/generic_minim a l.py Data Binding

Slide 48

Slide 48 text

Another Python Syntax Challenge SwiftUI struct ContentView: View { @State private var name = "" var body: some View { VBox { Text(name) TextField("Name", text: $name) } } } $n a me ➡ Binding PUI state = State() state.text = "" @PUI def TextFieldExample(): with VBox(): # getter Label(state.text) # binding TextField(state("text")) __c a ll__ cookbook/text f ield.py

Slide 49

Slide 49 text

Interoperability Source: Wikipedi a - Fr a ct a l c a nopy Use V-DOM at will

Slide 50

Slide 50 text

Hot Reload Virtu a l DOM B a ckend- a gnostic blueprint Actu a l UI (DOM in web world) with Tree(): Star() Ball(color=green) Ball(color=red)

Slide 51

Slide 51 text

Hot Reload with

Slide 52

Slide 52 text

Update Triggers Virtu a l DOM B a ckend- a gnostic blueprint Actu a l UI (DOM in web world) • St a te Ch a nge • Source Code Ch a nge • Timer

Slide 53

Slide 53 text

Update Triggers • St a te Ch a nge • Source Code Ch a nge • Timer @PUI def TimelineViewExample(): from datetime import datetime with TimelineView(ttl_sec=1): Label(datetime.now().strftime("%Y-%m-%d %H:%M:%S")) cookbook/timeline.py

Slide 54

Slide 54 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility • Even Better Developer Experience • Hot Relo a ding with just Python 🤔

Slide 55

Slide 55 text

Wishlist • Code structure == UI structure • No more dom a in speci f ic l a ngu a ge / m a rkup l a ngu a ge / p a renthesis trick • Control Flow: If-Else, Loop, etc. • Turing completeness m a tters • Better Developer Experience • Popul a te content on d a t a ch a nge • Not too much migr a tion p a in • Di ff erent b a ckends support & Interoper a bility • Even Better Developer Experience • Hot Relo a ding with Python(): return True #😎

Slide 56

Slide 56 text

Buganini Chiu (aka. Bug) email: buganini@b612.tw https://github.com/buganini/PUI PUI: Declarative UI Framework for Python 🤔 QA / Demo 🫣 https://0rz.tw/JJvsC Slides sciwork 2023