Angular apps for dual-screen devices

Foldable and dual-screen devices are becoming increasingly more common over time, but you may wonder if investing development time to support these devices might be worth it, especially when creating fully responsive web apps is already a challenge. We'll explore how we can adapt existing apps for these new foldable devices, while trying to avoid dealing with the quirkyness of new CSS and JavaScript primitives.

Transcript

1. Angular apps for dual-screen devices with ngx-foldable | | Yohan Lasorsa Yohan Lasorsa | | @sinedied @sinedied
2. Who am I? Yohan Lasorsa [ Cloud Developer Advocate ] Web tech geek, OSS maintainer, DIY lover {   } @sinedied
3. Dual screen devices? @sinedied
4. @sinedied
5. 1982 @sinedied
6. @sinedied
7. 2004 @sinedied
8. @sinedied
9. 2010 @sinedied
10. @sinedied
11. @sinedied
12. So, where to begin? @sinedied
13. Another responsive design target? @sinedied
14. ⚠️ ⚠️ Experimental APIs ahead Experimental APIs ahead @sinedied @sinedied
15. So, media queries it is! @media (screen-spanning: single-fold-vertical) { ... } @media (screen-spanning: single-fold-horizontal) { ... } @sinedied aka.ms/foldable/css-primitives aka.ms/docs/css-primitives
16. Environment variables @sinedied
17. But... things moves fast @sinedied
18. @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:1); @media (horizontal-viewport-segments:1) and @media (vertical-viewport-segments:2); New media queries... @sinedied
19. @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:1); @media (horizontal-viewport-segments:1) and @media (vertical-viewport-segments:2); New media queries... @sinedied With new env vars soon: https://github.com/w3c/csswg-drafts/pull/6474/
20. ...opening up new possibilities? @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2); @sinedied
21. ...opening up new possibilities? @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2); @sinedied
22. ...opening up new possibilities? @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2); @sinedied
23. What about the JavaScript side? @sinedied
24. Window Segments API const screenSegments = window.getWindowSegments(); @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
25. Window Segments API const screenSegments = window.getWindowSegments(); 👆 But that was before community feedback... @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
26. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
27. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; // => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! } @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
28. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; // => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! for (let i = 0; i < screenSegments.length; i++) { console.log(`Screen segment ${i}:`); console.log('- width : ' + screenSegments[i].width); console.log('- height : ' + screenSegments[i].height); console.log('- x origin: ' + screenSegments[i].x); console.log('- y origin: ' + screenSegments[i].y); } } @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
29. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; // => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! for (let i = 0; i < screenSegments.length; i++) { console.log(`Screen segment ${i}:`); console.log('- width : ' + screenSegments[i].width); console.log('- height : ' + screenSegments[i].height); console.log('- x origin: ' + screenSegments[i].x); console.log('- y origin: ' + screenSegments[i].y); } } @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
30. Device Posture API w3.org/TR/device-posture/ Device: single-screen (foldable or not), dual-screen Posture: no-fold, laptop, flat, tent, tablet, book @sinedied
31. Device Posture API navigator.devicePosture.addEventListener("change", () => { console.log(`The current posture is: ${navigator.devicePosture.type}!`); }) @sinedied
32. Device Posture API navigator.devicePosture.addEventListener("change", () => { console.log(`The current posture is: ${navigator.devicePosture.type}!`); }) @media (device-posture: laptop) and (screen-spanning: single-fold-horizontal) { /* Where the magic happens! */ } .videocall-controls .videocall-area @sinedied
33. Demos @sinedied
34. Setting up for development @sinedied
35. Enable browser dual-screen emulation aka.ms/foldable/dev-setup 1. chrome://flags or edge://flags 2. Enable Experimental Web Platform features 3. Open dev tools settings 4. In Experiments tab, tick Emulation: Support dual screen mode @sinedied
36. Android Surface Duo emulator aka.ms/foldable/dev-setup ⚠️ Highly recommended! @sinedied
37. Let's dive in! Let's dive in! @sinedied @sinedied
38. About polyfills... @sinedied
39. @sinedied
40. Current status Feature Implementation Polyfill CSS Spanning ✅ 🧪 ✅ Window Segments ✅ 🧪 ✅ Device Posture ⛔ ✅ ✋ CSS Viewport Window Segments ⛔ ⛔ @sinedied
41. const end = { message: 'Thank you!', slides : 'bit.ly/ngx-foldable', links : 'aka.ms/ngx-foldable' }; alert('Questions?'); {    } @sinedied