Waiting..
Auto Scroll
Sync
Top
Bottom
Select text to annotate, Click play in YouTube to begin
00:00:00
this talk is a reprise of a presentation given at the programming 21 conference on the topic of live ids in the web browser and why they're so damn hard to do
00:00:14
that format was a conversation starter which included this presentation followed by interactive q a and we weren't allowed to record that so i'm reprising it here so the first
00:00:28
thing we want to do is to scope this out what i won't be talking about is just as important live ids for example for statically typed languages are an open question there's deep
00:00:40
philosophical problems with doing that and that's a rat hole i won't be pursuing today what i will be talking about is relevant pretty much for all dynamically typed languages
00:00:53
but not all of them have a tradition of live ids at all and certainly not in the browser and i'll focus on small talk family languages which have the strongest such tradition and
00:01:04
with which i'm the most familiar and which i've done a lot of work implementing myself maybe mentioning a bit of javascript as the native language of the browser as well so some design dimensions that we might
00:01:18
want to consider and by no means an exhaustive list things like javascript versus wasm if we implement in javascript things are simpler it's a higher level language
00:01:31
but wasm has advantages we can take existing c or rust code for example and fairly easily convert it to wasm which means that we can reuse existing
00:01:43
implementations we may be able to get higher performance the cost as i said is higher complexity but the main topic i want to discuss is the trade-off between using a compiler
00:01:56
and a virtual machine with newspeak we've done both and we found that compiling to javascript is just really really painful because you really can't get the exactly
00:02:09
right semantics there are other advantages as well to virtual machines for example you can if you reuse existing infrastructure like small talk snapshots newspeak doesn't use such snapshots or
00:02:22
images but many small talks do for example if we look at something like squeak js this is a squeak vm implemented in javascript and it can reuse actual squeak images that are saved unchanged and load them
00:02:35
into the browser which is kind of cool so that's an advantage you get there so let's look at the newspeak system so it runs in the browser as you can see
00:02:46
and it is a virtual machine written in c compiled into wiser so that a lot we could reuse that existing interpreter and
00:03:02
we can now see what we'll do with it and illustrate some of these points so let's say that i wanted to create a bank account oh no it doesn't work fortunately we have a debugger
00:03:16
and that's one of the points here that we have a debugger and it isn't the chrome debugger it is an actual newspeak debugger designed for newspeak written in newspeak something that you can read its source code in the id and
00:03:28
change it and manipulate it in newspeak and with the features that you want none of which really applies if you were trying to work with a built-in debugging infrastructure in the browser so as an example of such a feature uh
00:03:42
here we can easily add since we had a mis you know we had a does not understand and we can now correct this by adding the missing class bank account and we have a nice feature that does that
00:03:55
for a sort of semi-automatically and when we go back we can restart the thread and continue and we have an instance of bank account
00:04:08
not a very interesting instance but we have one now to make it interesting we can go to the class and say add a
00:04:20
instance variable such as balance and lo and behold our object the instance we were looking on before uh in this inspector
00:04:36
now has a balance field it's nil we didn't tell it to do anything else to do anything so let's try and change that but before we do that i want to actually mention what happened here because we changed
00:04:50
the definition of the class and added a feel to it and auto magically got all instances in the heap to have this new field already right this is what small talk environments have been doing for 45
00:05:03
years but it's really hard to do in other environments because you can't even find the instances that have to be reshaped automatically and how you reshape them how you
00:05:15
allocate that memory how you correct the references all that stuff there's no support from that it's extremely tiresome and difficult to work around and if you're doing this without your own virtual machine
00:05:28
so let's say that we actually want to make this balance something reasonable say zero now let's go back to our workspaces and we can
00:05:45
evaluate this again and this instance has a balance of zero what about our original instance it still has a balance of nil and that's to be expected because just the fact that we change this
00:05:59
this initialization code it doesn't mean that we actually want all the instances in the heap to be reinitialized they may have gotten to some particular state for whatever reason and we probably want to preserve that as
00:06:12
not necessarily throw them back to the beginning of how they should have been created and so um what do we do about that
00:06:22
well uh we should be able to do something like now let's see what this does
00:06:54
well here we have an array and in it are two instances of bank account the one with the zero balance and the one with the nil balance so at least we can actually gather all the instances that exist in
00:07:08
the heap of this class which is not something that you can really easily do without doing your own memory management and so that's one of the features that
00:07:19
again you get out of having your own virtual machine but we probably want to fix them and so let's add some code
00:07:32
that will do that let's say that if the account balance is not nil or rather if it is nil we probably want to set it to something
00:07:47
and so we'd say let's say let's set the balance to well if we were reinitializing we'd say zero but we'll give them a stimulus bonus and say
00:07:58
200 and we then evaluate that and then let's look at our array again and lo and behold we still have the one the ones with zero still have zero the freshly initialized ones
00:08:11
but the uninitialized one now has the balance of 200 which is what we were after so this is again an example of features that are really really hard to get without doing your own virtual machine or a lot of
00:08:23
really complicated work that kind of work breaks down in corner cases and and is really really difficult to do on the other hand the virtual machine does have disadvantages
00:08:36
for example uh now you have two heaps you have the heap you're managing in your virtual machine you have the heap in the host system in javascript and you're likely to be exchanging objects among them and they may have circular references
00:08:50
and all kinds of things but they don't know about each other and so if you do nothing they will you know they may literally disappear under your feet that is you may reference a javascript object and javascript doesn't know that
00:09:03
you're holding on to it and it'll disappear or vice versa so if you do this right you have to see to it that they're held on to and then you have a storage leak unless you do it in a more sophisticated way
00:09:15
and it gets kind of hard and problematic and costs you performance and so forth uh generally the virtual machine approach costs you performance or if you actually you should maybe create a new jit for wasm and
00:09:29
that's probably the right thing to do but again it's more complicated and more work uh then there's a whole issue of the ui so again it's a native versus uh
00:09:42
simulated issue um if we look at something like squeegee yes well this this benefits from the graphic design of uh you know efforts by
00:09:54
uh well-meaning amateurs they don't have the resources for design that say uh professional large organizations like the major vendors do but it also has nice features that no
00:10:06
one else has so you can take your windows and you can rotate them that is not something that you can do if you're using your native dom on the other hand if you are using your
00:10:18
native dom you can do things like take advantage of all the built-in features you have good fonts you uh you can use the systems mechanisms for say enlarging or reducing
00:10:31
the size of things and so forth you can also do interesting things of other kinds so let's look at bank account and let's look at the help text so the help text here is i'll show you soon actually written
00:10:44
in html but it embeds live newspeak widgets so this uh this menu here is exactly the same menu that we have that is explaining that exists on the
00:10:57
class and if we're going to go here we can click on this and it actually works from the documentation the buttons are live and it shows us that the thing that was presenting
00:11:09
the class bank account is a class presenter as you'd expect and we can go to the source for class presenter and we can look at help text and here is the actual html that was defining the
00:11:21
help desk and if you don't believe me we'll open it here again because this is a class as well and it's all live for example if we click on this here are references to class presenter
00:11:35
and you know all the other buttons work the same way and moreover we can change it if we go here and say
00:11:55
and we accept that change and here's our help again with this new thing and if we go back to bank account its help has changed live as well and all of this was
00:12:10
conveniently defined for us using html which the browser can process and we can use it as a as a markup language built in into our system so that's another
00:12:22
advantage of using uh you know the dom directly on the other hand for example that problem storage leaks that i talked about before this makes it way worse because now we have lots and lots of objects across crossing
00:12:35
between the the newspeak ui and the dom and if we don't do anything about it we get a monumental storage leak which is a problem right now in the system lastly there's this distinction between
00:12:49
local remote there's the the approach that says that the web id is just a facade for for a server somewhere and that's easy to do in a way it's just a matter of building up ui but of course it defeats the whole
00:13:01
purpose of having an id in the web browser so that we can actually test and develop the code and interact with it in the environment where it'll actually run as opposed to on some server somewhere
00:13:12
and so i i don't really think that's uh that's as interesting you know we still have some of the same problems of how we implement it perhaps but they're different we can use our native implementations to some to some extent
00:13:25
but as i said it's kind of not what our focus is because it's really uh defeats the purpose the whole advantage of having a web id is that we can develop functions and
00:13:37
applications for the web in the environment where they're going to run and immediately test them and interact with them live and so that's the essence of the presentation i hope you found it interesting and
00:13:51
the newspeak web environment will continue to evolve and hopefully there will be more to say about it soon thank you
End of transcript