 They they always put me like right after lunch on the last day. I think I always have this spot So just because I like having fun and I've got to be up here standing up and Everyone just had some lunch and you're probably getting a little tired, right? I Want everyone to stand up, please everyone stand up Including Sally young All right Okay, everyone stand up put your hands in the air We'll go those fingers or something do something silly. All right, perfect Thank you. Now. I know that at least everyone was awake at some point While I was up here, I think I'm okay to start there's no one in the back like waving at me or anything Are you waving at me? Oh quick cool? Thumbs up. So Thanks for coming to the session. It's about Houdini and it's about the future of CSS At Drupal con Vienna 2017 This is the this is part of the horizons track and I thought I would give a little bit of a reason why it's in horizons First of all, this is a presentation about front-end Technology it has absolutely nothing to do with Drupal But as with all things for an end eventually it makes something easier to do no matter what your CMS is Eventually Drupal users will find benefits to this So, you know advances in CSS made responsive web design possible that made lots of other things possible in Drupal and so forth same with this additionally, this is Brand new and in flux and not released yet. So it's kind of like on the horizon In time as well. So just sit back relax. There's nothing to try practically nothing that can be done This is just a process that's starting and going to be finalized probably, you know after some time but it will dramatically change the process of CSS development when it does land But like I said, there's really nothing you can go try today except for a few little dude ads and widgets and Just take it all in and keep it in mind for the future So good news we'll start with the good news because this always ends up being a question that asks gets asked at the end This is a cross-browser initiative that has the buy-in of the big five. So All of the browser vendors have identified this problem. It's solving a problem. That's inherent to the de facto rendering process in the browser itself So it's universal and all of them are interested in solving it There is a website up with a lot of these up-and-coming specs someone makes a little landing page and Says is x ready yet? And so you can go to is Houdini ready yet? And check it out. So the red boxes there say no signal. This is a little tiny on this projector but the Red boxes don't mean they're not doing it or don't support it. It just means they haven't the dev rail team hasn't Made a signal as to whether or not where they are in the process of shipping this feature As you might be able to see the chrome team is the most active and even they have no signals on Some of these components But like I said all five of them are interested and actively involved in talks. I can't even think of another web technology where The the the five of them sat down in a room and talked together about something like even Apple is doing this So you can always check back is Houdini ready yet, of course as it starts shipping it'll show up on can I use per usual? So the title of the talk was called the future of CSS, but it's really more like the future of CSS specs Or tools or libraries this kind of thing Because the good news is that CSS will remain the same as it's always been From an author's perspective. There's a really simple declarative syntax that you can use To provide powerful features to your front end So much like with 3d transforms You don't have to know how to render anything in 3d most of the hard work is done for you You just say rotate my DOM element a few degrees and so that's the real power of CSS Whether it's CSS grid or the box model positioning anything like that so What we're going to look at here are tools that will basically provide CSS authors with familiar looking syntaxes that do crazy powerful things Another benefit is that CSS will be able to evolve more quickly with Houdini We're going to look at some diagrams that will clarify this more in a minute, but a Common comparison and we're all familiar with is that CSS features have historically taken years to ship and We hear about something and then three or four years later. It's finally safe to use Meanwhile in JavaScript with transpilers and other tools like Babel Someone can think of an idea and a week later be using it in production because they can transpile it to a different JavaScript syntax that is available in the browser today and Houdini will kind of have that effect as well in that in a Houdini compliant browser One will be able to use future CSS that hasn't been invented yet or isn't quite normalized the behavior isn't quite normalized and so we do this in other Steps of our dev process right now auto prefix or or you know vendor prefixing was the predecessor to auto doing that CSS hacks were before that and we were selecting various behaviors and manually correcting for browser differences and This is just another iteration of being able to normalize the behavior of browsers Which is very powerful that is in fact the main power of JavaScript and why it took over the world And it's the most common runtime is because it's so flexible it can fix itself and behave the same if jQuery is the most popular example of this that you know may do not have to do a bunch of DOM manipulation You just use jQuery so the extensible web manifesto is a guiding principle for Web vendors so web browser vendors And the browser vendors this is just a an agreement. There's no There's no binding aspect to this but the extensible web manifesto Says that in order to move the web forward we should prefer flexible low-level API's instead of Gravitating towards opinionated high-level features a relevant and current example of this is Application cache which was part of the html 5 spec which took years to be finalized shipped and used inside the browsers And then it was really a train wreck When it when it started being used in the real world there were big flaws in it and people couldn't Use it for what it was intended for But we didn't know that until it got shipped and we couldn't use it And then now there's this broken feature that is practically unused Across the greater web the response to that bad feature was to develop the service worker spec and Service worker is a super set of application cache and in fact, it's trivial using You know tools to basically generate app cache Behavior inside your service worker There's like a button you press on one of the the tools and you just get app cache with service worker so instead of giving developers this this thing and saying you have to do it this way a lot of these Powerful specs are being written to be very flexible. Yes, you could do more damage this way, but The trade-off is that then build tools can be made and packages can be you can customize this and have very many products built on top of a web spec and Like I said service worker is a very relevant one today and Houdini is built in this spirit so that Things can actually be shipped a little more quickly behind browser flags and they aren't exposed to the public until the spec is finalized But in the meantime you can turn a flag on the experimental web platform flag and in blink in chrome and You can start using it and building things even if it's just a code pen and then they can get developer feedback people can even push it out to the real world and segments that you know people that have this flag turned on can Use it and give feedback So there is actually a manifesto and the slides are linked on my on the Drupal session page So just go there and it's just called the Extensible web manifesto.org So Houdini What it does is it modifies the browser engine and We're gonna go through the process of the browser engine really quick here This is why I marked the session advanced even though It's kind of an overview because if if this diagram if this is the first time you're seeing this diagram a lot of this won't Click immediately But but this is the the way that a web browser Goes from taking text files on a server and turning them into pixels on your screen There is this is even kind of like a high-level overview But a front-end dev the average front-end dev like myself or many people in the crowd. This is how we understand it And so the first box here is parser That is when the text comes to your browser and the browser reads through it tokenizes everything and builds two object models One is the document object model the DOM and the other is the CSS object model the CSS on doesn't really roll off the tongue But that's what it is So these two object models are big trees you can think of them as a big hierarchical tree and What happens is they're? Combined together inside the browser and you get the cascade and So then what happens is these elements either match up with each other or they don't and then the browser knows how to style the elements In the DOM So once everything once the DOM has been styled It moves on to a layout phase and it positions various boxes all over the place from top to bottom your web page gets these boxes and It might be a layout level box. So we're just doing header main body element footer But inside those we have various components You know little card with a bio picture and a title and you know a Twitter link Each of those have to be laid out in turn. So the layout step, you know provides the general structure of the page then The non-layout CSS properties are painted. So this would be background color or gradients box shadows text colors and all these kinds of things that are visual Except for a set that will come in the next step Which is the composite phase and this is the GPU layer and there are just a few properties That are done after the paint has happened and those are This isn't an exhaustive list, but opacity CSS transforms and oh man. I had another one in my head filters CSS filters those are Examples of GPU accelerated CSS properties which are applied during the compositing phase And those can be sped up so the DOM and the CSS on in this diagram have Colors because the DOM is fully accessible by JavaScript Not news and the CSS on has partial JavaScript access, but it's not all the way So when we want to polyfill CSS or we want to change the way that CSS works in any way the go-to solution right now is to edit the DOM and Do some custom? Data handling or logic in the background for instance most element queries or container query Solutions use DOM attributes like data attributes and based on how you know it measures how big the The component is and then applies a label to it like data eq Equals small or data eq equals medium yada yada The problem with that is when we polyfill something and are altering the DOM Every step to the right of the DOM in this diagram. That is all of them Have to be recalculated So when we alter the DOM or even in some cases read from it in order to do this element query thing even reading the DOM triggers an entire render of the of the page again well, actually, it's not Entirely true sometimes but it can cause most of these things to happen the cascade the layout the paint the composite And so doing that once is okay if it takes 30 milliseconds You've traded a tiny fraction of time for something powerful But when you're doing this in response to a scroll event or something that happens frequently Then that's when you get degraded Rendering performance and things look choppy things don't Move smoothly and and you know these kinds of problems so Houdini is basically solving this problem of having to edit something way in the beginning of this process in order to Achieve something that might only be relevant in the end And so all these boxes in this new diagram with Houdini are blue because we'll have scripting access to all of them That's the good news So there will be a spec for each one of these steps now They're grouped into two main categories at the bottom there. There's the CSS properties and values API Which has to do with actually writing CSS or reading it or recognizing it and then worklets Which are basically little JavaScript files and I'll kind of Clarify all these one by one, but there's two main categories, which are either extending CSS or doing custom actions and Out of these two major groups we get each one of these Houdini specs So first is the parser API What this allows us to do is when the browser is receiving raw text from a server it actually allows us to Do the things that Pre-processors have been doing for years already We can add new syntax to CX CSS You could create a whole new block type block being anything. It's between two curly braces You could add new pseudo classes. You could add nesting if you really wanted to I don't think that's Something that I want to try but someone will definitely do it So an example would be adding an extends property to CSS and The browser itself handles this. It's not in SAS beforehand It's not pre-compiled to something that we're doing. You know that can be read today It's just an extends which functions natively in the browser or you might want to write your own media query You know like an offline media query a surprise that didn't exist But I wanted it once I thought of the example This particular spec is now under the web initiative community group I think that's what it's called. It was the responsive images community group before but they've kind of transitioned to a Greater role and so they took this one over. It's not in the actual Houdini task force The next is the CSS typed object model. So we've got a CSS on The the object model that's level one what we have today This is basically CSS object model level two and it adds typing typed variables Now you might think oh, it's not that big of a deal I can catnate a five and a px and now I've got you know my value but When we use type variables What happens is that more things can be transitioned between each other and we get much more intelligent You can animate things that could not be animated before the example that I really hope this solves I I'm not positive that it will do it But this is the type of thing we should see if this is successful that when you have a object that is by default You know you've got a title and it's 24 pixels tall and when you click it You wanted to do some like expand or collapse so to an unknown height because it's just like an accordion with variable height pieces in the accordion normally what I do is I say, okay, you know I got like Min height auto and min or max sorry max height auto max height 24 and you're toggling between this max height variable because Or I'm sorry. I just said what you're going to be able to do Sorry, you're going to be able to transition between auto and a number because right now What you have to do is you transition between 24 and a thousand and you just make sure that a thousand is bigger than the biggest block of content that you have and it makes your transitions funky because if you pick a time it's transitioning between 24 and 202 pixels, but your transition is timed between 24 and a thousand so you get a really fast transition on the open and then a delay followed by a Awkward half transition at the end of the thing and this typed object model is in theory going to be able to solve these types of problems Where even auto is a machine readable number that can be transitioned to or maybe two colors can be transitioned Between two formats it's something like that so Typing variables will allow a lot of flexibility that wasn't present before but it's really kind of an under the hood thing that someone might never even be exposed to and That's the cool part about this someone was be able to use auto and 24 and they'll never know that we ever had this problem The props and values API is an actual spec and what it does is it supercharges custom properties So the last talk was about custom properties if you were here for that one You just got familiar with them and this should be showing something. That's a little bit familiar The deal is that you can register a property, but you can also register its type just like the typed object model You can register a an initial value and its inheritance Behavior so none of these things can happen with custom properties right now They're all strings internally in the browser, so you can't transition between Values often it's just a just it just switches So this will help you define properties and define their behavior, which again lets you animate them transition them and do CSS things That you can't do yet So worklets like I said are kind of mini web workers And I really can't dive into this because I've just got a few more minutes But web workers are off-thread JavaScript that was originally designed for computationally heavy things and The heavy computation is pushed off-thread so that it doesn't block the UI and you can continue using the web app While it crunches a diagram or something and then it spits back the the finished DOM So worklets are also off-thread Which means by definition they don't have DOM access Web workers do have event listeners But worklets won't because the event is this step in the rendering process either the Layout or the paint or the composite step in the rendering is the event that the worklet is responding to Web workers are never They're not designed to run in parallel or execute quickly They are doing really heavy tasks But worklets are designed to be very small very tiny and execute very fast because they in theory are going to be run up to 120 times per second, you know 60 is our is our goal Now but you know even if like with an iPad Pro that thing runs at 120 Hertz So eventually the the the threshold is going to get moved up and so There are pieces of the JavaScript APIs that actually aren't available in worklets because they want to restrict slow operations and Ideally you would even use code that can be compiled down to like wasm or or web assembly so that it can run at near sea speeds That's the idea in the end so Worklets sorry to throw all this at you. I've got 25. I've got three minutes so an Example of a layout worklet would be something like masonry Masonry is a classic thing where it delivers something really cool to you But it's thrashing your DOM in order to in order to deliver that thing And so as a worklet masonry all the logic that masonry does can be moved off to this you know in theory near sea speed Script and then the developer can just write display masonry instead of display block or display inline You've just got this whole new layout available to you and you have custom defined layouts. You could do display Cube, you know anything anything you can think of Which I think is a really cool idea And so instead of you know clogging up this DOM phase with with this layout type scripting You're doing it in the layout phase of the browser and everything is a little bit more compartmentalized and cleanly executed The paint API is another one it essentially provides the functionality of the canvas tag as an image as a CSS image, so You know dot face anything with a face class will get this face painted and you can Enhance these you can enhance the worklet with CSS custom properties that act as arguments to a JavaScript file So every custom property that has to do with face and I you know you don't have to name it this way But I did because it seems like a easy way to understand But now I've said face mood is is happy by default and then if you've got some sort of you know Like a BEM modifier where you want to make the face sad then the face mood is sad and it will automatically draw the the sad face and It can be transitioned and do all this nice cool stuff that JavaScript can do you know That it doesn't just have to change it can it can you know tears can can slowly Pour out of my face. I should have done sad and then happy because I have Houdini. Okay. I kind of mess that up So the tears are going away now And then this is actually the coolest one and I think it's the most anticipated by both the browser vendors and personally myself for sure Composited scrolling and animation and what this will do is This is finally at that last step in the process. This is the composite step where we do all those fast GPUs executable properties and we will be able to key very GPU friendly properties to other things besides time So Everyone knows pull to refresh right and no one can make that shit work well on the web You know like you can't get a really smooth fluid cool Shape that morphs as you wiggle it up and down with your finger and you try to figure out how that particular one looks good But animation worklets are designed specifically to let that sort of thing happen So instead of using a timing function and then actually there will still be a timing function with animations But the timing will not come from time itself. It will come from user input So you will be able to advance through an animation using user input scrolling Gestures and that kind of thing and that makes me super excited because it will seriously just bring web websites will look like native apps and period it will be equal because they'll be running at a Speed difference will be meaningless after a couple rounds of optimization and stuff like that as we as the stuff matures so Interactions on par with native apps is the thing that I think will really make blow this up huge and They're actually chrome is already starting to build new specs On top of this Houdini these Houdini features the pieces that they have and although they don't expose them to us They're already there inside chrome and they're building new features with this part of the pipeline already So they rebuilt CSS snap points Position sticky is being re-engineered completely from being like native C code to being a Houdini animation worklet And then as I said the like animations which are based on user input, which will make everything feel so much more natural so This is the set of specs and I know that like there's it's kind of light on details But this is you know as a whole family of specs. This is going to really change the way that You know what CSS can do without really making it harder for the CSS author in general So if you get really excited go check the website again, but you know, it's not really there yet And now that I've given my talk I don't want to be saying you should listen to me just because I'm me So my name is Chris and I live in Germany But I'm happy to talk about this stuff later. I'm a little short on time I don't know if we have any time for questions really is New alright, so unfortunately, I want to run to another session that's starting in a second, but Catch me in the hall somewhere the rest of the day There is a sprint happening tomorrow go look for the sprint lounge on the map and go check the website for the details and If you read these slides later, please let me know how you feel and send some feedback on the Drupalcon website. Thank you very much