Meet the possible future of Web: web components. 4 parts of web components can be used separately or together and allow us create reusable modules which we call "widgets".
Polymers are large molecules, created of many subunits, and together they can compose larger elements that are fundamental to biological structure and function.
This is exactly the idea behind Polymer. To create custom HTML elements, as encapsulated, reusable components that work across desktop and mobile. To achieve this, Polymer uses the latest web technologies, such as Web Components, Shadow DOM, HTML templates and imports.
Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
Web Components
with Jeff Tapper
OVERVIEW
Web Components provide a necessary element for large scale applications: the ability to build Web Apps as a set of encapsulated, maintainable and reusable components. In order to use Web Components, a series of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements need to be used, each of which have varying support in browsers today. However, with the help of the Polymer project – a set of polyfills and an application framework using these principles – Web Components can be used today.
In this session Jeff Tapper will explore Web Components, and walk through the creation of a Web Component for a modern JavaScript project.
OBJECTIVE
Learn to use Web Components to create reusable elements for your web application.
TARGET AUDIENCE
JavaScript Developers looking to understand how to build large scale applications.
ASSUMED AUDIENCE KNOWLEDGE
Audience should be comfortable working in JavaScript and manipulating the DOM.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What are Web Components
What is the current state of support for Web Components
When do I need to use the Polymer Project to implement Web Components
How to build a Web Component
How to use a Web Component
Polymer vs other libraries (Devfest Ukraine 2015)jskvara
Most modern front-end JavaScript libraries provide support for component based development. Components help separate large applications into standalone building blocks with specified communication API. Let's compare Polymer elements with components from React, Angular.
Web Components with Polymer (extra Polymer 2.0)Dhyego Fernando
This document discusses Web Components and the Polymer library. It begins with an introduction to Web Components and their benefits like reusability. It then discusses what Polymer is and why it is useful for building Web Components, including its templating features. The remainder covers Polymer 2.0 updates, tools like the Polymer CLI, learning resources, and a question/answer section.
Polymer & the web components revolution 6:25:14mattsmcnulty
Polymer & the Web Components Revolution from Google I/O on 6/25/14 by Matthew McNulty. An overview of Web Components, Polymer, and the ecosystem and tools being created surrounding them.
This document discusses using Polymer to build web component-based applications. It begins by explaining what web components are and how browsers support them through standards like custom elements, HTML imports and templates. It then introduces Polymer as a library that helps build web components and provides ready-made reusable components. The document outlines how to build full-stack apps with Polymer, including using Spring Boot on the backend to provide features like authentication. It also covers tools like Vulcanize, Crisper and build optimizations to improve performance of Polymer apps.
This document discusses web components and the Polymer library. It begins with an introduction to web components, including custom elements, templates, shadow DOM, and HTML imports. It then discusses the Polymer library and how it adds support for web components in browsers as well as additional features like pre-built elements. The document provides examples of using paper elements and iron elements in Polymer. It concludes by comparing Polymer to alternatives and frameworks like Angular, and provides some example code and useful links.
Introduction to Google Polymer 1.0 at JS Meetup in Athens, Greece. How Polymer builds a comprehensive front-end framework on the "Web Components" standard.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
Web Components allow developers to build reusable custom elements that encapsulate HTML, CSS, and JavaScript. They include features like Shadow DOM for encapsulation, templates for stamping out repeated sections, HTML imports for modular code, and custom elements for defining new types of elements. Polymer makes it easy to build web applications using these new web component standards by providing polyfills and a set of pre-built reusable elements.
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
Build single page applications using AngularJS on AEMconnectwebex
The document discusses building single page applications using AngularJS on Adobe Experience Manager (AEM). It provides an overview of what single page applications are and their pros and cons. It then details the technical reasons for choosing to build an SPA, including creating a native-like user experience on all devices and making the application search and social friendly. The document outlines the proof of concept built, which combines Sling with AngularJS on AEM. It describes the base page component used and how it conditionally includes full pages or just content partials. The routing and use of AngularJS to control navigation between views is also summarized.
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
This is in a developer-focused session on developing iOS apps with Web Components and Google Polymer.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
by Maurizio Mangione - I web components sono un nuovo set di feature della piattaforma web. Polymer ne rende la creazione ancora più facile e permette, tramite polyfill di utilizzarli in tutti i browser moderni fin da ora. In Polymer tutto è un elemento, ha una vita propria e per questo può essere facilmente distribuibile e riutilizzabile.
Polymer is a library for creating reusable web components. It allows developers to define custom elements with associated JavaScript behaviors to provide sophisticated user interfaces. Key features include defining local DOM, data binding with templates, declaring custom element properties, and composing elements from other elements. Properties support default values, configuration from markup, and two-way data binding for dynamic updates.
The Razor template markup syntax is used throughout ASP.NET. In the next version of ASP.NET, Core Razor is evolving into multiple Razor adaptations such as Razor Tag Helpers, Razor Pages, Blazor, Blazor & Razor Components. In this session, we'll learn the key differences between theses variations and see where they align in the ASP.NET road map. We’ll make sense of how each concept was introduced and what use cases they fulfill.
Build Reusable Web Components using HTML5 Web cComponentsGil Fink
This document discusses using HTML5 Web Components to build reusable web components. It introduces several emerging Web Component standards including templates, imports, shadow DOM, and custom elements. Templates allow defining reusable DOM fragments, imports enable bundling HTML, CSS and JavaScript into a single component, shadow DOM provides DOM encapsulation, and custom elements define new semantic elements. While still in draft, Web Components aim to improve code reuse, encapsulation, separation of concerns and composition on the web. The presentation provides examples and demonstrations of each standard.
The document discusses the Comenius Project from 2013-2015 which focused on classical times and how they can guide the future. It mentions the British Museum and the Parthenon in Athens, describing the Parthenon as a large temple dedicated to the goddess Athena that had sculptures and a 160 meter long frieze, including depictions of horsemen.
The document summarizes a school trip to the El Prado Museum in Madrid where students saw many famous paintings from classical Greek and Roman mythology. They viewed works by artists like Titian, Rubens, and Michelangelo depicting myths involving the Furies and punishments of figures like Tityus, Sisyphus, Prometheus, and Ixion, whose livers were eaten by vultures or eagles and regrew each night for their eternal torture as retribution for offending the gods.
Nanigans Keynote - DDM Alliance Summit Marketing on FacebookDDM Alliance
This document discusses the benefits of bringing advertising efforts in-house rather than outsourcing to agencies. It notes that taking advertising in-house allows for greater freedom, cost savings up to 30% annually, and more control over campaigns. In-house teams can also react more quickly to changes and have a better understanding of their customers. While in-house may not always be the right solution, the document provides tips for building an effective in-house marketing team with the right skills.
SmartSuite is an enterprise foundation that integrates and harmonizes POS and Syndicated Data with your internal master data to support business intelligence needs of all departments for consumer goods manufacturers.
On this 30 min. Webinar you will hear from Relational Solutions co-founder, Janet Dorenkott as she discusses: Harmonizing POS data with master data to support
• Assortment Optimization
• OOS & Potential OOS Issues
• Post Event Analytics
• Event Alignments & more
Meet web components - a new draft spec proposed by Google and used to write reusable and encapsulated widgets that can be attached to DOM isolated.
by Anna Khabibullina, Co-Founder at DA-14
for Kharkiv JS&UI Meetup #1
The document discusses optimization of the presentation tier of web applications. It notes that the presentation tier is often overlooked despite being responsible for over 30% of client/server performance. Some key optimizations discussed include reducing HTTP requests, optimizing response objects by reducing size and load pattern, JavaScript minification and placement, image sprites, caching, and ensuring valid HTML markup.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Reaching for the Future with Web Components and PolymerFITC
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
OVERVIEW
Web Components allow us to view web applications as a set of encapsulated, maintainable and reusable components, an approach which is necessary for scalability and large applications. However, they rely on the use of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements, which currently have limited browser support. But thanks to the Polymer project - a set of polyfills and an application framework using these principles – Web Components can be used today. They are bleeding edge, likely to change a bit and simultaneously insanely cool and undeniably useful. Michael Labriola invites attendees to learn how to integrate these pieces into their processes today, to bring sanity and reuse to their worlds as a result.
Web Components allow developers to create reusable custom elements that encapsulate HTML, CSS, and JavaScript. They include four specifications: HTML Imports for including and reusing HTML documents; Shadow DOM for encapsulating styles and scripts; Custom Elements for defining new types of HTML elements; and HTML Templates for declaring chunks of reusable markup. These specifications enable more modular and reusable component-based web development.
This document provides an overview and introduction to web components, including:
- Custom elements allow creating new semantic elements and extending existing ones.
- HTML templates separate markup from logic using the <template> tag.
- Shadow DOM provides encapsulation by separating an element's logical and visual trees.
- HTML imports allow including HTML documents to import custom elements and fragments.
- Web components standards like custom elements, templates, and shadow DOM provide encapsulation, separation of concerns, and other benefits, but browser support is still evolving.
Introduction to Client Side Dev in SharePoint WorkshopMark Rackley
The document is a presentation on client side development in SharePoint using jQuery. It begins with introductions and an agenda. The agenda covers deploying and referencing scripts, a jQuery primer, debugging techniques, modifying default SharePoint forms, REST/CSOM/SPServices, third party libraries, and SharePoint hosted apps. It then discusses why client side development is useful and challenges like browser inconsistencies. Best practices covered include avoiding global variables and writing performant code. Various development tools are presented. Finally, a demo is shown of building a simple contract management solution using the techniques discussed.
The document discusses how Polymer can be used to build web components. It explains that Polymer provides primitives like templates, shadow DOM, and custom elements to define your own HTML elements. It then demonstrates how to build a simple "alert-banner" element with Polymer by defining a template, styles, and prototype. The element can be used on a page by adding content between its opening and closing tags. Finally, it discusses how Polymer elements can be combined to build complete applications and packaged for production use.
Polymer-Powered Design Systems - DevFest FloridaJohn Riviello
One of the most powerful features of Web Components is using Shadow DOM & CSS Custom properties to achieve actual code sharing among your style guides & pattern libraries with your website and web application code. No more developing design systems in isolation and struggling to have design updates applied to the actual development code. The code you write in your Web Components is both the living pattern library and the code your components use! In this talk you'll learn the specifics of working with Polymer, the most popular Web Components library, to build your design system in a way that can be used across any web-enabled device. We'll cover best practices for working with CSS in Polymer to ensure design and accessibility needs are met. We'll also demonstrate the best ways to deal with the limitations of the Shadow DOM & CSS Custom Property shims to support older browsers.
From DevFest Florida 2017
Building reusable components as micro frontends with glimmer js and webcompo...Andrei Sebastian Cîmpean
Reusing features across multiple stacks. A story of trade-offs and approach choices to make it easy to run features independent of the tech stack in which they are running.
Web Components are an attempt to create custom, reusable components that can be used in HTML markup. They utilize several emerging web standards including Shadow DOM for encapsulation, templates for reusability, and custom elements for defining new elements. While not fully supported yet, libraries like Polymer allow using web components today through polyfills to bring these capabilities to more browsers. The document discusses how web components work and provides examples of their usage.
Angular elements - embed your angular components EVERYWHERENadav Mary
My lecture about angular elements, a new feature released in angular version 6 which allows us to transform angular components into custom elements and use them outside angular's scope.
Leveraging the Power of Custom Elements in GutenbergFelix Arntz
This document discusses the benefits of using web components for building reusable components in a standardized way. It outlines how web components allow encapsulation of styles and markup through features like shadow DOM and custom elements. Web components help improve maintainability and reusability of components. Frameworks are increasingly using web components as the basis for their "leaf components". The document promotes web components as a solid foundation and provides resources for getting started with web components.
Orchard Harvest 2014 - The Future of Widgets?Steve Taylor
Presented on June 9th 2014 at the Orchard Harvest 2014 event which was held at Microsoft's HQ in Redmond, WA.
Many technologies, past and present have tried to "componentize" HTML. Each with their own implementations and approaches. Web Components are a standard implementation backed by the W3C that aim to tackle this.
Polymer is a library from Google that sits on top of Web Components and makes the creation of custom elements a lot easier. The presentation, talks on how Web Components & Polymer can be used within Orchard CMS.
This document discusses patterns for implementing micro frontends with Vue. It describes Vue as a good framework for building micro frontends due to its flexibility. It then covers issues that can arise with micro frontends and provides solutions, such as using custom elements to ensure components are rendered correctly, passing data from server to client, and sharing components between micro frontends.
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
Polymer is a library for building web components that aims to support modern browsers and minimize boilerplate code. It uses web platform APIs like Shadow DOM, HTML Imports, and Custom Elements to allow developers to define reusable custom elements with encapsulated styles and behaviors. Polymer provides features like automatic node finding, two-way data binding, change watchers, and declarative event handling to make building web components easier. Elements can also communicate with each other through properties, events, or calling public methods. The goal of Polymer is to embrace HTML and leverage the evolving web platform to build more maintainable and reusable components.
Similar to Web Components: back to the future (20)
The document discusses AngularJS concepts like two-way data binding, directives, testability and its active community. It provides code examples of using directives, data binding, $watch, $digest, $evalAsync and dependency injection. It also discusses some Angular optimization tips like minimizing watchers, using native JS instead of Angular functions, and issues with dependency injection before and after minification.
- Dive into Real Time Cloud Database
- CRUD and Data Retrieving
- Authentication and Security
- Special Features you would like to use
- Client- and Server-Side Modules
Techtalk#6: NodeJs: pitfalls (based on game project)DA-14
Are you about to start coding backend in NodeJs? So then what should you expect and avoid while doing this? Our answer is - many things, including asynchoronous programming, single thread and global scope. Make sure you understand what these are to have better NodeJs experience and application in the end.
Read about this and other techtalks @ DA-14 in our blog: http://da-14.com/our-blog/
Unit Testing in Javascript
The way to quality product isn't easy or simple but it is reachable. One of the key things to do is unit testing. What, when and how to do it --> read in the presentation.
See more details here: http://www.slideshare.net/AnnaKhabibullina/jsfwdays-2014unittesingjavascriptv4-33966202
Read about this and other techtalks @ DA-14 in our blog: http://da-14.com/our-blog/
Управление временем - неотъемлемая составляющая успешной карьеры и жизни. Презентация поможет вам понять, как эффективно организовать свой день и добиваться поставленных целей.
By Evgeny Bogoroditsky
Read more about this and other techtalks @ DA-14 blog: http://da-14.com/our-blog/
Share our experience working with RESTful architecture.
By Alexey Pakholkov
Read more about this and other techtalks in DA-14's blog: http://da-14.com/our-blog/
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...YanKing2
Pre-trained Large Language Models (LLM) have achieved remarkable successes in several domains. However, code-oriented LLMs are often heavy in computational complexity, and quadratically with the length of the input code sequence. Toward simplifying the input program of an LLM, the state-of-the-art approach has the strategies to filter the input code tokens based on the attention scores given by the LLM. The decision to simplify the input program should not rely on the attention patterns of an LLM, as these patterns are influenced by both the model architecture and the pre-training dataset. Since the model and dataset are part of the solution domain, not the problem domain where the input program belongs, the outcome may differ when the model is trained on a different dataset. We propose SlimCode, a model-agnostic code simplification solution for LLMs that depends on the nature of input code tokens. As an empirical study on the LLMs including CodeBERT, CodeT5, and GPT-4 for two main tasks: code search and summarization. We reported that 1) the reduction ratio of code has a linear-like relation with the saving ratio on training time, 2) the impact of categorized tokens on code simplification can vary significantly, 3) the impact of categorized tokens on code simplification is task-specific but model-agnostic, and 4) the above findings hold for the paradigm–prompt engineering and interactive in-context learning and this study can save reduce the cost of invoking GPT-4 by 24%per API query. Importantly, SlimCode simplifies the input code with its greedy strategy and can obtain at most 133 times faster than the state-of-the-art technique with a significant improvement. This paper calls for a new direction on code-based, model-agnostic code simplification solutions to further empower LLMs.
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...IJAEMSJORNAL
This study primarily aimed to determine the best practices of clothing businesses to use it as a foundation of strategic business advancements. Moreover, the frequency with which the business's best practices are tracked, which best practices are the most targeted of the apparel firms to be retained, and how does best practices can be used as strategic business advancement. The respondents of the study is the owners of clothing businesses in Talavera, Nueva Ecija. Data were collected and analyzed using a quantitative approach and utilizing a descriptive research design. Unveiling best practices of clothing businesses as a foundation for strategic business advancement through statistical analysis: frequency and percentage, and weighted means analyzing the data in terms of identifying the most to the least important performance indicators of the businesses among all of the variables. Based on the survey conducted on clothing businesses in Talavera, Nueva Ecija, several best practices emerge across different areas of business operations. These practices are categorized into three main sections, section one being the Business Profile and Legal Requirements, followed by the tracking of indicators in terms of Product, Place, Promotion, and Price, and Key Performance Indicators (KPIs) covering finance, marketing, production, technical, and distribution aspects. The research study delved into identifying the core best practices of clothing businesses, serving as a strategic guide for their advancement. Through meticulous analysis, several key findings emerged. Firstly, prioritizing product factors, such as maintaining optimal stock levels and maximizing customer satisfaction, was deemed essential for driving sales and fostering loyalty. Additionally, selecting the right store location was crucial for visibility and accessibility, directly impacting footfall and sales. Vigilance towards competitors and demographic shifts was highlighted as essential for maintaining relevance. Understanding the relationship between marketing spend and customer acquisition proved pivotal for optimizing budgets and achieving a higher ROI. Strategic analysis of profit margins across clothing items emerged as crucial for maximizing profitability and revenue. Creating a positive customer experience, investing in employee training, and implementing effective inventory management practices were also identified as critical success factors. In essence, these findings underscored the holistic approach needed for sustainable growth in the clothing business, emphasizing the importance of product management, marketing strategies, customer experience, and operational efficiency.
Online music portal management system project report.pdfKamal Acharya
The iMMS is a unique application that is synchronizing both user
experience and copyrights while providing services like online music
management, legal downloads, artists’ management. There are several
other applications available in the market that either provides some
specific services or large scale integrated solutions. Our product differs
from the rest in a way that we give more power to the users remaining
within the copyrights circle.
How to Manage Internal Notes in Odoo 17 POSCeline George
In this slide, we'll explore how to leverage internal notes within Odoo 17 POS to enhance communication and streamline operations. Internal notes provide a platform for staff to exchange crucial information regarding orders, customers, or specific tasks, all while remaining invisible to the customer. This fosters improved collaboration and ensures everyone on the team is on the same page.
Understanding Cybersecurity Breaches: Causes, Consequences, and PreventionBert Blevins
Cybersecurity breaches are a growing threat in today’s interconnected digital landscape, affecting individuals, businesses, and governments alike. These breaches compromise sensitive information and erode trust in online services and systems. Understanding the causes, consequences, and prevention strategies of cybersecurity breaches is crucial to protect against these pervasive risks.
Cybersecurity breaches refer to unauthorized access, manipulation, or destruction of digital information or systems. They can occur through various means such as malware, phishing attacks, insider threats, and vulnerabilities in software or hardware. Once a breach happens, cybercriminals can exploit the compromised data for financial gain, espionage, or sabotage. Causes of breaches include software and hardware vulnerabilities, phishing attacks, insider threats, weak passwords, and a lack of security awareness.
The consequences of cybersecurity breaches are severe. Financial loss is a significant impact, as organizations face theft of funds, legal fees, and repair costs. Breaches also damage reputations, leading to a loss of trust among customers, partners, and stakeholders. Regulatory penalties are another consequence, with hefty fines imposed for non-compliance with data protection regulations. Intellectual property theft undermines innovation and competitiveness, while disruptions of critical services like healthcare and utilities impact public safety and well-being.
Development of Chatbot Using AI/ML Technologiesmaisnampibarel
The rapid advancements in artificial intelligence and natural language processing have significantly transformed human-computer interactions. This thesis presents the design, development, and evaluation of an intelligent chatbot capable of engaging in natural and meaningful conversations with users. The chatbot leverages state-of-the-art deep learning techniques, including transformer-based architectures, to understand and generate human-like responses.
Key contributions of this research include the implementation of a context- aware conversational model that can maintain coherent dialogue over extended interactions. The chatbot's performance is evaluated through both automated metrics and user studies, demonstrating its effectiveness in various applications such as customer service, mental health support, and educational assistance. Additionally, ethical considerations and potential biases in chatbot responses are examined to ensure the responsible deployment of this technology.
The findings of this thesis highlight the potential of intelligent chatbots to enhance user experience and provide valuable insights for future developments in conversational AI.
Unblocking The Main Thread - Solving ANRs and Frozen FramesSinan KOZAK
In the realm of Android development, the main thread is our stage, but too often, it becomes a battleground where performance issues arise, leading to ANRS, frozen frames, and sluggish Uls. As we strive for excellence in user experience, understanding and optimizing the main thread becomes essential to prevent these common perforrmance bottlenecks. We have strategies and best practices for keeping the main thread uncluttered. We'll examine the root causes of performance issues and techniques for monitoring and improving main thread health as wel as app performance. In this talk, participants will walk away with practical knowledge on enhancing app performance by mastering the main thread. We'll share proven approaches to eliminate real-life ANRS and frozen frames to build apps that deliver butter smooth experience.
A brief introduction to quadcopter (drone) working. It provides an overview of flight stability, dynamics, general control system block diagram, and the electronic hardware.
2. .Agenda
_ Web Components and their parts
_ X-Browser Support
_ Demo
_ Best Practices
3. .About Me
_ Co-founder of DA-14 Web Dev Team
http://da-14.com
_ Web Engineer
http://sitecues.com
_ Open Source Contributor
http://github.com/akhabibullina
_ Social Person
http://twitter.com/_khabibullina
4. .What I work on
_ SaaS application(assistive
tool)
_ (No) libraries
_ No frameworks
_ UX design matters
_ Accessibility in mind
.Welcome every problem as opportunity
_ Better understanding
_ R&D challenges
_ Taking advantage of new technologies
_ Experimental features
_ X-browser support for modern browsers
5. .Web Components Made Of Rainbows
Set of cutting edge [draft] standards
proposed by Google that make it
possible to build secure reusable
widgets using web platform
technologies.
10. Custom Elements: Sexy markup
_ Why? : There is nothing modern in <div> soup.
_ How? : Define new types of HTML elements and their APIs.
_ http://www.html5rocks.com/en/tutorials/webcomponents/customelements
11. Custom Elements
_ JavaScript
var CustomElementProto = Object.create(HTMLElement.prototype);
var XFoo = document.registerElement('x-custom-da-14', {
prototype: CustomElementProto
});
var xfoo = new XFoo();
document.body.appendChild(xfoo);
_ HTML
<x-custom-da-14></x-custom-da-14>
13. HTML Imports: Simple way to load HTML elements
_ Why? : The web's most basic content, HTML, requires the
greatest amount of effort to work with.
_ How? : Import HTML components via <link rel="import">.
_ http://www.html5rocks.com/en/tutorials/webcomponents/imports
14. HTML Imports
index.html
<head>
<link rel="import" href="/path/to/import.html">
</head>
<body>
…
</body>
<script> … </script> import.html
…
<div id="blog-post">...</div>
var c = document.querySelector('link[rel="import"]').import; access content
15. HTML Imports
Yo dawg. I hear you like imports, so I included an import in your import.
17. Shadow DOM: Separating content from presentation
_ Why? : DOM tree encapsulation problem.
_ How? : Think about DOM hosting DOM, which hosts more DOM.
_
http://www.html5rocks.com/en/tutorials/webcomponent
s/shadowdom
18. Shadow DOM
_ Video player
<video controls="" autoplay="" name="media">
<source src="http://localhost:1000/media" type="audio/mpeg">
</video>
19. Shadow DOM
_ http://html5-demos.appspot.com/shadowdom-visualizer
20. .Web Components
Templates
Standardizing client-side templating
Custom Elements
Sexy markup
HTML Imports
Simple way to load HTML elements
Shadow DOM
Separating content from presentation
22. .Best Practices
_ Namespacing(bower.io, customelements.io)
_ Mimic built-in elements as closely as possible
_ Don't put too much in Shadow DOM
_ Don't create more custom elements than you need
…..
_ Accessibility
_ Performance
_ Testing
_ http://webcomponents.org/articles/web-components-best-
practices/
24. .Demo
_ CUSTOMELEMENTS.IO
A gallery to display Web Components
created by the community.
http://customelements.io/
_ COMPONENT KITCHEN
Component catalog for a mainstream
HTML audience.
http://component.kitchen/
http://html5-demos.appspot.com/static/webcomponents/index.html#1
Кто такая я и почему я сейчас рассказываю про веб компоненты…
Если описание моего проекта перекликается с вашим, то это значит, что вам тоже можно присмотреться к web components.
Все 4 части можно использовать отдельно, но
Тема шаблонизации в Вебе не нова, бекенд - фронтенд.
Контент шаблона не находится в ДОМе, все запросы querySelector() или getElementById() не выберут детей
Можно разместить где угодно в документе <head>, <body>, or <frameset
Чтобы избежать конфликтов, согласно стандарту, кастомные элементы должны содержать дефис в своём названии. По-умолчанию они наследуют HTMLElement.
Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.
Custom позволят писать модульный, удобочитаемый код на высоком уровне.
HTMl Imports Импорт фрагментов разметки из других файлов.
Shadow DOM - Инструмент инкапсуляции HTML.
Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.
Custom позволят писать модульный, удобочитаемый код на высоком уровне.
HTMl Imports Импорт фрагментов разметки из других файлов.
Shadow DOM - Инструмент инкапсуляции HTML.
На мой взгляд, Web Components — это следующий шаг. Разработчики смогут создавать интерактивные виджеты. Их легко поддерживать, переиспользовать, интегрировать.
Изучайте и дерзайте!