Polymer Project 2020

Transcript

1. Polymer Project 2020
   GDG DevFest 2020
   Takanori Oki - 17/10/2020
   

   View Slide

2. Self introduction
   •Takanori Oki/@takanorip/@takanoripe(Twitter)
   •UI Designer/Front-end Web developer
   •Organizer of Web Platform Study Group(WPSG)
   •Formerly Polymer Japan
   •https://www.youtube.com/channel/UCfToJ-sTOqvBnnuVq3zdZhA
   •Our main activity is to update the podcast.
   

   View Slide

3. What’s the Polymer Project?
   

   View Slide

4. Polymer Project
   • Libraries, tools, and standards for a better web
   • LitElement
   • Web Componentsを構築するためのシンプルなベースクラスを提
   供してくれるライブラリ
   • lit-html
   • JavaScriptのためのHTMLテンプレートライブラリ
   • Formerly, this project was developing Polymer library.
   

   View Slide

5. LitElement 3.0 & lit-html 2.0
   Early Preview Release
   

   View Slide

6. Blog Article
   https://www.polymer-project.org/blog/
   2020-09-22-lit-element-and-lit-html-next-
   preview
   

   View Slide

7. Motivation
   • Performance
   • Size
   • Features & API cleanup
   • Server-side-rendering
   

   View Slide

8. SSR
   • https://github.com/whatwg/dom/issues/831
   • Declarative Shadow DOM
   • WebComponentsをSSRしたい！というニーズが高まっている
   • lit-htmlのカスタマイズ機構やDOM APIへのアクセスを制限すること
   で、SSRしやすくなる
   • 「Ideas for LitElement 3.0」というissueにも「SSR Support」という
   項があるので、本格的にSSR対応が入りそう
   

   View Slide

9. Other major changes
   

   View Slide

10. LitElement decorators
    • DecoratorがメインモジュールからExportされなくなった
    • Decoratorを使う場合は lit-element/decorators から個別にイン
    ポートする必要がある
    • Decoratorを使用していない場合のサイズが小さくなる
    • TC39で議論中のDecoratorが導入された場合への備え
    

    View Slide

11. View Slide

12. Material Web Components
    

    View Slide

13. Progress
    • https://github.com/material-components/material-
    components-web-components
    • まだプレリリースだけど…
    • 25 コンポーネントが実装済み
    • 4 コンポーネントが開発中
    • 1つがTBD
    

    View Slide

14. Summary
    

    View Slide

15. Summary
    LitElement & lit-html will change
    dynamically! Check it out!
    

    View Slide

16. Thank you!
    

    View Slide