Jupyter Notebooks with ES6 and TypeScript

matsko@google.com
April 28th 2020

How do we test out ES6/TS Code?



const r = foo('...');

console.log(r);

tsc index.ts

node index.js
  • Output is not saved
  • Boilerplate
  • Online Services
  • Sharing
  • Manual loading
  • Manual versioning
  • Slow

there are issues with doing this...

What about design docs and content?

Google Docs

  • Code Highlighting
  • Sharing

HackMD

  • Outside Google
  • Tied to accounts
  • Markdown only
  • Collaboration...

there are issues with this as well...

What about docs and stuff in Github?

  • Markdown is still limit
  • Code and preview are separate
  • Files get mixed in with source code
  • Rendering images, rich media is tricky

Docs
+
REPL

Notebook

  • REPL
  • Multiple Languages
  • Input + Output mixed together
  • Workspace of notebooks
  • Multiple sources
  • Debugging, previews, etc...

Lab

Markdown + REPLs
+ Output
===
Notebook

  • Markdown describes content
  • Code examples are live and can generate output
  • All output is saved
# install python 3.8.x before
# (use pyenv to install python)
pip install jupyterlab

# install TS & ES6 support
npm install -g tslab
tslab install

# serve @ localhost:8888
jupyter notebook

Native ES6 / TS
Support with `tslab`

  • Understands TypeScript & Classes
  • Supports async await
  • Great for querying APIs

What this means for Angular?

  • Custom dashboards for CircleCI, Travis, etc...
  • Interactive apps for debugging, profiling, etc...

Github

  • All output is saved
  • Notebook contents can be rendered on Github

Jupiter Lab

Notebooks +
IDE
===
Lab

  • An integrated environment for running notebooks
  • Supports plugins and tools

What about multi-user collaboration?

  • Various options
  • Both local and online
  • Needs investigation

Jupyter

Hub

  • Run JupyterLab on a server for everyone to access
  • Github authentication

Google CoLab

  • colab.research
    .google.com
  • Google supports notebooks
  • Files saved in Drive
  • Commenting
  • Python only
  • Research Project?

Binder

  • mybinder.org
  • Turn Github-level notebooks into interactive docs
  • Works off of any GH project

Some final ideas...

  • Lots we can do with Jupyter
  • Teaching, learning, documenting, prototyping
  • It will require exploration and experimentation

Thank you!

Jupyter Notebooks with ES6 and TypeScript

By Matias Niemelä

Made with Slides.com

Jupyter Notebooks with ES6 and TypeScript

  • 2,725

More from Matias Niemelä