jQuery Sliders (Example Packs) for Likno Web Scroller Builder
The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016
-
Upload
badoo -
Category
Technology
-
view
441 -
download
0
Transcript of The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016
![Page 1: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/1.jpg)
The Magic of the Infinite Scroller
Konstantin Dzuin16th of August, 2016 London CSS Meetup
![Page 2: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/2.jpg)
Hi, I am…
Konstantin Dzuin
Mobile Web developer (html/css) Badoo, London, UK
html/css developer since 2002Badooer since 2013
Twitter: @kdzuin
![Page 3: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/3.jpg)
3 CSS
developers
7 JS
developers
5 QA
engineers
Mobile Web Team
![Page 4: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/4.jpg)
People NearbyWe have different ways in which we visualise users. People Nearby is a section
in our application where we display users you have bumped into, or just people nearby according to your location.
![Page 5: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/5.jpg)
The Contact ListA list of all the connections made both existing and new chats, and matches.
![Page 6: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/6.jpg)
Visitors, Favourites and more…
![Page 7: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/7.jpg)
The Challenge
Over 320 million usersThe great number of users that are affected by our solutions. How to display all these users in a single long list?
Smooth UXSupporting Android 2.3+, iPhone and Windows phone devices.
Preserve the StateNavigating through the application (page-page-back)Rotating the device
![Page 8: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/8.jpg)
Solutions on the MarketCurrently there are a lot of solutions to this on the market but none of them suited our needs. We wanted a balance between maintainability and the-best-technical-idea-ever!
![Page 9: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/9.jpg)
Google / iScroll
Complexities of an infinite scroller demo
iScroll, smooth scrolling for the web demo
![Page 10: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/10.jpg)
• Re-use DOM elements
• Layout is built by JavaScript
• Scrolling is native / Scrolling is controlled by JavaScript
The Technique
![Page 11: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/11.jpg)
CSS: Google
.element
position: absolute; transform: translateY() transition: transform
all the elements are reused and repositioned using translation
.sentinel
position: absolute; transform: translateY() transition: transform
sentinel pixel is translated to the bottom + ‘page’ height to create new scrolling space for new elements
.runway should be empty and all inner elements moved to GPU processing
![Page 12: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/12.jpg)
CSS: iScroll
.element
position: absolute; transform: translateY() transition: transform
all the elements are reused and repositioned using translation
.canvas
position: absolute; transform: translateY() transition: transform
• the whole canvas is translated • smooth and configurable perception
![Page 13: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/13.jpg)
All good but complicated
+ 60 fps, Really smooth UX
+ Configurable scrolling perception (iScroll)
– Layout is built by JS, responsibility to maintain the relationships is on JS side
– Difficult to scale and re-use
![Page 14: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/14.jpg)
Nothing But the Browser
![Page 15: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/15.jpg)
• No re-use of DOM elements
• Layout is built by CSS
• Scrolling is native
The Technique
![Page 16: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/16.jpg)
Simple but limited…
+ Layout is build by CSS
– Low performance
– Browser will eventually crash
![Page 17: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/17.jpg)
Our Solution
![Page 18: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/18.jpg)
The Technique
• Do not re-use DOM elements
• Hide elements outside the viewport
• Do trust the browser with scroll and layout
![Page 19: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/19.jpg)
So, how do we hide the elements?
![Page 20: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/20.jpg)
displaynone
visibilityhidden
![Page 21: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/21.jpg)
Options
display: none
two extra blocks with calculated
heights before and after the content
calculation of box models before hiding, excluding them from rendering
visibility: hidden
blocks are still in the flow and occupy
their height
calculation of box models,keeping them rendered without effects
![Page 22: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/22.jpg)
Who wins?
display: none
two extra blocks with calculated heights before and after the content
calculation of box models before hiding, excluding them from rendering
visibility: hidden
blocks are still in the flow and occupy their height
calculation of box models,keeping them rendered without effects
![Page 23: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/23.jpg)
Who wins?
• No significant difference in performance
• No need to create and calculate extra elements somewhere
• Even works on slow devices
display: none
two extra blocks with calculated
heights before and after the content
calculation of box models before hiding, excluding them from rendering
visibility: hidden
blocks are still in the flow and occupy
their height
calculation of box models,keeping them rendered without effects
![Page 24: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/24.jpg)
Let Us Compare
![Page 25: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/25.jpg)
Video comparison Google iScroll Browser Badoo
![Page 26: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/26.jpg)
Let’s change the design…
People Nearby
![Page 27: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/27.jpg)
The Web and Mobile Web are grown up
We can trust the browser
We need to help the browser a bit
The less we reinvent under the browser’s hood – the easier the process of maintenance for the whole system
Just imagine that…
![Page 28: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/28.jpg)
Questions?
![Page 29: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/29.jpg)
Thank you!
![Page 30: The Magic of the Infinite Scroller - Konstantin Dzuin - London CSS Meetup 2016](https://reader031.fdocuments.net/reader031/viewer/2022022412/58f0c6ae1a28ab436e8b4585/html5/thumbnails/30.jpg)
https://twitter.com/BadooTech
https://github.com/badoo
https://techblog.badoo.com/
https://twitter.com/kdzuin
http://kdzuin.ru/demos/infinite-scroller/
demo videos