High performance web user interfaces - Google I/O 2016

Users expect Progressive Web Apps interfaces to be responsive and intuitive. In this session we dissect some UI components, and see how we can build them in a performant way that delights our users.

#io16 #GoogleIO #GoogleIO2016

[shahidify-]

Every time I see ur video, I feel useless on myself.
Saw this already a while back, still feels something new.

[SpectatorAlius]

The thing I like best about his acronym RAIL is that now that we have that, we can describe apps that fail to meet this standard as 'derailed', i.e., a train wreck!

[harpymaslow]

Great talk Paul, thanks. FLIP looks great, but shouldn't we see a "flash" when you set the First and Last states ? Or do you set the opacity to 0 or something to hide it, or is it just too fast for the user to see it ?
Second question, in your example you're scaling (via transform) the list item you clicked, so it shouldn't push the previous and following list items, right ? Do you need to animate those separately ?
Last question, it looks like Blink is the only rendering engine not triggering layout + paint... so does it mean that those FLIP animations won't work well on those ?

[angelmontes]

at 8:38 that figure means what? is it a layout or an animation when the mouse Is hovered?
also

[lilkwarrior]

Just realized this during my second viewing of this: At 16:10, shouldn't it be `translateX <= 0` or `translateX === 0` bc the use of `Math.min(0, …)`?

[Aides]

In regards to the FLIP caveat of child scale:
Would an inverse transform on the children be a fitting solution or does that have it's own caveats?
i.e.
.flipScale { transform: scale(2); }
.flipScale > * { tansform: scale(0.5); }

[JamesCoyle]

A few questions about the FLIP method:

How would you do this if you needed the element to move horizontally? This just moves the element in a straight line and doesn't implement the arc motion defined in the MD spec.

How do you deal with situations where you need to make the element smaller than it was originally? This method will scale the element up causing it to blur.

How do you keep existing transforms such as rotations (which rely on transform origin)? This is one reason I think transforms need to be split into separate properties for rotate, translate, and scale rather than bundling them all into one.

[Pesthuf]

Is the old translateZ(0); hack blink / firefox specific? If no, it seems like we still have to use it instead of the smexy new will-change because of the IE-victims. And possibly Safari.

[shakti]

Cool stuffs! Mobile Apps are moving to web apps

[usasikh]

I just found out about progressive webapps, this ui-element performance is amazing on mobile (Native like) I was wondering how would i use these in react/redux. Any suggestions or links to guide would be greatly appreciated.

[erez]

great talk
? where can i find the source code for expand and collapse

[rubendietrich]

Why they have MacBooks??? They have to use CHROMEBOOKS

[JacobMischka]

Is this dude just wearing socks without shoes

[swyxTV]

when i grow up i want to be @aerotwist