Chrome Dev Summit - alla 22 sessionerna
Googles sjätte Dev Summit gick av stapeln 12-13 november och det var som alltid mängder av intressanta keynotes som presenterades. Allt från moderna ehandelsplattformar till webassembly och Virtual Scroll till hur vi ska hantera complexa javascript baserade applikationer. Det fanns något för alla i år känns det som och här har jag samlat alla sessionerna för att du enkelt ska hitta dem.
Dag 1 - Keynote
En round-up av webbplattformens senaste framsteg och det utvecklande landskapet. Keynote täcker också Chrome-lagets fortsatta investering för att flytta plattformen framåt och stödja samhället.
Dag 1 - Get Down to Business: Why the Web Matters
Musik? Kaffe? Idéer? Genom att fokusera på snabbhet och dra nytta av webbens växande möjligheter hittade tre globala företag ett meningsfullt engagemang med nya och befintliga användare överallt. Hör direkt från Spotify, Starbucks och Pinterest om de unika metoderna som de har använt för att bygga och ständigt förbättra sina PWAs och därigenom uppnått tillväxt och framgång.
Dag 1 - State of the Union for Speed Tooling
Mätning, optimering och övervakning av användarupplevelse på webben har aldrig varit enklare. Lär dig om de senaste ändringarna i prestationsverktyget, och hur man meningsfullt införlivade lab- och fältdata i deras utvecklingsarbete. Paul och Elizabeth delar de senaste utvecklingen i Lighthouse, DevTools profileringsverktyg, PageSpeed Insights, Chrome UX Report och Key Performance Metrics.
Dag 1 - Speed Essentials: Key Techniques for Fast Websites
De dåliga nyheterna: JavaScript, bilder och webbfonter blockerar ofta moderna webbsidor. De goda nyheterna: Det finns nog lite utrymme för att förbättra din webbplatss prestanda. Katie och Houssein guidar dig genom nyckelteknikerna i JavaScript, bilder, [CSS] och webbfonter som du kan använda för att maximera prestanda på din webbplats.
Dag 1 - Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
Eftersom de flesta användare har tillgång till webben på språng är det viktigt att vi levererar upplevelser som laddas snabbt och löper smidigt, oavsett nätverksförhållanden. Och med servicearbetare som nu stöds i alla moderna webbläsare kan vi utnyttja det som en kärna del av vår applikationsarkitektur och prestationsstrategi.
Men inte alla tjänstearbetare implementeringar skapas lika, och de kan erbjuda väldigt olika prestanda fördelar. Varje prefetch- och cache-beslut kommer med hastighet versus färskhet och bandbredd vs lagringsutbyte. Följ med oss för att upptäcka hur du utvärderar och bygger olika servicearbetarflöden för din app, vilket ger dig den bästa upplevelsen.
Dag 1 - Smooth Moves: Rendering at the Speed of Right ®
Följ oss när vi refaktorerar en mikrointeraktion för att blockera trådar, blockera användare och vrida upp den till 60fps. När väl webbplatsens resurser har levererats snabbt, hur ser vi till att vi håller den höga baren för prestanda? Vi behöver förstå rendering och interaktion på sidan.
Dag 1 - Complex JS-heavy Web Apps, Avoiding the Slow
Om du kan göra det utan JavaScript, är det vanligtvis den snabbaste vägen. Men vad sägs om när JavaScript är det enda sättet? I den här sessionen tar vi en JavaScript-tung PWA och laddar den på mindre än 5 sekunder på 2G, med webbmontering, arbetstagare och webbkomponenter.
Day 1 - Building Modern Web Media Experiences: Picture-in-Picture and AV1
Lär dig om hur de senaste mediarelaterade funktionerna på webbplattformen kan användas för att bygga upp effektiva och härliga webmedieupplevelser. Det här samtalet täcker både API-skivor (till exempel Picture-in-Picture) och codecs (AV1), genom att granska några nyanser av hur de kan genomföras framgångsrikt tillsammans med exempel och demo.
Dag 1 - Modern Websites for E-commerce in the Real World
Medan webben har skapat ökade möjligheter kräver framgång för e-handel i verkligheten att man tar en uppmätt strategi. I den här sessionen hör du hur vissa e-handelsföretag tar itu med utmaningar som organisatorisk komplexitet, arvskod, mätning, prioritering och mer för att ge bättre webbupplevelser och förbereda framtida behov och efterfrågan. Du lär dig också hur AMP och PWA har spelat en roll för att forma dessa moderna konsumentresor.
Dag 1 - Progressive Content Management Systems
Content Management Systems (CMS) är mjukvaruplattformar som är utformade för att förenkla skapandet och hanteringen av webbplatser och deras innehåll. Numera drivs cirka 50% av webbplatser av någon form av CMS-plattform. I det här samtalet diskuterar vi vår erfarenhet av att flytta ett komplext CMS (dvs WordPress) framåt längs Progressive Web Road genom att integrera moderna möjligheter (t.ex. Service Worker API) och progressiva teknologier (t.ex. AMP) i sin plattform och ekosystem, och hur lärdomarna lärde oss kan tillämpas på andra CMS.
Dag 1 - Making Modern Web Content Discoverable for Search
https://www.youtube.com/watch?v=YP2tMBhyU0I
Många moderna JavaScript-ramar gör deras HTML-innehåll på klientsidan, förutsatt att varje miljö som når sina sidor är så modern som de är. Men många sökmotorer - inklusive Google Search - uppför sig inte exakt samma som en användares webbläsare. I den här sessionen kommer du att lära dig några fakta om Google Search, dess rendering pipeline och de olika verktygen som kan hjälpa dig att diagnostisera klyftan mellan vad dina användare ser jämfört med vad Google Search ser. Du har byggt en snabb och engagerande hemsida - låt oss se till att det också kan upptäckas.
Dag 2 - Keynote
https://youtu.be/SbUAkQ_s7Os
Följ med oss för en koll på webbramar och webbplattformen och hur de kan vara starkare tillsammans - skapa bra användarupplevelser i skala! Tala om användarupplevelse: Vi har pratat om saker som jank och 60 bilder per sekund i flera år, men vissa av dessa saker är fortfarande svåra att uppnå på ett pålitligt sätt på webben. Med en ny uppsättning webbstandarder förändras detta, och vi är mycket glada att presentera dem för dig!
Dag 2 - Feature Policy & the Well-Lit Path for Web Development
https://www.youtube.com/watch?v=igHvSUrLqXc
Funktionspolicy är en ny primitiv som tillåter utvecklare att selektivt aktivera, inaktivera och modifiera beteendet hos vissa API och funktioner i webbläsaren. Det är som CSP, men för funktioner och API: er! Team kan använda nya verktyg som Funktionspolicy och API för rapportering för att fånga fel innan de växer utom kontroll, se till att webbplatsens prestanda håller sig hög, behåll kodkvaliteten hälsosam och hjälpa till att undvika webens största fotpistoler.
Dag 2 - virtual-scroller: Let there be less (DOM)
https://youtu.be/UtD41bn6kJ0Rendering prestanda är huvudsakligen en funktion av hur mycket du gör - för mycket DOM kommer att sakta ner din webbplats till en krypning. Inbyggda plattformar har faktiskt samma problem, men de håller sig fort genom att främja virtuell rullning: ger tillräckligt med innehåll för att fylla skärmen och kontinuerligt uppdateras när användaren rullar. På dagens webbsida bryts virtualisering av grundläggande funktioner som länkar och hitta på sidan, men hoppet är i sikte. Vi tar en tidig titt i ett försök att lägga till en förstklassig virtuell scroller till HTML, byggd på ett spännande nytt plattformskoncept som heter Layered API.
Dag 2 - A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread
https://www.youtube.com/watch?v=mDdgfyRB5kg
För att uppnå en verkligt lyhörd upplevelse måste utvecklarna köra sin kod i 10ms bitar. Det är nästan omöjligt. I det här samtalet ska vi utforska två strategier på hög nivå: Huvudtrådsplanering och förflyttning av arbetet till bakgrunder. Vi dyker in i vår senaste prestationsforskning om multi-threading Javascript, demystify när du ska använda webarbetare och dyka in i vad det egentligen krävs för att garantera respons. Slutligen presenterar vi några spännande nya förslag som vi skulle älska din feedback om.
Dag 2 - Architecting Web Apps - Lights, Camera, Action!
https://www.youtube.com/watch?v=Vg60lf92EkM
Arkiverande webbapps fortsätter att vara utmanande, om det är redo för prestanda, de senaste och bästa plattforms-API: erna, eller helt enkelt försöker lista ut vilken del av appen som ska göra vad! I det här samtalet utforskar vi hur du kan arkivera appar för maximal flexibilitet, och för det ändamålet kommer vi att återinföra något som är 45 år gammalt vilket i slutändan kan bana vägen för framtiden för webbapps.
Dag 2 - From Low Friction to Zero Friction with Web Packaging and Portals
https://www.youtube.com/watch?v=Ai4aZ9Jbsys
I det här samtalet ser vi på nya teknologier för att skapa bättre webbupplevelser. Webbemballage möjliggör en nästa nivå av innehållsportabilitet som kan användas för att påskynda innehållsleverans eller förbättra sätt för konsumtion av innehåll, till exempel offline. Genom att kombinera webbförpackningar med en ny primitiv, kallad Portals, visar vi dessutom hur vi kan ta webens lågfriktionsegenskaper ett steg vidare med nollfriktionsanvändarupplevelser.
Dag 2 - State of Houdini
https://www.youtube.com/watch?v=lK3OiJvwgSc
Houdini fortsätter att expandera kraften och kapaciteten hos CSS. Houdini exponerar delarna av CSS-motorn som möjliggör API: er som CSS Grid, Scroll Snap Points, koniska gradienter, et al. Utöka CSS: s kapacitet själv utan tveksamt hack och bättre prestanda. I detta samtal tittar vi på den övergripande strukturen i Houdini-ansträngningen och tar en närmare titt på CSS Paint, Animation Worklets och Custom Layout API. Vi kan få en smak av vad framtiden innehåller: Ett ekosystem av moduler som ger kraftfulla effekter från hyllan till din app.
Dag 2 - Building Engaging Immersive Experiences
https://www.youtube.com/watch?v=ylz2EbWueKw
Webben framstår som en idealisk plattform för immersiva verklighetsupplevelser, särskilt i ökad verklighet. I det här samtalet kommer vi att täcka framsteg i WebXR Device API, visa hur partners bygger övertygande förstärkta verklighetsupplevelser på webben idag, och pekar dig i rätt riktning för att utforska detta utrymme själv.
Dag 2 - Using WebAssembly and Threads
https://www.youtube.com/watch?v=zgOGZgAPUjQ
WebAssembly möjliggör nya upplevelser som vi aldrig har lyckats få på webben innan och nu tar WebAssembly trådarna det ännu längre. I det här samtalet visas några exempel på vad WebAssembly möjliggör, och belyser några exemplar och demos i verkligheten. Du kommer också att lära dig om de verktyg och felsökningsfunktioner som finns tillgängliga för att hjälpa dig att utnyttja WebAssembly och trådar i dina webbapplikationer idag.
Dag 2 - The Virtue of Laziness: Leveraging Incrementality for Faster Web UI
https://www.youtube.com/watch?v=ypPRdtjGooc
Om den första principen om prestanda är "gör mindre" är den andra säkert "lat." Med hjälp av LitElement-baserade webbkomponenter utforskar vi användningen av blödande tekniker och webbläsar API: er för att sprida ut arbetet så att användargränssnittet är snabbare att ladda, göra och svara på användarinmatning. Ämnen som vi kommer att täcka omfattar ruttbaserad dynamisk modulläsning, async rendering, chunked rendering, IntersectionObserver, skärmsläckning och schemaläggning av långvariga uppgifter.
Dag 2 - Chrome OS: Ready for Web Development
https://www.youtube.com/watch?v=QTmAtXoPkgw
Chrome OS tillåter inte bara enheter från pinnar till tabletter till stationära datorer, men det kan också köra webb-, Android- och nu Linux-applikationer, vilket gör Chromebooks till främsta maskiner för webbutveckling. Det här samtalet ger en översikt över Chrome OS på hög nivå och diskuterar kärn- och nya funktioner tillgängliga för webbutvecklare. Ämnen inkluderar bästa praxis för webbutveckling, inklusive Progressive Web Apps, och optimering av inmatning och beröring för tabletter, samtidigt som man har skrivbordsanvändare i åtanke.
Dag 1 - Keynote
En round-up av webbplattformens senaste framsteg och det utvecklande landskapet. Keynote täcker också Chrome-lagets fortsatta investering för att flytta plattformen framåt och stödja samhället.
Dag 1 - Get Down to Business: Why the Web Matters
Musik? Kaffe? Idéer? Genom att fokusera på snabbhet och dra nytta av webbens växande möjligheter hittade tre globala företag ett meningsfullt engagemang med nya och befintliga användare överallt. Hör direkt från Spotify, Starbucks och Pinterest om de unika metoderna som de har använt för att bygga och ständigt förbättra sina PWAs och därigenom uppnått tillväxt och framgång.
Dag 1 - State of the Union for Speed Tooling
Mätning, optimering och övervakning av användarupplevelse på webben har aldrig varit enklare. Lär dig om de senaste ändringarna i prestationsverktyget, och hur man meningsfullt införlivade lab- och fältdata i deras utvecklingsarbete. Paul och Elizabeth delar de senaste utvecklingen i Lighthouse, DevTools profileringsverktyg, PageSpeed Insights, Chrome UX Report och Key Performance Metrics.
Dag 1 - Speed Essentials: Key Techniques for Fast Websites
De dåliga nyheterna: JavaScript, bilder och webbfonter blockerar ofta moderna webbsidor. De goda nyheterna: Det finns nog lite utrymme för att förbättra din webbplatss prestanda. Katie och Houssein guidar dig genom nyckelteknikerna i JavaScript, bilder, [CSS] och webbfonter som du kan använda för att maximera prestanda på din webbplats.
Dag 1 - Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
Eftersom de flesta användare har tillgång till webben på språng är det viktigt att vi levererar upplevelser som laddas snabbt och löper smidigt, oavsett nätverksförhållanden. Och med servicearbetare som nu stöds i alla moderna webbläsare kan vi utnyttja det som en kärna del av vår applikationsarkitektur och prestationsstrategi.
Men inte alla tjänstearbetare implementeringar skapas lika, och de kan erbjuda väldigt olika prestanda fördelar. Varje prefetch- och cache-beslut kommer med hastighet versus färskhet och bandbredd vs lagringsutbyte. Följ med oss för att upptäcka hur du utvärderar och bygger olika servicearbetarflöden för din app, vilket ger dig den bästa upplevelsen.
Dag 1 - Smooth Moves: Rendering at the Speed of Right ®
Följ oss när vi refaktorerar en mikrointeraktion för att blockera trådar, blockera användare och vrida upp den till 60fps. När väl webbplatsens resurser har levererats snabbt, hur ser vi till att vi håller den höga baren för prestanda? Vi behöver förstå rendering och interaktion på sidan.
Dag 1 - Complex JS-heavy Web Apps, Avoiding the Slow
Om du kan göra det utan JavaScript, är det vanligtvis den snabbaste vägen. Men vad sägs om när JavaScript är det enda sättet? I den här sessionen tar vi en JavaScript-tung PWA och laddar den på mindre än 5 sekunder på 2G, med webbmontering, arbetstagare och webbkomponenter.
Day 1 - Building Modern Web Media Experiences: Picture-in-Picture and AV1
Lär dig om hur de senaste mediarelaterade funktionerna på webbplattformen kan användas för att bygga upp effektiva och härliga webmedieupplevelser. Det här samtalet täcker både API-skivor (till exempel Picture-in-Picture) och codecs (AV1), genom att granska några nyanser av hur de kan genomföras framgångsrikt tillsammans med exempel och demo.
Dag 1 - Modern Websites for E-commerce in the Real World
Medan webben har skapat ökade möjligheter kräver framgång för e-handel i verkligheten att man tar en uppmätt strategi. I den här sessionen hör du hur vissa e-handelsföretag tar itu med utmaningar som organisatorisk komplexitet, arvskod, mätning, prioritering och mer för att ge bättre webbupplevelser och förbereda framtida behov och efterfrågan. Du lär dig också hur AMP och PWA har spelat en roll för att forma dessa moderna konsumentresor.
Dag 1 - Progressive Content Management Systems
Content Management Systems (CMS) är mjukvaruplattformar som är utformade för att förenkla skapandet och hanteringen av webbplatser och deras innehåll. Numera drivs cirka 50% av webbplatser av någon form av CMS-plattform. I det här samtalet diskuterar vi vår erfarenhet av att flytta ett komplext CMS (dvs WordPress) framåt längs Progressive Web Road genom att integrera moderna möjligheter (t.ex. Service Worker API) och progressiva teknologier (t.ex. AMP) i sin plattform och ekosystem, och hur lärdomarna lärde oss kan tillämpas på andra CMS.
Dag 1 - Making Modern Web Content Discoverable for Search
https://www.youtube.com/watch?v=YP2tMBhyU0I
Många moderna JavaScript-ramar gör deras HTML-innehåll på klientsidan, förutsatt att varje miljö som når sina sidor är så modern som de är. Men många sökmotorer - inklusive Google Search - uppför sig inte exakt samma som en användares webbläsare. I den här sessionen kommer du att lära dig några fakta om Google Search, dess rendering pipeline och de olika verktygen som kan hjälpa dig att diagnostisera klyftan mellan vad dina användare ser jämfört med vad Google Search ser. Du har byggt en snabb och engagerande hemsida - låt oss se till att det också kan upptäckas.
Dag 2 - Keynote
https://youtu.be/SbUAkQ_s7Os
Följ med oss för en koll på webbramar och webbplattformen och hur de kan vara starkare tillsammans - skapa bra användarupplevelser i skala! Tala om användarupplevelse: Vi har pratat om saker som jank och 60 bilder per sekund i flera år, men vissa av dessa saker är fortfarande svåra att uppnå på ett pålitligt sätt på webben. Med en ny uppsättning webbstandarder förändras detta, och vi är mycket glada att presentera dem för dig!
Dag 2 - Feature Policy & the Well-Lit Path for Web Development
https://www.youtube.com/watch?v=igHvSUrLqXc
Funktionspolicy är en ny primitiv som tillåter utvecklare att selektivt aktivera, inaktivera och modifiera beteendet hos vissa API och funktioner i webbläsaren. Det är som CSP, men för funktioner och API: er! Team kan använda nya verktyg som Funktionspolicy och API för rapportering för att fånga fel innan de växer utom kontroll, se till att webbplatsens prestanda håller sig hög, behåll kodkvaliteten hälsosam och hjälpa till att undvika webens största fotpistoler.
Dag 2 - virtual-scroller: Let there be less (DOM)
https://youtu.be/UtD41bn6kJ0Rendering prestanda är huvudsakligen en funktion av hur mycket du gör - för mycket DOM kommer att sakta ner din webbplats till en krypning. Inbyggda plattformar har faktiskt samma problem, men de håller sig fort genom att främja virtuell rullning: ger tillräckligt med innehåll för att fylla skärmen och kontinuerligt uppdateras när användaren rullar. På dagens webbsida bryts virtualisering av grundläggande funktioner som länkar och hitta på sidan, men hoppet är i sikte. Vi tar en tidig titt i ett försök att lägga till en förstklassig virtuell scroller till HTML, byggd på ett spännande nytt plattformskoncept som heter Layered API.
Dag 2 - A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread
https://www.youtube.com/watch?v=mDdgfyRB5kg
För att uppnå en verkligt lyhörd upplevelse måste utvecklarna köra sin kod i 10ms bitar. Det är nästan omöjligt. I det här samtalet ska vi utforska två strategier på hög nivå: Huvudtrådsplanering och förflyttning av arbetet till bakgrunder. Vi dyker in i vår senaste prestationsforskning om multi-threading Javascript, demystify när du ska använda webarbetare och dyka in i vad det egentligen krävs för att garantera respons. Slutligen presenterar vi några spännande nya förslag som vi skulle älska din feedback om.
Dag 2 - Architecting Web Apps - Lights, Camera, Action!
https://www.youtube.com/watch?v=Vg60lf92EkM
Arkiverande webbapps fortsätter att vara utmanande, om det är redo för prestanda, de senaste och bästa plattforms-API: erna, eller helt enkelt försöker lista ut vilken del av appen som ska göra vad! I det här samtalet utforskar vi hur du kan arkivera appar för maximal flexibilitet, och för det ändamålet kommer vi att återinföra något som är 45 år gammalt vilket i slutändan kan bana vägen för framtiden för webbapps.
Dag 2 - From Low Friction to Zero Friction with Web Packaging and Portals
https://www.youtube.com/watch?v=Ai4aZ9Jbsys
I det här samtalet ser vi på nya teknologier för att skapa bättre webbupplevelser. Webbemballage möjliggör en nästa nivå av innehållsportabilitet som kan användas för att påskynda innehållsleverans eller förbättra sätt för konsumtion av innehåll, till exempel offline. Genom att kombinera webbförpackningar med en ny primitiv, kallad Portals, visar vi dessutom hur vi kan ta webens lågfriktionsegenskaper ett steg vidare med nollfriktionsanvändarupplevelser.
Dag 2 - State of Houdini
https://www.youtube.com/watch?v=lK3OiJvwgSc
Houdini fortsätter att expandera kraften och kapaciteten hos CSS. Houdini exponerar delarna av CSS-motorn som möjliggör API: er som CSS Grid, Scroll Snap Points, koniska gradienter, et al. Utöka CSS: s kapacitet själv utan tveksamt hack och bättre prestanda. I detta samtal tittar vi på den övergripande strukturen i Houdini-ansträngningen och tar en närmare titt på CSS Paint, Animation Worklets och Custom Layout API. Vi kan få en smak av vad framtiden innehåller: Ett ekosystem av moduler som ger kraftfulla effekter från hyllan till din app.
Dag 2 - Building Engaging Immersive Experiences
https://www.youtube.com/watch?v=ylz2EbWueKw
Webben framstår som en idealisk plattform för immersiva verklighetsupplevelser, särskilt i ökad verklighet. I det här samtalet kommer vi att täcka framsteg i WebXR Device API, visa hur partners bygger övertygande förstärkta verklighetsupplevelser på webben idag, och pekar dig i rätt riktning för att utforska detta utrymme själv.
Dag 2 - Using WebAssembly and Threads
https://www.youtube.com/watch?v=zgOGZgAPUjQ
WebAssembly möjliggör nya upplevelser som vi aldrig har lyckats få på webben innan och nu tar WebAssembly trådarna det ännu längre. I det här samtalet visas några exempel på vad WebAssembly möjliggör, och belyser några exemplar och demos i verkligheten. Du kommer också att lära dig om de verktyg och felsökningsfunktioner som finns tillgängliga för att hjälpa dig att utnyttja WebAssembly och trådar i dina webbapplikationer idag.
Dag 2 - The Virtue of Laziness: Leveraging Incrementality for Faster Web UI
https://www.youtube.com/watch?v=ypPRdtjGooc
Om den första principen om prestanda är "gör mindre" är den andra säkert "lat." Med hjälp av LitElement-baserade webbkomponenter utforskar vi användningen av blödande tekniker och webbläsar API: er för att sprida ut arbetet så att användargränssnittet är snabbare att ladda, göra och svara på användarinmatning. Ämnen som vi kommer att täcka omfattar ruttbaserad dynamisk modulläsning, async rendering, chunked rendering, IntersectionObserver, skärmsläckning och schemaläggning av långvariga uppgifter.
Dag 2 - Chrome OS: Ready for Web Development
https://www.youtube.com/watch?v=QTmAtXoPkgw
Chrome OS tillåter inte bara enheter från pinnar till tabletter till stationära datorer, men det kan också köra webb-, Android- och nu Linux-applikationer, vilket gör Chromebooks till främsta maskiner för webbutveckling. Det här samtalet ger en översikt över Chrome OS på hög nivå och diskuterar kärn- och nya funktioner tillgängliga för webbutvecklare. Ämnen inkluderar bästa praxis för webbutveckling, inklusive Progressive Web Apps, och optimering av inmatning och beröring för tabletter, samtidigt som man har skrivbordsanvändare i åtanke.