You can download the presented notebook here. Open it with VS Code (Polyglot Notebooks extension is required).
UI-centric Polyglot Notebooks
Most conventional notebooks contain code cells interspersed with occasional markdowns and/or basic widgets.
However, Polyglot Notebooks elevate the experience by the possibility of displaying any HTML content, including static web applications built using your preferred tech stack. This transforms mundane code samples into captivating, interactive experiences. What dominates in your notebook, code or UI, is totally up to your needs.
In this blog post, I present a use case for Polyglot Notebooks centered around user interface (UI) development: a job board that offers standard UI-driven evaluation and enables users to rank job offers using custom F#/C# code as an add-on. Python support will also be added soon.
About the interactive job board
The job board that was built for this blog post consists of two main elements:
An assessment form where users can visually indicate their skills.
Job offer cards display the main offer data and insights into how the job offer matches the skills indicated in the assessment form.
With the assessment form, we can specify minimum salary requirements and our level of proficiency in various skills, such as programming languages, cloud computing, frontend development, and DevOps. Users can also indicate whether they want to learn new skills or prefer not to work with certain technologies.
Other attributes such as business domain (finance, automotive, health), company type (corporation, startup), and team size could also narrow the job search results.
I use a small set of imaginary job offers for my experiments: half a dozen offers are sufficient for proof-of-concept purposes.
With these elements in place, we can enable interactive behavior on the job board. When a user provides their skill assessments, the job offers are instantly recalculated and repositioned based on how well they match the user's skills:
The question is, how are the values on top of each job offer calculated?
As we cannot write our own code (yet), the logic used to evaluate and order the job offers is "hard-coded". However, enabling a few evaluation profiles can make it more flexible.
Evaluation profiles
With so many variables involved, relying on a single algorithm to sort the data can make the job board too subjective. To address this issue, I have implemented multiple evaluation profiles, each with different tolerances for unqualified skills and different methods for assigning points to offers that match well or partially.
This definitely makes the portal much more transparent and flexible, but adding more and more data and options will compromise the UX.
When the UI falls short, trust the formula!
Being a developer means we could use our coding skills to write our ranking profiles.
Embedding .NET Interactive (the engine behind Polyglot Notebooks) into our website will be possible sooner than later (I believe it could be possible even now with some effort) but we already can leverage this functionality in VS Code.
So let's code the ranking algorithm in C# or F#. We can even run both interchangeably.
I think running code and seeing the immediate effect in UI is very tangible from the learning perspective. Among many interesting features to learn or compare between languages is pattern matching in C# and F#:
How it works
There are only two steps to achieve that effect:
Embed our web application inside Polyglot Notebook
Send messages from UI to language kernels and from language kernels to our UI
Embedding web application inside Polyglot Notebook.
Although it sounds tricky, it is silly to do. Taking the presented job board as an example: it is a regular ReactJS application (but created fully with F#). The "dist" files (which are a single js and CSS file) are created just by "npm run build" and put into some CDN (it can be as simple as Azure Blobs). We can display links to these files as simply as:
We can do it in one of the available scenarios:
while loading our kernel extension (I'm doing it in the example)
as a "magic command" result
in any code inside any cell
We can do it as a raw HTML (as presented) or use any View Engine (Pocket View for C#). An interesting approach is to create a view type and register it as an HTML formatter, so your widget/app will be displayed every time you return a particular view type.
Send messages from UI to language kernels and from language kernels to our UI
This topic alone deserves a dedicated blog post. You can start by exploring a notebook prepared by .NET Interactive team located here.
This is non-trivial and requires some practice before being comfortable with it. However, you can make it easier by using a single language for both frontend and backend Worlds. I'm using F# for that. Fable Compiler transpiles F# code to JS so I can reuse one domain model.
Both C# and F# equivalents run the "update" function, which evaluates the offers per the used formula and, behind the scene, serializes them to JSON. Next, the JSON is shared with JS kernel, which knows how to update the view with regular js/react action.
Similarly looks the JS -> .NET communication. When the user updates the assessment form visually, every state change is serialized and sent from JS Interactive API (available in web application via webview) to .NET for the next code interactions.
Development experience
Development mode boils down to the technology you use to build your UI.
If it is React, you can benefit from everything it gives, like Hot Refresh:
Summary and bonus
I mentioned earlier that we could incorporate many more data sources among job offers.
One is the possibility of including our city context, as shown in the gif from the beginning of the post.
If you are interested more about coding city spaces vital for any citizens, you can watch my introduction here:
I'm also working to enable data from Trip Advisor API.
I hope you enjoyed this post. For similar content & updates, you can follow me on Twitter: