Web Components with Jeff Tapper
Presented on September 18 2014 at
FITC's Web Unleashed Toronto 2014 Conference
More info at www.fitc.ca
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 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
Presentation about the native browser way for building web components. We look at examples and the pros and cons of doing it natively and using a library. At the end we look at the Angular way of wrapping custom components into Custom Elements.
Web Components with Jeff Tapper
Presented on September 18 2014 at
FITC's Web Unleashed Toronto 2014 Conference
More info at www.fitc.ca
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 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
Presentation about the native browser way for building web components. We look at examples and the pros and cons of doing it natively and using a library. At the end we look at the Angular way of wrapping custom components into Custom Elements.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
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.
Whether or not you are using Visual Studio to deploy your branding solutions, this session is for you. We’ll start with the basics discussing the pieces compromising your branding assets, and the tools that are needed for the job. Next we’ll dive into the concept and techniques that could be utilized in order to apply your branding, such as: Applying Themes, MasterPage, Tricks with Additional Page Head, Alternative Style Sheets, and Feature Receivers.
Salesforce Auckland Developer Meetup - May 2018 - Lightning Web Components Ben Edwards
Tiaan Swart from Deloitte NZ presentation on everything you need to know how Lightning Web Components! With a real working code sample and demonstrations, as well as discussing how to migration from Lightning Components
1. Angular Components:
Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA)
2. Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.
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
Adobe Experience Manager Core ComponentsGabriel Walt
Components for AEM Sites that cover the most common web content needs.
Discover which components exist, what features they offer, how they work technically and how they can be extended by a developer.
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".
JavaScript language plays a very important role in Web 2.0 application development. JavaScript has its own characteristics different than object-oriented languages and it's not easy for developers to understand.
This presentation covers major advanced topics in JavaScript languages, including prototype chain, identifier resolving, "this" keyword, "new" operator, execution context and scope chain and closure. Besides that, it also covers best practices when using JavaScript.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
5. 5
Software Component
An individual software component is a software package,
a web service, a web resource, or a module that
encapsulates a set of related functions (or data).
Components are modular and cohesive.
Components communicate with each other via interfaces.
A component model is a definition of standards for
component implementation, documentation and
deployment.
– EJB, COM, COBRA
http://en.wikipedia.org/wiki/Software_component
6. 6
Software Component is for
Reuse
Sharing
http://www.flickr.com/photos/wheatfields/118700012/
Don't Reinvent the Wheels
7. 7
Components for the Web
We now have different components for the web
– Dojo widgets
– jQuery plugins
– YUI widget
– Sencha components
Different frameworks have their own solutions
No common standards
9. 9
In the Web We Have
HTML CSS JavaScript
Structure
Content
Presentation Behaviour
10. 10
After You Add a Component
You may introduce
– Additional DOM nodes
• Statically inlined
• Dynamically created using JavaScript
– CSS rules
– JavaScript objects
These may conflict with your own application
– Duplicated DOM element IDs
– Component's styles mingles with existing styles
– Conflicted global JavaScript object names
11. 11
Add a Twitter Badge to Your Page (1)
Go to https://twitter.com/about/resources/buttons
Select type
You get code like this
12. 12
Add a Twitter Badge to Your Page (2)
You get DOM like this
iframe is the primary tool we have for encapsulation
13. 13
Components Contribute to Current Page
HTML CSS JS
HTML CSS JS HTML CSS JS HTML CSS JS
Widget 1 Widget 2 Widget 3
14. 14
Web Components
Component model standard for the Web
W3C working draft
(http://www.w3.org/standards/techs/components)
A very new standard
15. 15
Web Components
Web Components standards consist of
– HTML Templates (http://www.w3.org/TR/html-templates/)
– Decorators
– Custom Elements (http://www.w3.org/TR/custom-elements/)
– Shadow DOM (http://www.w3.org/TR/shadow-dom/)
– HTML Imports (http://www.w3.org/TR/html-imports/)
16. 16
HTML Templates
Templates = basic structure + place holders
Dynamic web applications use templates to generate
HTML fragments
Current template techniques
– Inline invisible markup
• Set CSS style 'display:none'
– Embed HTML markup in string
• In JavaScript files
17. 17
HTML Templates
Client-side templates are widely used today
– Server-side exposes REST API over JSON
– Combine data with template strings
– Use innerHTML to render
Problems
– Invisible markup
• Resources are still loaded
– Template strings
• XSS attacks
• Not intuitive
18. 18
HTML Templates
<template> element
Declarative way to create HTML fragments
Use content attribute to access the fragment
Content of templates are not part of the document and are
inactive
– Not display
– Cannot query
– Resources not load
Move or clone template to current DOM tree to render
19. 19
Custom Elements
Create your own HTML elements
Use <element> to create
– <element name="x-my-element"><p>My Element</p></element>
Extend existing element
– <element name="x-my-button" extends="button"></element>
How to use in the page
– New element
• <x-my-element></x-my-element>
– Extended element
• <button is="x-my-button>Push</button>
20. 20
Custom Elements
Support lifecyle callbacks
– ready
– inserted
– removed
Use HTML Imports to import custom elements
– <link rel="import" href="x-nice-image.html">
21. 21
Shadow DOM
Shadow DOM is the key of encapsulation within the DOM
tree
Establish functional boundaries in a document tree
23. 23
Shadow Tree
Shadow DOM allows elements in the document tree to
host other DOM trees
A set of rules establish encapsulation boundaries
between document tree and shadow trees
28. 28
Encapsulation
All nodes in the shadow tree are NOT accessible in
shadow host's document
Node ids are NOT addressable in shadow host's
document
Style sheets are NOT accessible using shadow host's
document's CSSOM
29. 29
Encapsulation
Styles
– CSS rules declared in an enclosing tree not apply in a shadow tree,
except when the apply-author-styles flag is set for this tree
– CSS selectors cannot cross the shadow boundary
– Use reset-style-inheritance flag to set inheritable CSS properties
to the initial value
Use @host to add styles to shadow host
30. 30
Encapsulation
Events dispatched in the shadow tree may
– Cross the shadow boundary or
– Be terminated at the shadow boundary
Events crossing the shadow boundary are retargetted
– Event's information is adjusted to hide shadow tree
32. 32
Simple Sample
Use JavaScript to create a shadow
host
Use <content> to specify insertion
point
Shadow host's chidren and shadow
tree are composited together when
rendered
CSS selectors only match wholly
inside or outside of the shadow tree
Style 'color: #f00' not applied to shadow tree
33. 33
HTML Imports
HTML Imports are a way to include and reuse HTML
documents in other HTML documents.
<link rel="import" href="x-person-badge.html">
34. 34
Polymer Project
Polymer is a new type of library for the web, built on top of
Web Components, and designed to leverage the evolving
web platform on modern browsers.
– Created by Google
– http://www.polymer-project.org/
– Announced in Google I/O 2013
Embrace latest standards
Provide polyfills for old browsers
Going to replace Web UI in Dart