現場の Web Components / Real world Web Components

06c292fa0b9557777d3cb4663ceec40a?s=47 aggre
April 23, 2018

現場の Web Components / Real world Web Components

06c292fa0b9557777d3cb4663ceec40a?s=128

aggre

April 23, 2018
Tweet

Transcript

  1. Web Components 2018.04.23 @ Web Components Café by Polymer Japan

  2. aggre @aggre_ @aggre FRAME00, INC. CTO

  3. ooapp.co/aggre

  4. • Web Components • Web Components • Web Components

  5. Web Components

  6. • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports
  7. • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports HTML Imports? ES Modules? HTML Modules?
  8. • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports HTML Imports? ES Modules? HTML Modules? ES Modules
  9. Custom Elements Shadow DOM HTML Templates ES Modules

  10. Custom Elements Shadow DOM HTML Templates ES Modules IE DOM

  11. Web Components

  12. • • •

  13. None
  14. None
  15. JavaScript my-app.js

  16. HTML index.html

  17. ESM index.html

  18. None
  19. index.html

  20. None
  21. DOM

  22. Web Components

  23. Web Components Custom Elements

  24. None
  25. None
  26. React

  27. React Custom Elements

  28. <my-app></my-app> ? HTML my-app

  29. None
  30. Custom Elements

  31. React

  32. Vue

  33. Vue …?

  34. Custom Elements vue-custom-element @angular/elements

  35. Custom Elements vue-custom-element @angular/elements

  36. • •

  37. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote />

  38. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote /> App

  39. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote /> App /

  40. <my-app></my-app> <my-app></my-app> <x-price />

  41. Web Components

  42. • • • •

  43. • •

  44. • https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks • https://github.com/webcomponents/webcomponentsjs

  45. None
  46. None
  47. innerHTML

  48. Custom Elements innerHTML

  49. HTML Templates

  50. HTML Templates

  51. Custom Elements

  52. Custom Elements (template).content.cloneNode()

  53. None
  54. None
  55. HTML Templates /

  56. addEventListener

  57. querySelector

  58. innerText

  59. • DOM API • DOM API •

  60. • DOM API • DOM API • HTML Template Instantiation

    Appendix
  61. • DOM API • DOM API • HTML Imports HTML

    Modules Appendix
  62. ES Modules

  63. lit-html

  64. lit-html = Template literals

  65. lit-html

  66. lit-html

  67. lit-html

  68. IDE Microsoft/typescript-lit-html-plugin

  69. React

  70. React Web Components

  71. None
  72. None
  73. REST API

  74. None
  75. None
  76. Shadow DOM

  77. Shadow DOM

  78. PostCSS

  79. PostCSS rollup-plugin-transform-postcss

  80. Appendix

  81. None
  82. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH

  83. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH TypeScript

  84. connected

  85. connected

  86. connectedCallback connected ( )

  87. disconnectedCallback connected

  88. ( ) Private

  89. Protected

  90. render()

  91. None
  92. None
  93. attributeChangedCallback connected

  94. attributeChangedCallback connected attributeChangedCallback

  95. connected

  96. connected connected

  97. None
  98. • ES Class … •

  99. None
  100. None
  101. None
  102. None
  103. customElements.define 1

  104. None
  105. None
  106. Set

  107. None
  108. None
  109. Set

  110. None
  111. • • • Firebase Realtime Database http://developer.kaizenplatform.com/entry/tatsuroro/2018-04-19 •

  112. None
  113. • • • React • HTML Imports PolymerElements/app-route

  114. • • • React • HTML Imports PolymerElements/app-route …

  115. Web Components • • Polyfill • ES Modules • module

    • HTML Modules • Web Components • Web Components • Custom Elements • lit-html • • Web Components,
  116. Thank you ooapp.co/aggre