
Observable’s Not JavaScript - escot
https://observablehq.com/@observablehq/observables-not-javascript
======
jacobolus
Observable is great, and I hope more people learn about it and try it out, but
I am afraid that outside of the audience of people who already have worked
with it a bit, both the title and content of this particular notebook are
going to be a bit misleading and out of context. The intended audience isn’t
really people new to the platform.

One of the most important things about Observable is that it _is_ mostly just
javascript.

~~~
breck
I loved the title. Because indeed, I personally thought that Observable was
mostly just Javascript. But now I understand it a lot more and more
importantly have an idea now of where they are going with it. I love
JupyterLab, but I think long-term it is boxed in by its design of being
Python/R in the browser. Observable is breaking from Javascript more than I
thought, which will allow it to do really cool things and hit an audience that
doesn't necessarily care that it's not quite Javascript.

~~~
jadbox
I kinda want Observable to be it's own language that can compile to JS... not
saying it would be a good general purpose lang by any means, but it would be
interesting to experiment with a 'first-class observable' language.

~~~
jashkenas
And it kinda is. We provide a parser¹ and a runtime², and you can download a
copy of any notebook compiled to a JavaScript module:
[https://observablehq.com/@observablehq/downloading-and-
embed...](https://observablehq.com/@observablehq/downloading-and-embedding-
notebooks)

That said, we’re explicitly designing for the reactivity of the notebook
environment. Working on fundamentally reactive code in a traditional text
editor is ... alright, I guess. You’re still stuck reloading the whole
enchilada any time you make a change. It’s nowhere near as exciting as working
on reactive code in an editor that understands and respects the reactivity,
and can keep your program running and re-evaluating as you tweak it!

That said, if you're interested something less notebook-y, check out what Rich
Harris is doing with Svelte 3. It's totally a not-so-distant cousin.

1\.
[https://github.com/observablehq/parser](https://github.com/observablehq/parser)

2\.
[https://github.com/observablehq/runtime](https://github.com/observablehq/runtime)

~~~
jadbox
Thanks for the information. Also, yes, I've been keeping a very close eye on
Svelte 3 and have been experimenting with it :)

------
stared
As much I try to like this project, still, something feels clunky. I am an
avid user of Jupyter Notebooks for prototyping and code sharing in data
science / deep learning.

Fir JavaScript (and D3.js in particular), still - I don't have a default go-to
solutig. Gist -> blocks? GitHub and and a standalone page? JSFiddle or
CodePen? Observable? (I would love to be convinced to one or the other
approach.)

My main concerns with observable are:

1\. Unlike Jupyter notebook, the code is non-linear. Very often it refers to
some pieces.

2\. It takes some clicking to reveal the code. (Also, maybe a Jupyter habits,
but I am used to results below code.)

3\. I am still not sure what is the full syntax besides JavaScript and
Markdown.

4\. I am not sure if it is easy (or possible) to backup / self-host the code.
(Pretty much a requirement to make sure a project won't disappear in a few
years.)

BTW: Once I gave Obserbavle a try, [https://observablehq.com/@stared/tree-of-
reddit-sex-life](https://observablehq.com/@stared/tree-of-reddit-sex-life)
(and it got really popular here:
[https://news.ycombinator.com/item?id=19640562](https://news.ycombinator.com/item?id=19640562)).

~~~
jashkenas
With the gentle caveat that this list of concerns feels fairly low effort —
surely, with a little elbow grease, you can think of much more damning
complaints! ;) — I'll try to respond in good faith:

1\. The non-linearity of the code is really the whole point here. Reactivity
means that you wan work on any little piece of the code at any time, and you
don't have to reload the page, or re-evaluate the entire notebook. It closes
the feedback loop, and speeds up the process of iterating on your ideas
immensely.

2\. We’ve added more keyboard shortcuts, so you can now "Shift-A" to select
every cell, and then press "P" to pin every cell open at once (and then to
close them again).

3\. The full syntax is just the "Observable JavaScript" described in the OP.
The Markdown tagged template literal is part of the standard library, and you
can define your own that work just like it. In that sense, the syntax is
extensible. For example, here’s a different "pl" tagged template literal that
runs Prolog programs: [https://observablehq.com/@mbostock/hello-tau-
prolog](https://observablehq.com/@mbostock/hello-tau-prolog)

4\. Every notebook is available for download and self-hosting. You can
download the code as an ES Module, or as a tarball that you can install with
npm, or load and render on a web page:
[https://observablehq.com/@observablehq/downloading-and-
embed...](https://observablehq.com/@observablehq/downloading-and-embedding-
notebooks)

~~~
fourthark
What's the rationale for results above code?

~~~
jashkenas
Great question!

On Observable, each cell is a unit that can be evaluated independently, with
two sides to it — you have the source code editor, and you have the rendered
display (either a chunk of DOM or canvas that you’ve drawn, or an interactive
inspector for JS values).

Now, the important thing is that the code half of the cell is often collapsed.
You navigate around the notebook, toggling open and closed the code editors,
and typing into them. If the code is on top, the entire cell jumps when it
opens and closes, pushing the rendered display up and down. If the code is on
the bottom, it emerges from the half of the cell that is always there, and the
display is stable.

Ultimately, that’s why each cell has content before source code — the content
is always there, and the code may or may not be visible, so working with the
notebook as a whole feels much more stable and less jumpy with the rendered
value as primary and the source code as secondary.

------
lwb
Am I right in thinking that this is mostly interesting for statistics-adjacent
fields? I imagine someone using this mostly to embed charts and graphs
alongside code a la Jupyter Notebooks.

What would be fascinating to me is if these tools made it significantly easier
to make "Explorable Explanations" (nicky case, bret victor).

I love the Raft visualization
([https://raft.github.io/](https://raft.github.io/)) and would be ecstatic to
see more stuff like that surfacing around, making it easier to grok
sophisticated distributed systems. Next logical step would be to actually
control said systems from the visualization itself.

~~~
jashkenas
In that case, you may be interested in checking out some of the fancy
explorable explanations folks have been publishing:
[https://observablehq.com/collection/@observablehq/explorable...](https://observablehq.com/collection/@observablehq/explorables)

Here’s a sequence of sound wave primers by Dylan Freedman:
[https://observablehq.com/@freedmand/sounds](https://observablehq.com/@freedmand/sounds)

Mike wrote an exploration of the Lotka-Volterra equations for simulating the
dynamics of populations of predators and prey:
[https://observablehq.com/@mbostock/predator-and-
prey](https://observablehq.com/@mbostock/predator-and-prey)

Or something physical, like Jacob Rus figuring out how a chunk of metal from a
machinist’s workshop can scribe out a perfect sine curve:
[https://observablehq.com/@jrus/sinebar](https://observablehq.com/@jrus/sinebar)

Or something fun, with Krist Wongsuphasawat’s tapioca pearl to tea level Boba
Calculator: [https://observablehq.com/@kristw/boba-
science](https://observablehq.com/@kristw/boba-science)

Or my personal favorite (although I can't view it in Chrome), Toph Tucker’s
poignant reverie on correlation, eugenics, and the morality of applying
statistics to human affairs: [https://observablehq.com/@tophtucker/inferring-
chart-type-fr...](https://observablehq.com/@tophtucker/inferring-chart-type-
from-autocorrelation-and-other-evils)

------
mattlondon
I thought they were talking about Observables as in the Reactive Observables
(1) from RxJS (2) et al.

Unfortunate naming! No doubt SEO will be super difficult for them considering
how much "javascript" && "observable" keyword stuff there is out there
already.

1 -
[https://en.wikipedia.org/wiki/Reactive_programming](https://en.wikipedia.org/wiki/Reactive_programming)
2 - [https://rxjs.dev/guide/observable](https://rxjs.dev/guide/observable)

~~~
jashkenas
Your comment made me curious about our current SEO rankings, so I used a VPN
and fresh incognito windows in a browser I never use (Safari) to Google for
"observable" from Silicon Valley, New York City and Madrid.

ObservableHQ.com is in the top spot in Silicon Valley and NYC, and a few spots
down the first page in Madrid, after Angular Observables and RXJS Observables.
So it looks like we’re doing pretty alright so far.

~~~
graphememes
That's for users who have never searched for anything regarding observables
and clicked links which will tailor their ranking algorithm. Not sure how much
optimization for "pure" ranking we should do nowadays.

------
catacombs
While this is great, I'm still waiting for Observable to include a Vim-like
editing environment in the cells.

Working in Emacs and Vim all day, I can't tell you how immensely annoying it
is to switch between mouse and keyboard when editing code blocks.

~~~
mbostock
We did just launch a big improvement to keyboard controls this week that
mirrors vim’s “Normal Mode”:

[https://observablehq.com/@observablehq/cell-
shortcuts](https://observablehq.com/@observablehq/cell-shortcuts)

~~~
catacombs
I saw that. What I'm talking about is editing code with Vim-like keys INSIDE
the cells. An implementation of the Ace Editor[1] or something similar would
be amazing.

[1] [https://ace.c9.io/](https://ace.c9.io/)

~~~
mbostock
Got it. We use CodeMirror and are considering the vim bindings, but it’d
probably be something we launch at the same time as user-configurable key
bindings.

[https://codemirror.net/demo/vim.html](https://codemirror.net/demo/vim.html)

~~~
catacombs
I'm happy to hear there is some consideration. I'll be the first, as a user,
to say YES to this implementation. That'll encourage me to use Observable
more.

------
simonw
Observable is SUCH a clever piece of software design. Every time I read more
about how it works I learn something new and interesting.

~~~
ww520
JsLive or JsLiveDoc.

------
SquareWheel
This blog is very frustrating to read. When I try and select text to mark my
place, it starts editing markdown instead.

~~~
AgentME
I notice whenever I highlight a paragraph, clicking the paragraph again
doesn't de-select it, unlike every other program and webpage. I have to click
outside of the paragraph to unhighlight it. As a compulsive highlighter who
often double-clicks and then clicks paragraphs to highlight them and then
unhighlight them, this is so bothering to me. (Also, if I click on a code
snippet, a highlight appears to the left of it, and then gets left behind and
doesn't reset when I click outside of the code snippet!) It feels like I've
picked up an object and it was sticky and got residue left behind on my hands
each time I interact with it. Sure, I could just stop repeatedly touching the
object so much, but I fidget with what I'm holding. An object that's not
fidgetable like every other of its kind is unnecessarily hostile. I'm baffled
that a webpage went through extra work to make highlighting act differently
and infuriatingly.

Highly related xkcd: [https://xkcd.com/1271/](https://xkcd.com/1271/), and
highly related alt-text: "And if clicking on any word pops up a site-search
for articles about that word, I will close all windows in a panic and never
come back."

~~~
trnglina
Interestingly enough, from my quick tests, the highlighting behaviour works as
normal in Firefox, but not in Chrome.

------
amirathi
Just checked out live commenting feature on Observable [1], the ability to
send code suggestions and preview + merge suggestion with 1-click looks
amazing.

I built a tool [2] for Jupyter notebook code reviews which has commenting
feature for GitHub pull requests (regular text comments). It would be great to
have actual code edits/suggestions as review comments.

[1] [https://observablehq.com/@observablehq/suggestions-and-
comme...](https://observablehq.com/@observablehq/suggestions-and-comments)

[2] [https://www.reviewnb.com/](https://www.reviewnb.com/)

------
colemannugent
I really wish tools like this or Jupyter Notebooks were around when I first
started studying CS in school. Mixing notes and code is such an interesting
use-case.

~~~
jacobolus
Knuth has been doing literate programming for 35+ years
[https://en.wikipedia.org/wiki/Literate_programming](https://en.wikipedia.org/wiki/Literate_programming)

I have really enjoyed Observable as a literate programming platform though.
Being able to mix text, diagrams, data tables, multimedia output, interactive
inputs, easily modified subroutine implementations, imports of external data
and subroutine libraries, ... makes for a very expressive and reader-friendly
(albeit with a bit of reading learning curve) platform for writing interactive
documents and for doing research.

For example, here’s a recent relatively literate-programming style notebook of
mine (this one was mostly done in an afternoon for fun as a way of
procrastinating from other work, not as a research project),
[https://observablehq.com/@jrus/munsell-
spin](https://observablehq.com/@jrus/munsell-spin)

It’s very low-friction to set up a new notebook and just start writing, or to
open an existing draft notebook and work on it. I have found this to be
extremely helpful in the past year or two trying to work during my 2-year-
old’s nap time.

Pen and paper and Observable notebooks are the two most important tools of my
recent research efforts.

~~~
colemannugent
> _Knuth has been doing literate programming for 35 years_

I shouldn't be surprised, that man had a lot going on. Just TeX and Big-O
notation alone would be enough to permanently enshrine him in the CS heap of
fame, but the hits don't stop there!

Kinda funny how much just one guy could affect research.

~~~
red_trumpet
That's not true, big-O notation (also called Landau symbols) was used as early
as 1894 by Paul Bachmann
([https://en.wikipedia.org/wiki/Big_O_notation](https://en.wikipedia.org/wiki/Big_O_notation))

~~~
aeorgnoieang
According to that Wikipedia article, Knuth popularized the notation in
computer science, which might be what the comment to which you replied is
referencing.

------
kreetx
The title is a bit click-baity since I don't think anyone would think
Observable would run javascript as if it were in editable <script> tags in a
html document. But this is what most of the points try to explain: that there
is a framework around the js it runs (so errors don't leak to other blocks
(cells)), some types of imports are not supported since they are not needed,
etc.

Not saying Observable isn't great, just pointing out that it is javascript -
other languages have playgrounds as well.

~~~
mattigames
JavaScript is the runtime executing it yes... but if you write C code and
transpile it using Wasm you are confusing people if you say that what you
wrote initially is not C code; so for the sake of comprehension (what language
was created for) it is indeed "not JavaScript" but a new word we can agree to
use to make it clear what plataform we are talking about: Observable.

------
akhilcacharya
This is insanely cool - I didn't know an implicit DAG notebook was on the
market already.

~~~
VectorLock
Is it acyclic? Can you make cycles of cell changes?

~~~
mbostock
By default it is acyclic: any circular definitions will thrown an error. (I
added an example to the notebook.) But you can opt-in to circular
relationships using mutables or side-effects.

------
ran3824692
I get blank page without running javascript. Not observable.

~~~
gloflo
It is a project about highly interactive content on the web. That does require
JavaScript.

------
artursapek
This is off-topic, but Observable's layout code seems to have some kind of
rounding issue. The farther I scroll down the page, the more the sections
overlap: [https://i.imgur.com/zuYh3j4.png](https://i.imgur.com/zuYh3j4.png)

It's a very gradual progression into that. Running Chrome Version 71.0.3578.98
(Official Build) (64-bit) on Ubuntu 18.04.

------
nicwolff
The demo notebook at
[https://observablehq.com/demo](https://observablehq.com/demo) works on Safari
11.1.2 but at this link I just see a JSON object starting `{"@context":
"http:\/\/schema.org", "@type": "Article",...`.

------
anderspitman
I somehow didn't realize the article itself was a notebook until I got to the
bottom. I can't decide whether that's a good thing or a bad thing, and whether
it says more about me or observable. The whole thing is way impressive though.

~~~
kragen
I figured out it was a notebook when it just showed a blank page in the first
two browsers I tried to read it in.

------
aerovistae
You know what would be nice, in a scifi universe? Being able to hover over HN
links and get a short context for the topic.

E.g. "Observable is a <something something> used for <something something>.
Since the language used in its <something something> appears similar to
JavaScript, they put together a blog post clarifying the differences."

It would be great if the HN submissions form had a field you could optionally
fill out with such a text. Because if you can't tell from my example above, I
have _no idea_ what this is.

------
emilfihlman
The site CSS is broken:
[https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png](https://emil.fi/m/2019-06-15_13-17-36_siU3iwbN.png)

------
IggleSniggle
I thought this would be referring to the Observable ie Observer/Subscriber
pattern as a primitive in JavaScript, of which RxJS (Reactive Extensions) is
the best known implementation followed closely by MobX. I like this project
quite a bit, but it is unfortunately named.

It feels kinda like naming your project "Array map for JavaScript."

~~~
TeMPOraL
Come on, RxJS stole that (and "reactive") terms from prior work, which was
arguably more interesting for anyone except web developers. So we can keep
passing the blame about who steals SEO from who...

~~~
IggleSniggle
To be clear, I was only quoting RxJS as the most popular implementation in js
for the Observable primitive. This has nothing to do with the Observable
primitive. My complaint isn’t that this steals SEO, it’s that this becomes
less searchable because any search for “Observable JavaScript” is going to
turn up RxJS/MobX or one of the other libraries that implement Observable
primitive types.

Edit: with regard to ReactiveX...well yeah. But it’s nice that it’s
implemented in so many languages! (Not just RxJS)
[http://reactivex.io/languages.html](http://reactivex.io/languages.html)

------
whymsicalburito
This product is very confusing. What is a "magic notebook" and why do I need
one?

I wish companies like these would just explain their product in simple
language like a normal person.

~~~
jacobolus
You might enjoy one of these as a starting place:

[https://observablehq.com/@observablehq/five-minute-
introduct...](https://observablehq.com/@observablehq/five-minute-introduction)

[https://observablehq.com/@observablehq/introduction-to-
noteb...](https://observablehq.com/@observablehq/introduction-to-notebooks)

[https://observablehq.com/@observablehq/why-
observable](https://observablehq.com/@observablehq/why-observable)

~~~
whymsicalburito
Thanks, those are good articles :)

This is what should be on the homepage!

------
XCSme
Click-bait title, it's not what you think, not about RxJS Observable, but some
company/product.

------
its_the_future
IMHO call it something other Observable? Observables in JavaScript and
development are something else, only reason I clicked the headline is due to
the confusion, and I'm slighly upset and baseline hostile to the product. This
hostility is probably because I suspect the confusing name is intentionally
confusing.

~~~
daotoad
No need to assume malice, other human foibles like attribution bias and hubris
nicely explain the horrific idea of calling your language/tool/project
'Observable'.

I, for one, am irritated by the name and hope they either change it or that
the project fades. Things are confusing enough without this kind of nonsense.
Yes, I get that each cell in a spreadsheet is observing its neigbors. Yes,
it's nice that you can "observe" your code auto updating. Yes it's nice that
people are trying to improve upon spreadsheets as a programming model. Don't
be purposely obtuse right out of the gate by naming your project after a
widely used pattern, tool or technique. Call it Cells or Panopticon or
something. Please.

In other news, check out my new web framework, called MVC.

~~~
jacobolus
Is this really that common a term in computer programming? I can’t say I see
it used with any regularity. Maybe it’s a common term in some specific
programming subcultures? Apparently it’s a deprecated Java class,
[https://docs.oracle.com/en/java/javase/11/docs/api/java.base...](https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/Observable.html)
and something in RxJS (which I had never heard of before doing a web search
just now) [https://www.learnrxjs.io/concepts/rxjs-
primer.html](https://www.learnrxjs.io/concepts/rxjs-primer.html)

The term “observable” used as a noun in a programming context seems to me very
clunky and vague. YMMV.

I am much more familiar with the term “observable” in physics.
[https://en.wikipedia.org/wiki/Observable](https://en.wikipedia.org/wiki/Observable)

~~~
Procrastes
The Java class and many other occurrences grew out of the name of the
Observer/Observable design pattern[1] in the "Gang of Four" "Design Patterns"
book.[2]

1\.
[https://en.wikipedia.org/wiki/Observer_pattern](https://en.wikipedia.org/wiki/Observer_pattern)

2\.
[https://en.wikipedia.org/wiki/Design_Patterns](https://en.wikipedia.org/wiki/Design_Patterns)

~~~
jacobolus
The Go4 call this a “Subject” rather than an “Observable”. As far as I can
tell the only occurrence of the word “observable” in the Go4 book is:

> _Other user interface toolkits that employ this [Observer] pattern are
> InterViews [LVC89], the Andrew Toolkit [P+88], and Unidraw [VL90].
> InterViews defines Observer and Observable (for subjects) classes
> explicitly. Andrew calls them "view" and "data object," respectively.
> Unidraw splits graphical editor objects into View (for observers) and
> Subject parts._

