Excited about the future of the Web after attending GDG DevFest Tokyo 2019

I attended an event called GDG DevFest Tokyo 2019. Recently, I haven't been able to find time due to personal circumstances. However, this time, due to work circumstances, I was able to secure some time and attended this event. I even used the Shinkansen from Osaka to Tokyo to participate, and there were many discoveries worth it. I thought I would report on what I learned this time.

https://gdg-tokyo.connpass.com/event/137666/

GDG DevFest Tokyo 2019

DevFest is a developer event held around the world by the Google Developer Group (GDG) community. In Tokyo, it is held as a community event where you can learn the latest information and know-how on various technologies such as Android, Google Cloud Platform (GCP), Web, Firebase, Machine Learning (ML), Assistant, Flutter, Go in one day. This is the fourth time it has been held following last year.

https://tokyo.gdgjapan.org/devfest2019

I only attended DevFest Day1. The venue was University of Electro-Communications. I think many of the staff were students. I was impressed and learned a lot from their proactive support.

DevFests

DevFests are community-led developer events hosted by Google Developer Groups around the globe. GDGs are focused on community building and learning about Google’s technologies.

https://devfest.withgoogle.com/

DevFests themselves are events hosted by GDGs, which are active globally. The diagram below shows the activities & plans for 2019. I think you can see that it is widely and actively held all over the country.

There is also a Youtube channel for the community.

https://www.youtube.com/channel/UCXDc-ckqru8BgppXbCt0APw

The videos have not only English (auto-generated) subtitles but also English (CC) subtitles. Even if you are not good at listening to English, you can understand it from the text. This kind of consideration is impressive.

Google Developer Experts (GDE)

Many of the speakers this time mentioned the term Google Developer Experts (GDE). At first, I thought it was some kind of position within Google, but it wasn't.

A global program to recognize individuals who are experts and thought leaders in one or more Google technologies. These professionals actively contribute and support the developer and startup ecosystems around the world, helping them build and launch highly innovative apps.

https://developers.google.com/community/experts

In short, a GDE is a "person outside of Google who supports and enlightens developers and startups about Google's technology". To become a GDE, you need to be introduced by Google or a Google partner.

Sessions

The sessions this time were grouped into the following categories:

• Android
• Assistant
• Cloud
• Design
• Firebase
• Flutter
• Go
• ML
• Web
• misc (maybe other)

As I am a person who likes Web, I actively chose that category.

Keynote2: The Path to the Pi World Record

Speaker: Emma Haruka Iwao

This article is the theme of this talk.

https://it.srad.jp/story/19/03/17/043207/

Emma Haruka Iwao's story is roughly as described in the Wiki.

The following story from this presentation was impressive:

• She received an offer from Google via Linkedin and "passed after five interviews"

Emma is a person who kept trying with the mentality that "interviewing is free" and finally passed. She is also from Osaka, which made sense. (laughs)

She also mentioned that she was not originally good at English. I also have concerns about English, and there were many parts that I could relate to. There was a common story that having English skills broadens your options, but knowing Emma's career, who "was not good at languages but was able to work at Google (overseas)", made me feel like trying hard. I am very grateful.

Chrome Dev Summit 2019: Recap

Speaker: Mr. Makoto Yagura

The Chrome Dev Summit (CDS) has primarily focused on the following themes so far:

• 2013
  • Web API, Performance
• 2015
  • PWA

And, at this CDS, there were some topics that deviated a bit from the usual hardcore JS discussions, which were introduced.

HTML and CSS

HTML isn't done.

https://www.youtube.com/watch?v=ZFvPLrKZywA

HTML is not yet mature, and there is still room for improvement. Several improvement proposals were introduced from this perspective.

If pure, bare HTML can express a user-friendly UI as standard, it would be appreciated by users. After all, they don't have to know various UIs of various sites. Personally (as a developer), I am very happy that Edge is becoming Chromium-based. The release is said to be on January 15, 2020, so it's coming soon.

Next-generation web styling

https://www.youtube.com/watch?v=-oyeaIirVC0

The scroll-snap feature aims to control scrolling with CSS. Previously, it was achieved by using hack techniques with Javascript, but this will no longer be necessary. This is a must-see not only for designers but also for engineers in charge of JS.

JS +SEO

There was a discussion about SEO.

https://www.suzukikenichi.com/blog/how-to-make-your-content-shine-on-google-search/

With Googlebot now based on the latest Chromium, it behaves the same as running a browser in Chrome. Until now, Googlebot was based on Chrome 41, so it couldn't use new JavaScript syntax or browser APIs. It also supports ShadowDOM, so does this mean it's promoting WebComponents?

Performance Oriented to the Real World

Even if you run Javascript in a development environment, it may actually be slow when run in a production environment. This is partly due to the complexity of processing by Javascript. This phenomenon should be more clearly felt in environments with poor network communication (overseas). I think a test environment that takes into account such cases is necessary.

As stated in the following article, Google warns you about pages that feel "slow".

https://jp.techcrunch.com/2019/11/12/2019-11-11-google-chrome-to-identify-and-label-slow-websites/

Let's check in advance by using performance measurement tools.

• web.dev
• PageSpeed Insights
• Lighthouse

Also, an approach to low performance due to single-threaded Javascript was introduced.

https://www.youtube.com/watch?v=7Rrv9qFMWNM

For more details, please refer to the following.

https://medium.com/lazy-learning/my-summary-of-the-main-thread-is-overworked-underpaid-chrome-dev-summit-2019-cd65efdf1ce1

Bridging the Gap Between Native Apps and Web Apps: Project Fugu and Multithreaded Programming

Speaker: Mr. Tomomichi Shimizu

The Difference Between Native Apps and Web Apps

Web apps are those that run on a browser. You build web apps through APIs provided by the browser. However, you cannot access the native parts of the machine from the browser, for example, access files on the machine or save files to the machine. This limitation is a trade-off to ensure the safety of the browser, and it can't be helped.

Project Fugu

Fugu’s mission is to close the capabilities gap with native to enable developers to build new experiences on the web while preserving everything that is great about the web.

https://www.chromium.org/teams/web-capabilities-fugu

Project Fugu is an attempt to operate the native part from the (Chrome) browser in order to narrow the gap with the native. It is very dangerous to use it incorrectly because it operates the native part. It is said to be named Project Fugu, borrowing the name of a pufferfish that has "poison", due to such dangers.

The list of proposed features is in the sheet below.

http://goo.gle/fugu-api-tracker

Among them, for example, there is something called "Contact Picker API". As the name suggests, you will be able to access the phone book registered in the native app. This allows you to, for example, "get the information of the user you want to share from the phone book".

Worker

The browser operates in units of Task (Event→Scripting→Rendering→Painting). It operates only on one main thread.

The target value of fps in the browser seems to be 60fps.

A frame rate of 60fps is the target for smooth performance, and the time given for all updates required for an event is 16.7 milliseconds.

https://developer.mozilla.org/ja/docs/Tools/Performance/Frame_rate

If it takes more than 16.7 milliseconds to execute one Task, the operation will become choppy. So, we thought about solving it with a technology called Web Worker.

Web Worker is a simple means for web content to run scripts in the background thread.

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers

However, there seems to be a problem that message passing between threads becomes complicated. To further solve this problem, GoogleChromeLabs developed a library called comlink.

Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.

https://github.com/GoogleChromeLabs/comlink

The complexity of message passing in Web Worker is said to be reduced by comlink.

※ There was also a talk about atomics.wait() and atomics.notify().

How to Distribute Your Web App? "Installable" web apps

Speaker: Shunya Shishido
As the title suggests, he introduced various ways to distribute web apps.

PWA

This is about Progressive Web App (PWA), which is well known to web lovers. The common PWA features for web apps are as follows.

• Offline browsing
• Push notifications
• Full screen

PWA is positioned very close to native apps while being a web app.

For example, a web app called Santa Tracker is a very good example.

https://santatracker.google.com/

The source code is also open to the public and is a good reference example as a PWA.

https://github.com/google/santa-tracker-web

Please "add this web app to the home screen" and launch the added app. You should be able to have a user experience similar to a native app.

Isn't it good enough with the browser's bookmark?

There was a discussion that you don't have to "add to the home screen", you can just use bookmarks. The main topic was the keyword mobile first. Currently, the use rate of bookmarks from mobile seems to be very small, but I was offended by the comment "Eh? I use it normally". Am I behind the times? Is "add to home screen" common these days? I have a little doubt.

Ways to Encourage Installation

When you want to get a PWA installed, you guide users with something called a Mini-infobar. However, this Mini-infobar is used as a helper, so it seems necessary to prepare a separate UI.

The mini-infobar is only meant as a helper, and it will go away in the future.

https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile

However, if you already have a native app, you may not want to request the installation of the PWA. For such times, there seems to be a mechanism to determine "whether the native app is already installed" (origin trials).

https://web.dev/get-installed-related-apps/

Desktop PWA

Not only mobile, but you can also apply PWA to Desktop.

The Santa Tracker introduced earlier also supports Desktop PWA.

https://santatracker.google.com/

You can install it from the + button in the address bar.

Trusted Web Activities (TWA)

Trusted Web Activity runs the Chrome browser in full screen within an Android app.

https://developers-jp.googleblog.com/2019/03/trusted-web-activity.html

It seems that PWA can be realized even in Android apps.

TWA is suitable for cases where you want to use Chrome features that are not available in WebView in full-screen web content of Android apps, or when it is convenient for users to navigate by sharing origin storage with the Chrome browser.

I am not an Android user, so I cannot download apps from Google Play.

• Rakuten Pasha
• OYO Rooms

It seems that such things support TWA. It was introduced as one way to distribute apps used within the company (attendance, expenses, etc.) as TWA.

The following library seems to be useful for TWA development.

https://github.com/GoogleChromeLabs/llama-pack

Web Packaging

With PWA, Destop PWA, TWA, etc., the means of distributing web apps from various places have increased. But what about offline? In that case, you can use Web Bundles of Web Packaging.

https://github.com/WICG/webpackage

Web Packaging includes two major things.

• Signed HTTP exchanges
• Web Bundles

The former is said to be effective when returning the URL of the AMP page from the google host to the original host.

https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/

The latter seems to be able to bundle web applications and provide them offline.

https://www.youtube.com/watch?v=xAujz66la3Y

※ Need to enable chrome canary flag

Yearly Web 2019

Speaker: Mr. Jxck
He briefly introduced the topics related to the Web that occurred in 2019. Detailed information is available on his blog, so here I will just list the items.

Perspective of Angular in 2020

Speaker: Mr. Shun Inatomi

The session content is about the updates in Angular in 2019 and the future in 2020 and beyond.

Check out the following!

• dev.to/angular-jp
• community.angular.jp

By the way, I'm stuck at Augular v2. (laughs)

Updates in 2019

The values of Angular are,

• Apps That users to use
• Apps That developers to use
• Community where everyone feels welcome

There are these three points. For me, I have a painful memory of updating to v2...

The versions of Angular in 2019 and 2020 are,

• 2019-05
  • v7.x
  • v8.x
• 2020-Q1
  • v9.x
• 2020-Q3
  • v10.x

Looking at this, the major updates are very fast. It seems difficult to keep up.

v7.x

• Size Budgets by default
  • Function to limit the size at bundle time
  • Expecting performance improvement
• CDK Drag&Drop
  • Easily perform Drag&Drop
• Virtual Scroll
  • Only what is visible on the screen is built in the DOM
  • Expecting performance improvement
• Bazel
  • Build system like gulp
  • Opt-in support

v8.x

• Differential Loading by Default
  • Control the amount of polyfill depending on the browser
  • The legacy part remains the same. The amount of polyfill for modern browsers is reduced
  • Expecting performance improvement
• Dynamic Import for Lazy Loading
• Support Module Web Worker
• ng deploy
  • There were not many deploys without production build.
  • Always --prod.

It seems that it was a year mainly focused on performance improvement. Angular is an All-in-One framework, so the amount of application code is I think it's more than other frameworks. Then, when loading the application, It may have been viewed as a problem that it was loaded more than necessary, affecting performance.

Roadmap 2020

What will Angular be like in 2020? It was introduced.

v9.x

• Ivy by Default
  • Ivy is said to be the next-generation compiler of angular
• CDK Clipboard API
• CDK Testing Harness
  • More abstraction of component testing
  • Await processing has become easier
• @angular/components
• Strict Type -checking in templates

2019 was a year of performance, a commitment for users, In 2020, there seemed to be many initiatives for developers.

Imagine the Future

So far, Angular has been used for enterprise applications and small-scale applications.

Next, they are targeting apps for billions of users. They seem to be thinking about being able to provide features that suit that app. For example, from the perspective of SEO, accessibility, and internationalization.

In conclusion

It was a dense day when I felt the rapid evolution of the Web. I've absorbed too much and can't keep up with digestion, I can't stop being excited.

The GDEs were all very knowledgeable in their areas of expertise and good at explaining. I also want to become a GDE, so I'll start by finding my area of expertise.

If there is a GDG event next year, I would like to participate!

If it was helpful, support me with a ☕!

Share

Related tags