Seamless Navigation with Portal

Transcript

1. Seamless Navigation with Portal @adriantirusli Front End Developer IDS Skincare International 1 chrome dev summit extended 2019
2. 2 chrome dev summit extended 2019 Chrome UX Report
3. Tipikal User Experience di web saat ini... 3 chrome dev summit extended 2019
4. Tipikal User Experience web saat ini... 4 chrome dev summit extended 2019
5. Tipikal User Experience web saat ini... 5 chrome dev summit extended 2019
6. Tipikal User Experience web saat ini... 6 chrome dev summit extended 2019
7. Apa saja opsi yang ada untuk mendapatkan UX yang baik? 7 chrome dev summit extended 2019
8. 8 chrome dev summit extended 2019
9. 9 SPA chrome dev summit extended 2019
10. 10 SPA MPA chrome dev summit extended 2019
11. 11 chrome dev summit extended 2019 Seamless Experience http://bit.ly/start-activity-android
12. 12 Thanks to Web Platform now we have <portal>
13. 13 chrome dev summit extended 2019
14. 1. Anchor Tag <a href=”example.html”>Contoh kok</a> 14
15. 2. Snippet 15
16. 3. <iframe> 16
17. 4. Portal <portal src=”example.html”></portal> 17
20. 20 Cek apabila browser support <portal> // Check if <portal> is available if(!('HTMLPortalElement' in window)) { return; }
21. 21 Buat <portal> deh // Check if <portal> is available if(!('HTMLPortalElement' in window)) { return; } // Create and append the element portal.src = 'another-example.html'; portal.style = '...'; document.body.appendChild(portal); const portal = document.createElement('portal');
22. 22 Buat <portal> deh // Check if <portal> is available if(!('HTMLPortalElement' in window)) { return; } // Create and append the element const portal = document.createElement('portal'); portal.style = '...'; document.body.appendChild(portal); portal.src = 'another-example.html';
23. 23 Buat <portal> deh // Check if <portal> is available if(!('HTMLPortalElement' in window)) { return; } // Create and append the element const portal = document.createElement('portal'); portal.src = 'another-example.html'; document.body.appendChild(portal); portal.style = '...';
24. 24 Buat <portal> deh // Check if <portal> is available if(!('HTMLPortalElement' in window)) { return; } // Create and append the element const portal = document.createElement('portal'); portal.src = 'another-example.html'; portal.style = '...'; document.body.appendChild(portal);
27. 27 portal.activate()
28. 28 portal.addEventListener('click', _ => { // activate the <portal> on click }); portal.activate();
31. 31 Target Experience Achieved Experience
32. 32 <portal> tidak dilengkapi animasi bawaan, jadi kita bisa membuat animasi sesuai dengan kreasi kita sendiri
33. 33 Menambahkan animasi saat transisi portal.addEventListener('click', _ => { // portal.activate() // animate before activate // it can be CSS transition, // keyframes or even JavaScript fancyAnimation(portal); });
34. 34 Menambahkan animasi saat transisi const fancyAnimation = portal => { portal.style.transform = ` scale(1.0) translateX(-20px) translateY(20px) `; portal.style.transition = 'transform 0.4s'; }
35. 35 Menambahkan animasi saat transisi // If you were using CSS transition... portal.addEventListener('transitionend', evt => { // check if it's the right transition // you want to trigger activation if (evt.propertyName == 'transform') { // Activate the portal portal.activate(); } });
36. 36 adoptPredecessor()
37. 37 Event portalactivate akan aktif setelah halaman diaktifkan // Listen to the portalactivate event // Retrieve the previous page as a <portal> // - The JavaScript state // - UI state // are all saved const portal = evt.adoptPredecessor(); // Append the <portal> to the document document.body.append(portal); } window.addEventListener('portalactivate', evt => {
38. 38 Event dilengkapi dengan elemen predecessor <portal> // Listen to the portalactivate event window.addEventListener('portalactivate', evt => { // Retrieve the previous page as a <portal> // - The JavaScript state // - UI state // are all saved // Append the <portal> to the document document.body.append(portal); } const portal = evt.adoptPredecessor();
39. 39 Back and forth antara 2 halaman tadi // Listen to the portalactivate event window.addEventListener('portalactivate', evt => { // Retrieve the previous page as a <portal> // - The JavaScript state // - UI state // are all saved const portal = evt.adoptPredecessor(); // Append the <portal> to the document }); document.body.append(portal);
40. Accessibility ◎ Google akan membahas lebih lanjut mengenai accessibility dan semantic pada <portal> untuk versi origin trial ◎ Disarankan untuk menggunakan prefers-reduced-motion saat menggunakan animasi .portal-transition { transition: transform 1s opacity 2s; } @media (prefers-reduced-motion: reduce) { .portal-transition { transition: transform 0.001s opacity 2s; } } 40
41. Hindari overloading halaman menggunakan <portal> ◎ Menggunakan lazy loading saat on scroll gabungkan dengan Intersection Observer. ◎ Lebih baik memanfaatkan <portal> untuk interaksi user yang kuat seperti click. ◎ Menggunakan skeleton page saat loading content pertama kali. 41
42. Hindari overloading halaman menggunakan <portal> ◎ Menggunakan lazy loading saat on scroll gabungkan dengan Intersection Observer. ◎ Memanfaatkan <portal> untuk interaksi yang kuat seperti click. ◎ Menggunakan skeleton page saat loading keseluruhan content. 42
43. Resources ◎ wicg.github.io/portals/ ◎ github.com/WICG/portals ◎ web.dev/hands-on-portals/ ◎ github.com/WICG/portals/tree/master/demos/portal-embed- demo ◎ portal-demo.glitch.me 43
44. Thanks! Any questions? You can find me everywhere: @adriantirusli 44