février 13, 2023

Google I/O 2021

Let’s talk a little bit about Google I/O 2021

Let’s talk a little bit about Google I/O 2021. I really wanted to write a few words about the event.

Honestly, it was amazing and I felt very lucky to be able to be part of it, because this year the event took place entirely online. All year long, I read articles about evil Google, how it controls the web, and the world. I mainly discovered that Google does a real work to push things forward, including the web platform, my main concern. I know that showing us how easy it is to deploy an app in the cloud with cloud run is also a way to sell us the thing.  So what ? It sounds pretty fair to me. So far the true power of the web still remains in html, css, javascript and so on. From my perspective, whatever Google does, we can still build and deploy web apps based on those standards just as we see fit.

Nowadays, I’m primarily focusing on the web platform because it’s what I do. I’m a progressive web apps developer totally convinced. I’m always looking for ways to improve efficiency and performance with loading and interactivity. Good news, that’s all about web vitals and I can already imagine the web without all those traps (in French we say “putes à clics”, I don’t know how to translate it), especially with “cumulative layout shift” or CLS. Simply put, CLS is about visual stability → when you click on what you’ve clicked and not some random shit coming suddenly from nowhere. To know more, check that : https://web.dev/cls/

Next you’ll find a re-lecture // resume of the event with some personal thoughts and notes I took during talks and keynotes. I’ll also share resources I’ve discovered during the week while digging further, that I wasn’t aware of at the time. I think I’m gonna use this blog to develop each point deeper and separately. We’ll see. I have to force myself to share stuff, so I will publish this article incomplete to start the machine but I will update it regularly.

Here’s the link to the main thing, still available, where you’re gonna find every workshop and talks : Google I/O 2021

Machine learning

It’s no surprises AI and Machine Learning are at the top of the list, and will be integrated into everything, including webapps. In many ways, it felt good to see we were all going in the same direction, thinking about similar ideas and so, let’s start by something I knew in my heart was coming, somehow. Meet the true power of AI with a serious use case : Interpreting skin conditions with AI – Health

In many ways, being assisted by AI helps diagnosing better, faster, and sooner diseases that affect millions of people worldwide. Using a phone’s camera, you can scan your own body yourself and potentially identify certain skin diseases, for instance. Of course, that requires using machine learning with tons of medical data. This makes it possible to identify the challenges of tomorrow in terms of data access and processing, in a field as important as medicine and health. Here, in France, during Covid, we faced a shortage of healthcare staff and it seems to happen everywhere.

Now as a web developer, I was wondering how to use AI, what to do with it, what to use, and how to use it, on the web, in web apps. I believe Tensorflow and particularly TensorflowJS answers that pretty well. To illustrate, here in a few seconds I think I found a pre-trained model that could be useful to me in an upcoming project.

AR

AR is a really big trend, for a lot of different reasons. I personally implemented it in various upcoming projects, as a default function because I’m tired of people not seeing what is in front of them, in the street, eyes on their phones. More later.

Augmented reality for the web | Web

Augmented Reality in an Ionic/Angular PWA | joshmorony – Learn Ionic & Build Mobile Apps with Web Tech

→ Here Josh points out that with Ionic, we can have access to all native functions.

Future of Commerce AR using ARkit over the web

Workshop :

Google I/O 2021 : Build an AR application using the WebXR API

Build an augmented reality (AR) app using the WebXR Device API

Web and chrome

That looks like more of the reason I participate in I/O.  The web is the 5 billion users platform and it has a bright future.

Google Next Billion Users

Privacy sandbox

It was reassuring to hear that Google takes privacy concerns very seriously. Security has always been serious, that is why chrome is running into a sandbox. Actually, each session is running its own sandbox it appears. Now, there’s a similar concept with privacy. If you want to know more, check this :

https://web.dev/digging-into-the-privacy-sandbox/?gclid=Cj0KCQjw7pKFBhDUARIsAFUoMDbjjeS45HgyB02tG4Jg332XggHSRW38o1l4oRff45MtAtAr6b_Tu-kaAi7lEALw_wcB

https://privacysandbox.com/

Pwa : new handling files

A game changer is coming. PWAs are getting more and more capabilities. Actually, there’s a team working full time on making the web globally more more powerful. Meet project Fugu. One of their proposition is to enable pwa to handle files : upload, download, rename or open with for instance.

Project Fugu

If you click on that link, you will read this statement : “ Web apps should be able to do anything iOS/Android/desktop apps can. The members of the cross-company capabilities project want to make it possible for you to build and deliver apps on the open web that have never been possible before.” That’s project Fugu. The new handling files API comes from there and it’s just an example of the super powers coming to the web platform.

Web Capabilities (Project Fugu 🐡)

https://developers.google.com/web/updates/2018/05/beyond-spa

https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509

https://developers.google.com/web/tools/workbox

Framework agnostic

https://micro-frontends.org/#the-dom-is-the-api

Atelier

Overview, Web Components & Architecture – Real-World PWA: The Making of paint.js.org – Part 1

Explore new and upcoming browser capabilities for your PWA: From Fugu With Love

Android 12

I’m also a guy, using a phone . It’s not my objective to share here feedback about android 12 but know that it’s going to be beautiful. After the presentation, when I looked back to my actual phone, I felt like I was in the past, clearly.

Material You Design

A new color sheme feature is gonna match your photo backgound for instance on a global aesthetic scale in the entire device. It’s called, dynamic color and it’s awesome. This is part of a new approach, Material You, where the user participates actively in the design.

Dynamic colors

Here’s a ressource I found afterwards and something to dig to implement to the web platform because Material You is build for Android Native, integrated to Flutter. Still, the idea is great and I was looking to a way to use it on the web.

https://una.im/css-color-theming/

Codelabs

Direct link to the article Say Hello to CSS Container Queries

Write your first Flutter app, part 1

https://codelabs.developers.google.com/codelabs/cloud-run-dev2prod

Some nice discoveries made on the road

https://glitch.com/

Final thought

What do you want to do with your website ? Are you sure it is a website ? What’s a website ? Does it fit your needs ? Answer it, find a powerful and simple concept and make an app, built with web technologies.