Upload
gil-fink
View
366
Download
4
Embed Size (px)
Citation preview
About Me • sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress)
co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer
Component Definition • A component is
o Independent software unit
o Can be composed with other components
Component Characteristics
• Independent o A component should be independent
• Composable o All external interactions must take place through publicly defined
interfaces (API)
• Deployable o Self-contained and must be able to operate as a stand-alone entity
Breaking The Page into Components
Header + Toolbar
About
Main Section
What’s new
Schedule
Summary
Recent list
From Design to Implementation
Main Section
Schedule
Summary
Recent list
Component
Child Component
Child Component
Child Component
<main-section>
<schedule>
<summary>
<recent-list>
Components Tree
<main-section>
<schedule> <summary> <recent-list>
<main-section>
<schedule>
<summary>
<recent-list>
Stateless Components • Define inputs and outputs
• Data enters via property binding (input)
• Data leaves via events (output)
• Stateless/dumb/presentational
<schedule>
<summary>
<recent-list>
Stateful Components • Communicate with services and states
• Don’t directly mutate states
• Render child components
• Stateful/smart/container
<main-section>
Routed Components • Same as stateful component
• Includes a route definition bound to the component
<Route>
<about> <main-section> <whats-new>
Two Way Binding • Automatic synchronization of data between the
model and component’s view
• The view is a projection of the model at all times
Model
Component
Change in Model updates the component’s view
Change in component’s view updates the Model
Frameworks/Libraries • Most of the MVW frameworks include two way
binding o Angular 1
o Angular 2 (not out of the box)
o KnockoutJS
o And many more
Libraries • Libraries that leverages the Flux pattern:
o Facebook’s Flux: https://github.com/facebook/flux
o Redux: https://github.com/reactjs/redux
o Reflux: https://github.com/reflux/refluxjs
o Alt: http://alt.js.org/
o And many more
Mediator/Event Aggregator
Angular lodash postal.js … Core Libraries
Application Core
Facade
Pub / Sub
… Component
HTML / CSS / JavaScript
Component
HTML / CSS / JavaScript
Component
HTML / CSS / JavaScript
Mediator/Event Aggregator – Cont.
• Promotes loose coupling of components
• Allow components to broadcast or listen to
notifications from other components
• Notifications can be handled by any number of
components at once
Frameworks/Libraries • Framework that leverages the proposed solution:
o Most of the MVW frameworks include ways to apply this architecture
(AngularJS, Ember and Backbone for example)
o Aura: http://aurajs.com/
o And many more
HTML5 Web Components • A set of standards designed to componentize the
web
• Some general goals:
Code Reuse Encapsulation Separation of
Concerns Composition Theming Expressive Semantic
The Web Components Standards
• Reusable DOM fragments Templates
• Load HTML declaratively Imports
• DOM encapsulation Shadow DOM
• Create your own elements Custom
Elements
Setting The Environment • Browsers have only partial support for Web
Components o So we use the webcomponents.js Polyfill for Web Components
• Download: o https://github.com/webcomponents/webcomponentsjs/
o Or install using your favorite package manager (Nuget/Bower/npm)
• Make sure the Polyfill script runs first
Templates • A new HTML element – template
• Can be used to instantiate document fragments
• Can wrap HTML, style tags and script tags
• No data binding support
<template id=”myTemplate”> <div> … </div> </template>
Cloning a Template • Select the template and extract its content
o Use the importNode function to get the cloned content
• Only when the clone is appended to the DOM o The style and JavaScript are executed
o Resources like images are retrieved from the server
var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);
Imports • Load additional HTML documents
o Without using Ajax
• A new type of link tag
• Use the rel attribute with the import type:
<link rel=”import” href=”myImport.html”>
Imports and Bundling • Enable to bundle a full component into one HTML
file o The HTML can include scripts and CSS styles
• The whole bundle can be retrieved in a single call
Imports and The DOM • Importing a document doesn’t include it into the
DOM o It will parse it in memory and load all the additional resources
• Use the import property of the link tag:
var content = document.querySelector(‘link[rel=”import”]’).import;
Import Additional Notes • Scripts running inside the import can reference the
containing document by calling
document.currentScript.ownerDocument
• CORS constraints apply to documents imported
from other domains
Shadow DOM • Encapsulate DOM parts
o The browser will know how to present those parts
o The browser won’t show the encapsulated parts in the source code
• Creates a boundary between the component and
its user
The Problems Shadow DOM Tries to Solve
• Encapsulation of components/widgets
• Style leakage o Leaks from one component to another
o Leaks from imported 3th party library/framework
• Global DOM o id or class attributes all over the place
Shadow DOM – Cont. • Use the createShadowRoot function to wrap an
element as a shadow DOM:
var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;
Styling Shadow DOM • :host and :host() pseudo-class
• ::content pseudo-element
<div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template>
</div>
Custom Elements • Enable to extend or to create custom HTML
elements o The new element must inherit from HTMLElement
• Create a custom element using the registerElement
function:
• Extend an existing element:
var myElement = document.registerElement(‘my-element’);
var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });
Custom Elements – Naming
• You can create named elements (almost) any way
you want: o Same naming rules as other HTML tags
o There must be a dash (“-”) in the name
• To future-proof the name against the HTML standard
• To avoid naming collisions
Custom Elements – Usage • Use the element in your DOM:
or use the createElement function:
<my-input></my-input>
var elm = document.createElement(‘my-input’);
Custom Element Callbacks
• Custom elements have life cycle events:
• createdCallback o Called when an instance is created
• attachedCallback o Called when an instance is added to DOM subtree
• detachedCallback o Called when an instance is removed from a DOM subtree
• attributeChangedCallback o Called after an attribute value changes
The Current State of Web Components
• Still W3C Working Drafts
• Browser support:
http://caniuse.com/#search=web%20components
• Main libraries:
Polymer X-Tag
Summary • Component Driven Development enables you to
create web applications more efficiently
• HTML5 Web Components are emerging standards
that enables: • Encapsulation
• Separation of Concerns
• Element portability
• And more
• Taking the web one step forward!
Resources • http://webcomponents.org/
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink