Running up and down the Web stack

As my mind shifted into consciousness on waking in London this morning, I noticed a dream where mice were running and up and down keys on a piano.

I have been thinking about how nice it is to see the Web platform evolve in both directions up and down the stack.

In the beginning there was HTML to define documents. Then we added styling via CSS, and dynamic behavior via <script>.

We tended to focus a solution in one of the worlds, and there were a few links between the worlds.

Animation

At some point we wanted to move things around, and the only way to do so was to take that script thing and change the location of the contain of the thing you want to move.

That was sloooooow. How about if we can declare animations and let the browser do all of the work? And then we ended up with CSS transitions and animations. GPU to the rescue.

But, what if we want to do some kind of movement that doesn’t fall into the auspices of the CSS capability? Ugh.

You want the best of all worlds. For common ideas that you can declare, you can CSS away and be done, however if you need something more wouldn’t it be nice to script on top of the performant browser engine rather than trying to do everything yourself (and slow)?

We are getting to that place. With Web Animations we have had the unification of declarative and imperative for awhile, and thanks to work coming out of Houdini we will be able to go through even more of an escape hatch to make sure to hit maximum polish.

For example, with a compositor worker you can ask the browser to keep you in the loop on certain DOM elements. This can allow you to keep elements nicely in sync so you can do keep 60fps as your UI flows around like this:

Service Workers

How do you want to work with service workers? Depending on your use case and how you like to work, you may prefer registering a service worker through your apps javascript:

navigator.serviceWorker.register(‘/sw.js’).then(function() {
 // you now control all pages on the origin!
});

Or you may want to declare the service worker from some HTML:

<link rel=”serviceworker” href=”/serviceworker.js”>

There are many other areas where this comes up. If the platform has the capability to create a custom element, it is nice to be able to register my own element both declaratively and imperatively.

As we continue to extend the Web, I like what I am seeing with respect to taking care of: core platform capability to how to access it to how to make it very productive for developers.

Streams is a fantastic, latest example of how a team will be able to go the extra mile for their users:

Make the common tasks trivial, and make custom tasks possible.