Fully AMP pros and cons

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