AC2017

From W3C Wiki

Panel on OWP + development environments

Backgrounds & Main Topics

W3C is heading to provide better OWP enhancements with strengthen the core, building the application foundations, and embracing the vertical industries. The key challenges is how to make web apps compatibles enough to meet user requirements, and meet the gap between web apps and native apps. W3C has paid huge efforts on identifying the gaps, and making the web more agile for mobile user scenario. Also, W3C is proposing the concept of Progressive Web Applications (PWA) to provide the packaging and offline experiences.

At the same time, industries, especially mobile browser venders, content and service providers are engaging to different innovation ideas to accelerate the web app, by providing platform based support, and testing new ideas on their own products/services. Companies are also providing different kinds of frameworks and related developing tools to motivating the next generation web app developing experiences. Examples may include (but not limited to) AMP project at Google, and most recently, the Tencent Wechat Miniapps.

It's hard to argue the pros and cons of these innovations in detail, but does it actually help the web platform at large or is just a stop-gap measure? Will these innovations build walled-garden to the whole ecosystems introduced by the OWP? What kind of framework and tools can extremely enhance the capability of OWP? How W3C could get improved to embrace and accelerate these innovations to meet the industry needs in mobile app age?

We are planning to organize the panel discussion in W3C AC 2017, inviting a bunch of experts both from standardization, browser designers, platform providers, Web content and service providers, web app developers from both China and all over the world, to take a look together of where the web is heading, and how we can ensure a healthy open-web platform for the next generations.

Organizing Consideration

[Dom] Jeff brought up the idea of having a presentation on how much better WebApps are nowadays, with Dan Applequist as the potential presenter - in which case, there may useful synergies between the two topics (and maybe imply that it would make sense to have Dan on the panel as well).

Key points

  • Trends / Challenges and progress of Mobile Web App : lightweight, Feels like Native Apps (integrated with native OS) , Rich UI/UE, offline support, extreme performance, better reuse-support (say, components).
  • The Gap and W3C Progress  : W3C Standard Efforts, and Status Report
  • Current Status: Industry Innovations related to OWP: AMP, PWA, Wechat Miniapp
  • Platform based Apps : Open Application foundation vs. walled garden
  • Developing Tools: Accelerating the progressive web app design , debug, and deploy
  • Innovation vs. Standards: Pros and Cons? Better alignment? Big ecosystem based on OWP

Possible Panelists

  • Dom or PLH (from W3C)
  • Dan Applequist (potential presenter on better WebApps, TBC)
  • Chaals (TBC, he is personally interested in this topic and plan to meet some Chinese members in early April while he is in China)
  • Peter Linss from TAG (TBC?)
  • Simon Pietesrs (Xiaoqian recommended him as a speaker to talk about Houdini)
  • 1 from AMP project, organizers, (from Google? Or other member organizations)
  • 2 from Browser community: Microsoft, Apple, Firefox, Yunshipei
  • Tencent Rep
  • Baidu Rep: (has a IMP project similar to Google's AMP, but is worried of the fragmented vision of everybody working on his own solution)
  • Alibaba Rep (UC, or other proposed by AC Rep)
  • Sogou Rep (involved in AMP project, attendance TBC since they are not a member yet)
  • 0 or 1 from Web Developer Communities

Panel Moderator

Moderator from W3T?

Schedule

According to W3C AC 2017 program [1]

  • Date/Time: Monday 24 April, 11:40-12:30

Related works

Google AMP Project

Google AMP is not fully and wholly Google-owned. It is , in fact, an open source initiative helmed by Google, Github, publishers, and now brands and its goal is to speed up the mobile web experience. AMP is a complex framework to reduce the time takes mobile web page to load, and standardizing mobile web production. AMP project includes 3 core components:

  • AMP HTML: is a HTML extended with some special properties, and with some restrictions ( to get better performance)
  • AMP JS library ensures the fast rendering of HTML pages, by AMP best practice of page rendering.
  • Google AMP Cache can be used to cache HTML & CSS pages using a proxy-based approach, using HTTP 2.0 as transportation layer to get maximum efficiency.

On March 7-9, 2017, Google organized the first AMP conference at New York. The Amp conference was all about bringing mobile web players together to not only celebrate the strides Amp has made in its year of life (more than 1 billion mobile web pages have been Amped to date), but also to have open dialogue about where the Amp technology is going next.

References:

个人理解:AMP是一个HTML+CSS的超级(扩充了部分内容),以及浏览器与基础设施(如AMP Cache)之间的一个架构。它主要面向Web应用的提升及为用户提供更丰富的Web应用访问体验(特别是性能优化方面)。 问题是:这是一个walled garden。它和Open Web之间的关系?对Open Web来说是一个有意义的扩展,还是会产生竞争和威胁?

PWA: Progressive Web App

Progressive web apps (PWA) refers to a set of browser features designed to allow websites to behave more like native applications on mobile devices. PWA take advantage of new technologies to bring the best of mobile sites and native applications to users. They’re reliable, fast, and engaging. PWA is very much part of OWP, usually refer to apps using combination of W3C specs. See Alex Russell's initial blog post on this topic: [2]

The core part of PWA is : offline-oriented design (面向离线的设计思路)。The technology used here is:

  • Service Worker: act as proxy servers that sit between web apps and browser and network. Also Service worker will provide the data sync, even the page is not loaded. It is the kernel to provide the offline-experiences.
  • Application Manifest and OS integrations: providing necessary information for desktop (Operating system) to register an application icon.
  • Push message & Notifications: activate a web app even the app (page) is not running.
  • Background synchronization (with support of service worker?)
  • Hidden browser visual effects: providing the loading animation, hiding the UI of browsers.

Due to the “progressive” feature, most of the technologies are already covered by W3C standard activities (such as service worker, application manifest, and push messages).

Browser support: Chrome/Opera (leading implementation), Firefox (very close to Chrome), Edge (in development), Safari (no information), UC Browser (no information) Service Worker is truly a progressive enhancement, so browsers without support will work exactly as normal. However it will make things significantly better for browsers with support. Also worth noting that the cache used by a PWA is also a new cache defined by the Service Worker spec.

PWA的核心思路是,通过标准的浏览器技术演进,扩展支持离线访问、后台进程(service worker)等高级特性,并弱化甚至完全取消浏览器的所有本地视觉特征,从而让运行在浏览器中的Web应用从用户体验上更接近“本地原生应用”,从而缩短与移动端的差别。 PWA向OWP提供了更多新特性,并较好的兼容了已有的OWP特性。而且,大部分PWA的功能需要依托W3C的标准化努力才能成为行业的公共基础。

Reference:

Wechat Miniapp (小程序)

On Sept 21 2016, Tencent announced its strategy on Tencent Wechat Miniapp (腾讯小程序), to open an ecosystem to lightweight, low-frequency, function-driven applications, based on Tencent Wechat platform (with identity, social facility, payment support, and application delivery infrastructure). Tencent Applet is claimed by WeChat’s lead , Zhang Xiaolong as “apps accessed on demand without downloading, installing”. Tencent Miniapp is consisted with three parts:

  • WXML: an HTML subset, with limited extension (on view /card based UI design, borrowed from native app developing model). Only provide limited functions to HTML content / UI .
  • WXSS: a CSS subset. Provided limited support of layout, and style.
  • Js: a standard JS syntax with Tencent JS lib. 3rd party libs (such as zepto, jquery) are not supported. Also, tencent provide server APIs from backend of wechat ( to support identities, crypto, social facilities, wechat payments… )
  • JSON: a set of manifest data, to provide ICONs, metadata for Wechat app delivery.

Tencent provide IDE for Miniapp development and debugging. The development of miniapp will follow a web framework similar with react and vue, with a components support. Each Wechat apps will be packaged in a file (less than 1MB size). When Wechat user subscribe (or bookmark) a Wechat apps, the packaged file will be downloaded to local wechat environment to provide limited offline experiences. The hosting environment of Tencent Applet is the container based on QQ Browser X5 kernel, which originated from Google Chromium 37. References:

Facebook Instant Articles/Games

Facebook has HTML5-based "instant games" as part of its Messenger platform, which are pretty similar to WeChat's mini programs: [3]

Related Resources

AMP and the Web Panel

On March 7-9, 2017, Google organized the AMP conference at New York, United States. Baidu, Sogou participate the AMP conferences. It's hard to argue that AMP improves page speed and usability, but does it actually help the web platform at large or is it just a stop-gap measure? And if it doesn't, how can we fix it? We invited a bunch of advocates for the open web to talk candidly and take a hard look together of where the web is heading, and how we can ensure a healthy open-web for the next generations. There’s a detailed introduction of the AMP conference, https://timkadlec.com/2017/03/amp-and-the-web/ . A panel with name “AMP & The Web Platform”. Moderator:

  • Paul Bakaus

Panelists:

  • Gina Trapani
  • Nicole Sullivan
  • Sarah Meyer
  • Jeremy Keith
  • Mike Adler