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 Components Revolution

458 views

Published on

وب کامپوننت‌ها رویکرد جدیدی به توسعه وب‌سایت‌ها و وب اپلیکیشن‌ها می‌باشند. هدف از توسعه وب‌کامپوننت‌ها ساخت عناصری (HTML Elements) مستقل بوده که توانایی کنش با یکدیگر را دارا باشند. به عنوان مثال وب‌کامپوننت‌ها به شما توانایی تعریف و استفاده از تگ‌هایی مانند و را می‌دهند. در حال حاضر مرورگر‌های مدرن به صورت استاندارد و سایر مرورگر‌ها به صورت polyfill از وب‌کامپوننت‌ها پشتیبانی می‌کنند. وب کامپوننت‌ها در سال 2012 توسط شرکت گوگل معرفی شدند. همچنین شرکت گوگل نسخه 1.0 کتابخانه Polymer را با هدف پیاده‌سازی و توسعه وب‌کامپوننت‌ها در سال 2015 به صورت عمومی ارائه کرد.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web Components Revolution

  1. 1. Saeid Zebardast Web Components Revolution
  2. 2. Hi! I’m Saeid, and I love We Components. zebardast.ir saeid saeidzebardast
  3. 3. I’ll talk about... • Web Components? • The Specs • Use Them, Today!
  4. 4. How Do You Use Libraries? • Bootstrap • Foundation • jQuery UI 1. Go to docs 2. Copy & Paste • All of them! 3. See result
  5. 5. Whyyy!
  6. 6. We can do it better 1.Find a tag (element) • bower install --save PolymerElements/paper-menu 2.Import • <link rel="import" href="../bower_components/paper-menu/paper-menu.html"> 3.Use it • <paper-menu selected="0"> <paper-item>Inbox</paper-item> <paper-item disabled>Starred</paper-item> <paper-item>Sent mail</paper-item> </paper-menu>
  7. 7. Like a Boss
  8. 8. <google-map> <google-map latitude="35.699694" longitude="51.338560"></google-map>
  9. 9. <nvd3-pie> <nvd3-pie data="[[data]]" auto-resize show-legend></nvd3-pie>
  10. 10. <moment-js> <moment-js format="YYYY-MM-DD HH:mm:ss"></moment-js> 2016-07-18 00:52:59
  11. 11. Web Components 😄 1.Create your own HTML elements 2.Scope your styles 3.React with lifecycle callbacks
  12. 12. The Specs • Templates • Shadow DOM • Custom Elements • Imports
  13. 13. The Specs • Templates • Shadow DOM • Custom Elements • Imports
  14. 14. Templates Template are inert chunks of DOM the can be reused. <template id="my-element"> <h1>Awesome Trunk!</h1> <img src=""> </template> <script> var tmpl = document.querySelector(‘#my-element’); tmpl.content.querySelector("img").src = "trunk.gif"; document.body.appendChild(document.importNode(tmpl.content, true)); </script> Content
  15. 15. Templates Limitations • No built-in data interpolation • {{}} don’t do anything...yet! • Nested templates not activated automatically • Append each template separately
  16. 16. The Specs • Templates • Shadow DOM • Encapsulation • Custom Elements • Imports
  17. 17. • Provides style and markup encapsulation. • The same technology used by browser makers to implement tags: • <video> • <video src="./be-happy.webm" controls> Shadow DOM
  18. 18. Shadow Host The node that contains all of our shadow DOM <video> Shadow Root The first node in the shadow DOM #document-fragment Shadow Boundary The barrier that protects our shadow DOM <div> <div>
  19. 19. <template> <style> h3 { color: white; background: tomato} </style> <h3>A Shadow Header</h3> </template> <script> var tmpl = document.querySelector('template'); var host = document.querySelector(.my-header'); var root = host.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); </script> </body> Style Encapsulation A Shadow Header <body> <h3>A Default Header</h3> A Default Header
  20. 20. The Specs • Templates • Shadow DOM • Custom Elements • Extensions! • Imports
  21. 21. Templates + Shadow DOM Custom Elements
  22. 22. document.registerElement('tag-name', { prototype: proto }); Custom Elements • Tag name must have a dash • Proto must inherit from HTMLElement
  23. 23. var tmpl = document.querySelector('#some-template'); var MyElementProto = Object.create(HTMLElement.prototype); MyElementProto.createdCallback = function() { var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true); }; var MyElement = document.registerElement('my-element', { prototype: MyElementProto }); Create a Custom Element
  24. 24. • <my-element></my-element> // OR • document.createElement('my-element’); // OR • new MyElement(); Using Your Element
  25. 25. Life Cycle Callbacks • createdCallback() When a new instance is created. Use like a constructor • attachedCallback() When an element is added to the page • detachedCallback() When an element is removed from the page • attributeChangedCallback(attrName, oldVal, newVal) When one of an element's attributes changes
  26. 26. The Specs • Templates • Shadow DOM • Custom Elements • Imports • Packaging • Everything on one page
  27. 27. • Imports load external documents into your page. • Use a link tag, just like css. • Use rel type import • <link rel="import" href="my-import.html"> Imports
  28. 28. Browser Support Native Polyfill (webcomponents.js)
  29. 29. When Use It? Whenever You Want! When Not Use It? Whenever You Don’t Want!
  30. 30. • webcomponents.org • customelements.io • polymer-project.org • See you at the Polymer workshop! Use Them, Today!
  31. 31. Any Question, Comments? Thank You 👏 zebardast.ir saeid saeidzebardast

×