Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fully AMP pros and cons

aggre
July 26, 2019

Fully AMP pros and cons

aggre

July 26, 2019
Tweet

More Decks by aggre

Other Decks in Technology

Transcript

  1. Fully AMP pros/cons
    Chrome Tech Talk Night #14

    View Slide

  2. Polymer Japan
    Web Platform Study Group

    View Slide

  3. aggre [AGURI]
    @aggre_
    FRAME00, INC. CTO
    aggre.io

    View Slide

  4. AMP is a famous use case of
    Web Components

    View Slide

  5. Made the website is fully AMP.

    View Slide

  6. View Slide

  7. Source of https://devtoken.rocks/
    Canonical AMP

    View Slide

  8. Pros 1/2
    • I can focus on application development without defining
    atomically components.
    • AMP validators know about performance best practices.
    AMP
    • I can get good user experience if only care for CDN.
    CDN
    • Do you (really) need SPA? It gives us the noticing of asking
    questions.
    SPA ?

    View Slide

  9. Pros 2/2
    • I could build without any problems with just AMP.
    AMP
    • I could build without thinking about the layer of persistent
    state.
    • When I return to the original means of web development, I remember
    the issue is simple.

    View Slide

  10. Cons 1/2
    • I don‘t know the templating library to generate AMP valid
    HTML.
    AMP HTML
    • Insert the boilerplate, styles put together one, and resolve AMP script
    dependencies…
    1 AMP …
    • I made it myself.

    View Slide

  11. Cons 2/2
    • amp-bind‘s states, expressions, and bindings interact using
    strings as keys.
    amp-bind , ,
    • Is the key exist? Is the schema correct? I need a parser to validate it.
    • I want to solve this problem by using the JS/TS platform, not a parser.
    JS/TS …

    View Slide

  12. In my case

    View Slide

  13. Create a template for AMP

    View Slide

  14. I like lit-html, so I using template
    literals on the server-side too.

    View Slide

  15. Create a component

    View Slide

  16. Create a page

    View Slide

  17. Insert the boilerplate,
    styles put together one,
    clean up duplicate styles with cssnano,
    and resolve AMP script dependencies.

    View Slide

  18. AMP makes it easy to build high-
    performance websites.

    View Slide

  19. Thank you!

    View Slide