h2oai/nitro

Create apps 10x quicker, without Javascript/HTML/CSS.

Nitro

Create apps 10x quicker, without Javascript, HTML, or CSS.

Currently a Work in Progress. Follow the development blog or @CrunchingData for updates, or use Discord or Discussions for help / ideas / suggestions.

Get started

• Install
• Learn: Introduction | Guide | Gallery | Plugins | Cheatsheet
• More: Roadmap | Milestones | Backlog | Change Log

Philosophy

Recall how simple it is to author interactive command line applications using Python's built-in input() and print():

def main():
    name = input('What is your name?')
    feel = input(f'How do you feel today, {name}?')
    print(f'What a coincidence, {name}, I feel {feel}, too!')

> What is your name?
> Boaty McBoatface
> How do you feel today, Boaty McBoatface?
> intrigued
> What a coincidence, Boaty McBoatface, I feel intrigued, too!

Nitro brings that same level of simplicity to authoring web applications:

from h2o_nitro import View, box

def main(view: View):
    name = view(box('What is your name?', value='Boaty McBoatface'))
    feel = view(box(f'How do you feel today, {name}?', value='intrigued'))
    view(f'What a coincidence, {name}, I feel {feel}, too!')

And here's a more elaborate example with seven pages in seven Python statements:

nitro's Issues

Would be nice to know progress (step i of N) within a wizard.

Display console messages/progress live while booting Nitride.

Progress bar component

Deploy live docs online on web assembly

Make Nitro apps run via Pyodide

Is your feature request related to a problem? Please describe.
Docs have screenshots, not live examples.

Describe the solution you'd like
Be able to host live examples in docs.

Open URLs in current, new or popup windows

Disabled state for widgets.

Teaching bubble component

Document how to use Playwright for testing

Make row selectors always visible

Make links download files (`download` attr?).

Document how to use global context in Python

Document how to use local context in plugins

Document async / non-async usage differences

Internationalization and localization.

• Preload locale-specific string resource dicts.
• #64
• Pass data= as data for template / formatting
• #65
• Block-sensitive localization
• Allow fallback locales in block level locale=
• { } escaping
• Change View(locale=) to View(bundles=)
• Locale matcher: first dibs to app? Function matcher?
• Documentation
  • String
  • Number
  • Date
  • Time
  • Rel Time
  • Lists

Add deployment guide / extract web assets from wheel

Add cheat sheet for box types

Create plugin for D3

Make "nitro run" open browser window

Ref: https://github.com/pkg/browser

Roadmap

This is a living document. Check back for updates!

Goal

H2O Nitro aims to be the simplest way to build apps. No front-end experience required.

Features

In-progress

• #87
  • #88 Scheduled for v0.18

Planned

• Support or guidance for integrating outputs of third-party libraries. Shipped in v0.8.
  • Create plugin for Matplotlib / Seaborn
  • Create plugin for Bokeh
  • Create plugin for Altair
  • #17
  • #18
  • #19
  • Custom Javascript
• 🔍 🤘 Run apps inside Jupyter notebooks.
  • Chromeless mode. Shipped in v0.10.
• Compile native front-ends (via Flutter).
• #21
• 🤘 Julia language support.
• 🤘 Go language support.

Shipped

• Improved typography. Shipped in v0.5.
• Support for theming. Shipped in v0.5.
  • Auto-generate theme given foreground, background, accent colors.
  • Allow user-defined themes.
  • Allow changing themes after app load.
  • Built-in dark-mode switch.
• Tables. Shipped in v0.6.
• Popup dialogs. Shipped in v0.7.
• File upload. Shipped in v0.7.
• nitro run apps directly from git repos. Shipped in v0.9.
• Partial insert/update/remove operations on view. Shipped in v0.10.
• Run apps entirely in-browser using Pyodide.Shipped in v0.11.
• #16 Shipped in v0.12.
• Add back-button / history support. Shipped in v0.13.
  • Hash navigation. Shipped in v0.10.
• #67 Shipped in v0.14.
• Text templates, generic click handling, hotkeys. Shipped in v0.16
• #20 Shipped in v0.17.

Meta

Legend

Icon	Status
✋	Blocked
🎈	Completed, but not shipped
🤘	Stretch Goal
🔍	Research 1

Disclaimer

Any statement in this document that is not purely historical is considered a forward-looking statement. Forward-looking statements included in this document are based on information available as of the date they are made, and H2O.ai assumes no obligation to update any forward-looking statements. The forward-looking roadmap does not represent a commitment, guarantee, obligation or promise to deliver any feature, or to deliver any feature by any particular date, and is intended to outline the general development plans. Customers should not rely on this roadmap to make any purchasing decision.

Footnotes

1. Needs a better understanding of the problem and potential solutions before committing to actual feature work. We continuously tune the plan based on research, feedback, and lessons learned from shipping each release. ↩

Implement "nitro run" command

Goal
Execute apps locally given one of:

• nitro run foo.py
• nitro run https://gist.github.com/user/hash

Notes
The deps for the app are self-contained in the .py file using a shebang-meets-dockerfile thingy:

# --- env ---
# USE venv
# RUN pip install pandas bokeh flask h2o-nitro
# RUN FLASK_APP=app.py flask run
# --- !env ---
def main():
    pass

or

# --- env ---
# USE venv
# FILE requirements.txt EOF
# pandas==4.5
# bokeh>=0.4.2
# flask
# h2o-nitro>0.8.2
# EOF
# RUN pip install -r requirements.txt
# RUN FLASK_APP=app.py flask run
# --- !env ---
def main():
    pass

Supported commands are

• USE uses venv, conda, poetry, pipenv, etc.
• FILE creates a file relative to cwd.
• RUN executes a shell command.
• GET fetches a file given a relative or absolute URL.
• COPY copies, moves, renames local files.

Automatic search box for high-cardinality pickers.

R API proposal

What's the simplest, most ergonomic and idiomatic equivalent of the following Python code in R?

# Prompt for first and last names.
first_name, last_name = view(
    box('First name', value='Boaty'),
    box('Last name', value='McBoatface'),
)
# Print the entered values
view(f'Hello, {first_name} {last_name}!')

Source: https://nitro.h2o.ai/basics/#get-multiple-inputs-at-once

For context, this is what the above code would've looked like if Python didn't have destructuring assignments:

# Prompt for first and last names.
result = view(
    box('First name', name='first_name', value='Boaty'),
    box('Last name', name='last_name', value='McBoatface'),
)
# Print the entered values
view(f'Hello, {result['first_name']} {result['last_name']}!')

Add live mode to all components

Set live=True on a box to make it transmit changes immediately.

Document how to clean up workflows via `ContextSwitchError`

"nitro run" on Windows 10 cannot locate AppStore-installed Python

Describe the bug
nitro run fails to locate Python installed via the Windows App Store:
C:\Users\User\AppData\Local\Microsoft\WindowsApps\python3.exe

To Reproduce
nitro run https://nitro.h2o.ai/docs.py

Environment (please complete the following information):

• Nitro version: 0.9.0
• Python version: 3.7
• OS and version: Windows 10

Cause: golang/go#42919

Create plugin for Plotly

Collapsible text to reduce noise on page.

Default table-mode font-size is too small.

Backlog

This backlog covers (smaller) pending tasks that don't fit into #4.

• #22
• #27
• Opt-in analytics for tracking choices.
• #28
• Required field validation. #8
• #30
• #32
• Mode switch to enable front-end to simulate random inputs.
• #42
• #49
• #51
• #52
• #54
• #55
• #56
• #35
• #36
• #37
• #57
• #58
• #59
• #41
• #40
• #39
• #38
• #61
• Upgrade to Fluent v9
• #78
• #83
• #84
• #86
• #23
• #16
• #63
• #24
• #25
• #26
• #29
• #31
• Save progress and return to it.
• #33
• #34
• #43
• #44
• #45
• #46
• #47
• #48
• #50
• #53
• #60
• #68
• #69
• #73
• #74
• #75
• #76
• #77
• #79
• #105
• #106
• #107
• #108
• #109
• #110

Finalize v1 communication protocol for multi-language support

Current protocol has some rough edges.

• Clean up before implementing at least one of Go, R, Julia backend.
• Robust handling of request-response w/ drops.
• Block UI during commit.
• Add box-level correlation ID for langs that don't support destructuring assignments.

Spinner component

Allow customizing syntax highlight theme (or match to current theme).

Add support for back/forward navigation

Typo in Recruitment Example

Describe the bug
Missing the letter l in explore:

nitro/py/h2o_nitro/templates/samples/recruitment/app.py

Line 28 in c946472

option('internship', 'Internship', caption="I'm still learning and want to expore opportunities"),

Tab component

Contextual help drawer for every element (tucked away by default).

Make an embeddable version of front-end (nitro.js)

Is your feature request related to a problem? Please describe.

The front-end currently expects all of index.html to be served from the backend, and requires a /nitro WS endpoint to be exposed by the server. This is avoidable.

Describe the solution you'd like

An embeddable version of the front-end that's purely data-in, data-out could make it easier to integrate with legacy software. The legacy software would have to include a bit of JS to wire up nitro.js to the backend.

R language support.

Create plugin for Pandas

Hyperlink color auto-computation is not the best - can have color contrast issues in dark themes.

Support dependencies file

Is your feature request related to a problem? Please describe.
Having the requirements part of the core app code is an uncommon practice.

Describe the solution you'd like
Nitro to be able to install dependencies from a separate txt file.

Suggestion solution
Was thinking something like:

nitro run https://raw.githubusercontent.com/h2oai/nitro/main/py/examples/hello.py --requirements https://raw.githubusercontent.com/h2oai/nitro/main/py/examples/requirements.txt

(or something better) would be quite useful.

Additional comments
It could immediately enable Nitro to be used for existing projects in conjunction with existing workflows (like a pip package/library).

Automatic state- and progress-tracking inside a wizard function, with undo/redo / time-travel.

Some components don't return default values when empty.

Describe the bug
Some components (dropdown, combobox, slider, etc.) don't return default values if empty, causing problems during tuple unpacking.

Environment (please complete the following information):

• Nitro version: 0.10.0

Banner component

Error reporting mechanism for plugins

e.g. context.formatError(title, message, trace)

Document editing with "inside" marker

Add EXTRACT to "nitro run"

Ref: https://github.com/mholt/archiver, example

required=True does not enforce field value existence

Describe the bug

box('input something', required=True) does not seem to actually require a value. It just adds a red asterisk above the text input, but when the "continue" button is clicked, the form submits with no value (or with an empty value?)

Expected behavior

Much like the native text input in modern browsers, provide a tooltip to the user saying "this field is required" or "{NAME} is required".

Actual behavior

The form submits without a value.

To Reproduce

Modify the hello world example, change one of the box line to:

feel = await view(box(f'How do you feel today, {name}?', mode='text', required=True))

Run this example and click all the "continue" buttons without typing anything into the text inputs.

Screenshots

I did not take any sceenshots.

Environment (please complete the following information):

• Nitro version: 0.9.0
• Python version: 3.10.4
• OS and version: macOS 12.4
• Browser and version: Vivaldi 5.2

Additional context

None.

Ensure all elements have test IDs for Playwright automation.