Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

みんなのコンポーネント志向 Web開発

95 views

Published on

170615 Eyes, JAPAN Web Developers Meeting

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

みんなのコンポーネント志向 Web開発

  1. 1. みんなの コンポーネント志向 Web開発 Eyes, JAPAN Co.LTD 170615 Web Developers Meeting
  2. 2. Hello,
  3. 3. Hello, - 伊藤 勇希/Yuki Ito - acomagu/publmag1 - University of Aizu - 最近ハマっているまんが: - 中卒労働者からはじめる高校生活 - 青春のアフター - がっこうぐらし
  4. 4. コンポーネント志向
  5. 5. コンポーネント志向 ・ ・ 部品
  6. 6. コンポーネント志向 ・ ・ 部品でがんばる
  7. 7. 何を?
  8. 8. 何を? HTML? CSS? JS?
  9. 9. 何を? HTML? CSS? JS? んぶ!!
  10. 10. CSS HTML JS
  11. 11. style.css script.jsindex.html CSS HTML JS
  12. 12. CSS HTML JS
  13. 13. Header CSS HTML JS Body Hooter …
  14. 14. 実際にコードを見てみる
  15. 15. HTML/CSS
  16. 16. いいんです!
  17. 17. なぜ?
  18. 18. なぜ? スコープが分かれているから
  19. 19. このタグの外に CSSがはみ出さ ない!
  20. 20. このタグの外に CSSがはみ出さ ない! 最高!!!
  21. 21. HTML
  22. 22. HTML HTMLHTML <Header /> <Body />
  23. 23. HTML HTMLHTML <Header /> <Body />
  24. 24. HTML HTMLHTML <Header /> <Body /> <html> <Header /> <Body /> <Footer /> </html> index.html Simplized!
  25. 25. HTML HTMLHTML <Header /> <Body /> <html> <Header /> <Body /> <Footer /> </html> index.html Simplized! 神!
  26. 26. JSのはなし
  27. 27. JSのはなし
  28. 28. JavaScirptから見たコンポーネント志向のメリット
  29. 29. JavaScirptから見たコンポーネント志向のメリット 語り尽くせない
  30. 30. JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 - コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる
  31. 31. JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 - コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる 語り尽くせない
  32. 32. JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 - コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる調べてみて!!!
  33. 33. ちなみに
  34. 34. なぜRiot.js?
  35. 35. なぜRiot.js? デザイナー(コーダー)とエンジニアの分業がしやすい
  36. 36. デザイナー(コーダー)にも、 エンジニアにもメリットがある ソリューション
  37. 37. みんなの コンポーネント志向 Web開発
  38. 38. Thanks!

×