Jupyter Widgets Programming
Duration
3 days
Overview
The Jupyter Widgets Programming course teaches Python and JavaScript/TypeScript developers how to extend Jupyter Labs/Notebooks with customized widgets. The course starts with the high-level concepts of creating and running custom widgets. Then, the course dives into low-level concepts and features that power widgets and how to employ those concepts and features to create new widgets. This class can be taught with JavaScript or TypeScript.
Objectives
- How to extend Jupyter Labs/Notebooks with custom widgets
- How to leverage Python and JavaScript/TypeScript to build custom widgets
- Setup a custom widgets development environment using a Cookie Cutter Template
- How to utilize built-in widgets
- How to layout and style widgets
- How to implement asynchronous widgets
- Understand the deeper inner workings of Jupyter Widgets
- Documenting and publishing custom widgets
Prerequisites
Python and JavaScript programming experience. Experience with Backbone.js, jQuery, and the web browser DOM API is strongly recommended. If students have no experience with Backbone.js, jQuery, and the web browser DOM API, then a 2-day primer course is recommended.
Training Materials
All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Python and Visual Studio Code on their computers. Also, students will need permission to install Python Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.
Outline
- Extending Jupyter Labs
- What are Jupyter Labs?
- Python Programming
- JavaScript Programming
- Backbone.js
- Web Application Programming
- Ways to Extend
- Setup Development Environment
- Manage NPM Packages with Yarn
- Jupyter Notebook Development Release
- Install with Pip or Conda
- Running the Environment
- Built-In Widgets
- Numeric Widgets
- Boolean Widgets
- Selection Widgets
- String Widgets
- Container/Layout Widgets
- Output Widgets
- Other Widgets
- Widget Events
- Special Events
- Traitlet Events
- Linking Widgets
- Continuous Updates
- Debouncing
- Throttling
- Widget Presentation
- Styling
- Layout
- User Interaction with Interact
- Asynchronous Widgets
- User Interaction – Event Loop Integration
- User Interaction – Generators
- Widget Background Updates
- Low-Level Understanding of Widgets
- Communications
- Synchronized State
- Models and Views
- Code Execution
- Model Execution
- Display a View
- Widget Skeleton
- Serialization of Widget Attributes
- Installation
- Static Assets
- Distribution
- Publishing a Widget
- Documentation
- Widget Spec
- Publish NPM Packages
- Update Version Number