all articles

Instant View(Telegram) VS Instant Articles(Facebook) VS AMP(Google)

2016-11-24 @sunderls

instantView telegram

Telegram recently released a new feature - Instant View, I looked at the oficial blog, thought it would be worthy a blog to say something about it. Why? Beacuse Facebook launched Instant Articles and Google launched AMP, both in last year and for the same purpose - to offer user a smoother experience. In this article I'll do some simple comparison, and there may be some mistake or too superficial, sorry for that.

1 Facebook Instant Articles

2014, Facebook launched Paper, a reading app with mind-blowing UE, well I didn't try that. It got attention all over the world, but mainly from us developers or designers, maybe real users don't seem to care much, I think. June 2016, Facebook stopped Paper.

Well on the other hand, the idea of immersive(don't know if this is the right word) reading, continued in Facebook App, reborned to Instant Articles, which was launched at June 2015

instant articles

Technical implementation is something like this

1.1 publisher create Instant Article version of theire ariticles, based on guidline from Facebook

In detail, publisher needs to add specific classname & json script to enable certian component, https://developers.facebook.com/docs/instant-articles/guides/articlecreate.

Here is an example from its homepage, we can see classname starting with'op-*', and video & ads & GA components wrapped in <figure>(to be honest , it is kind of strange to use <figure> I think)。It looks complicated but Facebook offers writing tools, so it shouldn't be a problem, I didn't try that though.

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://example.com/article.html">
    <meta property="op:markup_version" content="v1.0">
  </head>
  <body>
    <article>
      <header>
        <!-- The title and subtitle shown in your Instant Article -->
        <h1>Article Title</h1>
        <h2>Article Subtitle</h2>

        <!-- The date and time when your article was originally published -->
        <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>

        <!-- The date and time when your article was last updated -->
        <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>

        <!-- The authors of your article -->
        <address>
          <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
          Brandon is a avid zombie hunter.
        </address>
        <address>
          <a>TR Vishwanath</a>
          Vish is a scholar and a gentleman.
        </address>

        <!-- The cover image shown inside your article -->
        <figure>
          <img src="http://mydomain.com/path/to/img.jpg" />
          <figcaption>This image is amazing</figcaption>
        </figure>

        <!-- A kicker for your article -->
        <h3 class="op-kicker">
          This is a kicker
        </h3>

      </header>

      <!-- Article body goes here -->

      <!-- Body text for your article -->
      <p> Article content </p>

      <!-- A video within your article -->
      <figure>
        <video>
          <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
        </video>
      </figure>

      <!-- An ad within your article -->
      <figure class="op-ad">
        <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
      </figure>

      <!-- Analytics code for your article -->
      <figure class="op-tracker">
          <iframe src="" hidden></iframe>
      </figure>

      <footer>
        <!-- Credits for your article -->
        <aside>Acknowledgements</aside>

        <!-- Copyright details for your article -->
        <small>Legal notes</small>
      </footer>
    </article>
  </body>
</html>

1.2 when Facebook app meets a link, it checks whether it supports Instant Article

Just check the <head/> and it is done.

1.3 If it is Instant article, read the classes & json config, display them in native components

And yes, it is very fast.

2 Google AMP (Accelerated Mobile Pages)

amp

Google AMP is a solution offered by Google, which started at mid-late 2015, it is said to be the rival of Instant Article. Its purpose is to make news page displayed faster, by applying some strict rules, details as follows:

2.1 publisher nees to create AMP version html

This is the same as Facebook Instant Article, but AMP is more complicated & loose, here is an official example: https://ampbyexample.com/introduction/hello_world/


<!--
#### Introduction
An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- #### Head -->
<!-- -->
<head>
  <!-- The charset definition must be the first child of the `<head>` tag. -->
  <meta charset="utf-8">
  <!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!--
    AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
  -->
  <link rel="canonical" href="<%host%>/Introduction/Hello_World">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!--
    CSS must be embedded inline.
  -->
  <style amp-custom>
    h1 {
      color: red;
    }
  </style>
  <!--
    The AMP boilerplate.
  -->
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- #### Body -->
<!-- -->
<body>
  <!--
    Most HTML tags can be used directly in AMP HTML.
  -->
  <h1>Hello World!</h1>
  <!--
    Certain tags, such as the `<img>` tag, are replaced
    with equivalent or slightly enhanced custom AMP HTML tags (see
    [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
    You can use the [ AMP Validator ](https://www.ampproject.org/docs/guides/validate.html) to check
    if your AMP HTML file is valid AMP HTML. Simply
    add `#development=1` to an AMP URL. Validation errors will be printed in the Javascript console.
    You can try it with this website which is build with AMP.
    Check out the [other examples](/) to learn more about AMP.
  -->
  <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive"></amp-img>

</body>
</html>

from the code above, we can see a few things:

  • 1.amp declaration at <html>
  • 2.inlined css
  • 3.amp library js
  • 4.usage of <amp-img>, with explicit with & height declaration

In a word, amp narrows down the usage of html, by making more strict, it removes some barriers which make webpage slow. amp library js it the core of this, it prevents unnecessary drawing, by showing only visible parts(first view), this is why height&width are needed at <amp-img>, without it AMP cannot do calculations until images are loaded.

2.2 Google collects AMP page and caches them in a special cdn

AMP page will be cached by Google if it passes validator, that said what users access are cache from Google CDN, instead of original version.

2.3 Google added special showcase in search results

There will be a Thunder mark for AMP pages in Google search result, just like Facebook Instant Article (just see the gif at the beginning). While the most violent & delicious one is that Google possibly increases the rank of amp-supported pages. wow.

Currently AMP mainly focuses on news and blogs, but I also saw amp pages from review sites.

Telegram's Instant View

Instant View looks similar to Instant Articles both from its title & UE. In Telegram, there will be an 'Instant View' mark, to the links which instant view supports, tap it and you will get a native display.

instant view

Currently Instant View supports Medium.com, TechCrunch.com and Telegram's telegra.ph. And there still lacks some technical introductions, but since all Medium pages and user-created telegraph pages are support, it is reasonable to assume that publisher are not rquired to create a special version of his contents。

In technical details, it should be similar to Instant Articles, but Instant View does more, it parses the html tags and do the rendering. I created some Medium pages with dynamic widgets, such as jsfiddle iframe, and they cannot be treated as Instant View, which means Instant View supports only static contents, like images & code blocks.

summary

aspect Instant Articles AMP Instant View personal opinion
UE boost ★★★★★ ★★★★ ★★★★★ only AMP is pure web solution, but didn't expect too much on web, so give it a four-star
publisher extra cost ★★ ★★★ ★★★★★ only Instant View needs no extra work
publisher freedom ★★ ★★★★ ★★★ AMP is web-based, it is open
publisher revenue ? ★★★ ? not sure, from news Instant Articles seems to be struggling, hard to tell if they are plus for revenu. while Google SEO offers real advantages.
technical ★★ ★★★★ ★★★ I'm js-er, not very clear
future ★★ ★★ none of them is promising

In my personal opinion, if every platform offers a standard, web no longer exists. I understand the good willing from Facebook, to offer users a better reading experience, but by means of cache & better organizing of codes, webview can do much better. As an app, it should provide a fast-boosted webview environment, rather than enforce publishers to create another version of contents, by changing rules. This is why I like Instant View better than Instan Articles.

Google AMP gained popularity from Front-End engineers, but the means of SEO effection, seems too not-Google. What if all the publishers offers AMP-support? Isn't SEO effection just vain and the only happy one is Google itself? Alright, this is just what Google wants. Why AMP is not promising is it requires 2 versions of webpage(well you can just create only amp version), and it restrict js ability, althought it suits webpages of news .etc, the ideas behind it are not difficult, publishers can achieve certain degree of performance by improving with their own hand, and at that day, AMP seems to be just a game which stimulate engineers to care performance. And of course, games cannot last long. (I write javascript, AMP is good resource to learn).

Instant View is a publisher-friendly solution, Telegram does the dirty work and publisher just keep publishing, not offensive. I'm looking forward to future Instant View, but this is not a adoptable-by-all solution, so only 2-star.