 |
 |
 |
|
|
|
Autor: Ben FarrellForeword by Gray Norton
Broj strana: 423
ISBN broj: 9781617295775
Izdavač:
MANNING PUBLICATIONS
Godina izdanja: 2019.
 |
 |
 |
 |
 |
||||
Teaches by example, demonstrating concepts through compelling projects that illuminate realistic use cases. From the Foreword by Gray Norton, Polymer Project, Google Web Components are a standardized way to build reusable custom elements for web pages and applications using HTML, CSS, and JavaScript. A Web Component is well-encapsulated, keeping its internal structure separate from other page elements so they don’t collide with the rest of your code. In Web Components in Action you’ll learn to design, build, and deploy reusable Web Components from scratch. Part 1: First steps
1.1 What are Web Components?
1.1.1 The date picker
1.1.2 The Shadow DOM
1.1.3 What do people mean when they say Web Components?
1.1.4 The problematic history of HTML Imports
1.1.5 Polymer Library and X-Tags
1.1.6 Modern Web Components
1.2 The future of Web Components
1.3 Beyond the single component
1.3.1 Web Components are just like any other DOM element
1.3.2 From individual component to application
1.4 Your project, your choice
1.5 Summary
2.1 Intro to HTMLElement
2.1.1 Crash course in inheritance
2.1.2 Inheritance in your favorite elements
2.2 Rules for naming your element
2.3 Defining your custom element (and handling collisions)
2.4 Extending HTMLElement to create custom component logic
2.5 Using your custom element in practice
2.6 Making a (useful) first component
2.6.1 Set up your web server
2.6.2 Writing our HTML tag
2.6.3 Creating our class
2.6.4 Adding content to our component
2.6.5 Styling our component
2.6.6 Component logic
2.6.7 Adding interactivity
2.6.8 Finishing touches
2.6.9 Improving the carousel
2.7 Notes on browser support
2.8 Summary
3.1 A real-world component
3.1.1 A 3D search use case
3.1.2 Starting with an HTTP request
3.1.3 Wrapping our work up in a custom component
3.1.4 Rendering search results
3.1.5 Styling our component
3.2 Making our component configurable
3.2.1 Creating our component API with setters
3.2.2 Using our API from the outside looking in
3.3 Using attributes for configuration
3.3.1 An argument against a component API for configuration
3.3.2 Implementing attributes
3.3.3 Case sensitivity
3.4 Listening for attribute changes
3.4.1 Adding text input
3.4.2 The attribute changed callback
3.4.3 Observed attributes
3.5 Making more things even more customizable
3.5.1 Using hasAttribute to check if an attribute exists
3.5.2 Fully customizing the HTTP request URL for development
3.5.3 Best practice guides
3.5.4 Avoiding attributes for rich data
3.5.5 Property and attribute reflection
3.6 Updating the slider component
3.7 Summary
4.1 The Web Components API
4.2 The connectedCallback handler
4.2.1 Constructor vs. connected
4.3 The remaining Web Component lifecycle methods
4.3.1 Disconnected callback
4.3.2 Adopted callback
4.4 Comparing to React’s lifecycle
4.5 Comparing to a game engine lifecycle
4.6 Component lifecycle v0
4.7 Summary
5.1 Using the script tag to load your Web Components
5.1.1 Having to deal with many JS and CSS references
5.1.2 Tiny scripts are more organized, but make the reference problem worse
5.1.3 Including CSS for self-reliant components
5.1.4 Dependency hell
5.2 Using modules to solve dependency problems
5.2.1 Creating a musical instrument with Web Components and JS modules
5.2.2 Starting with the smallest component
5.2.3 Importing and nesting a Web Component within a Web Component
5.2.4 Using a Web Component to wrap an entire web application
5.3 Adding interactivity to our component
5.3.1 Listening for mouse movement
5.3.2 Passing data to child components
5.3.3 Making your components shake with CSS
5.4 Wrapping third-party libraries as modules
5.4.1 Frontend tooling for wrapping a module with Node.js
5.4.2 Not perfect, but does the job
5.4.3 Using the wrapped module to play some notes
5.4.4 No more audio autoplay
5.4.5 Playing the Web Harp
5.5 Summary
Part 2: Ways to Improve your Component Workflow
6.1 String theory
6.1.1 When inline HTML gets ugly
6.1.2 String syntax with the backtick
6.2 Using template literals
6.2.1 Business card creator
6.2.2 Iterating design with just HTML and CSS
6.3 Importing templates
6.3.1 Keeping markup out of the main component logic
6.3.2 A module just for HTML and CSS
6.4 Template logic
6.4.1 Creating menus from data
6.4.2 More generation logic, harder automation
6.5 Element caching
6.5.1 Don’t make me query-select in my component
6.6 Smart templating
6.6.1 Using lit-html
6.6.2 Repeating with templates
6.6.3 Should you use it?
6.6.4 Injecting event listeners into markup
6.7 Updating the slider component
6.8 Summary
7.1 R.I.P. HTML Imports
7.1.1 Polyfilling HTML Imports
7.1.2 What’s inside the import
7.2 The template tag
7.2.1 Document fragments
7.2.2 Using template content
7.3 Choose your own template adventure
7.4 Dynamically loading templates
7.5 Entering the Shadow DOM with slots
7.5.1 Slots without a name
7.6 Summary
8.1 Encapsulation
8.1.1 Protecting your component’s API
8.1.2 Protecting your component’s DOM
8.2 Enter the Shadow DOM
8.2.1 The shadow root
8.2.2 Closed mode
8.2.3 Your component’s constructor vs. connectedCallback
8.3 The Shadow DOM today
8.4 Summary
9.1 Style creep
9.1.1 Style creep into component descendants
9.1.2 Style creep into your component
9.2 Style creep solved with the Shadow DOM
9.2.1 When styles creep
9.3 Shadow DOM workout plan
9.3.1 Application shell
9.3.2 Host and ID selectors
9.3.3 Grid and list containers
9.4 Adaptable components
9.4.1 Creating the exercise component
9.4.2 Exercise component style
9.5 Updating the slider component
9.6 Summary
10.1 Contextual CSS
10.1.1 A small bit of interactivity
10.1.2 Contextual style
10.1.3 Workaround for host-context
10.2 Component themes
10.2.1 Shadow and deep selectors
10.2.2 CSS Variables
10.2.3 Applying CSS Variables to our demo
10.3 Using the Shadow DOM in practice (today)
10.3.1 Browser support
10.3.2 Polyfilling
10.3.3 Design systems
10.4 Summary
Part 3: Putting your components together
11.1 Crafting a color picker
11.1.1 The components of our component
11.2 Coordinate picker component
11.2.1 The coordinate picker Web Component class
11.2.2 Coordinate picker HTML/CSS
11.2.3 Component demos
11.3 The color picker
11.3.1 Observing attribute changes for interaction
11.3.2 Responding to input fields
11.3.3 Responding to attribute changes
11.4 Adding a common design language
11.4.1 Swapping in CSS vars for a consistent design
11.4.2 Using imports for more complex CSS
11.5 Summary
12.1 Backwards compatibility
12.1.1 Toggling the Shadow DOM
12.1.2 Comparing to polyfills
12.1.3 Shadow CSS and child elements
12.2 Building for the least common denominator
12.3 Build processes
12.3.1 Using NPM scripts
12.4 Building components
12.4.1 Why we build
12.4.2 Module bundling with Rollup
12.4.3 Running builds with npm
12.5 Transpiling for IE
12.5.1 Babel
12.5.2 CSS var ponyfill
12.6 Summary
13.1 Unit testing and TDD
13.2 Web Component tester
13.2.1 Writing tests
13.3 Comparing to a standard test setup with Karma
13.3.1 Karma Web Components
13.3.2 Multiple tests in the same project
13.3.3 A note on Safari
13.4 Summary
14.1 Framework offerings
14.2 Events
14.2.1 Native events and WebComponentsReady
14.2.2 When custom elements are defined
14.2.3 Custom Events
14.2.4 Custom Event bubbling
14.3 Passing events through Web Components
14.3.1 Native event propagation through the Shadow DOM
14.3.2 Custom Event propagation through the Shadow DOM
14.4 Separate your data
14.4.1 Model-view-controller
14.4.2 Local storage
14.4.3 Wiring UI to the data model
14.5 Exercise playback view
14.6 Passing events with an event bus
14.6.1 Static getter event types
14.6.2 Design patterns as suggestions
14.7 Summary
15.1 Looking to the Web Component future
15.2 3D and mixed reality
15.2.1 A-Frame
15.2.2 Model viewer component
15.2.3 Model-viewer + Poly search
15.2.4 AR with model-viewer
15.2.5 Your own 3D component
15.3 Video effects
15.3.1 Processing pixels with JS
15.3.2 WebGL shaders
15.4 Hand tracking and machine learning
15.5 Summary
Appendixes
A.1 What is ES2015?
A.2 Rethinking variables with ES2015
A.2.1 Variable declaration with let
A.2.2 Variable declaration with const
A.2.3 Important by convention but not functionality
A.3 Classes
A.3.1 Constructor
A.3.2 Properties
A.3.3 Private properties in JS
A.3.4 Getters and setters
A.3.5 Static methods
A.4 Modules
A.4.1 Top-level objects in JS
A.4.2 Module syntax for importing and exporting
A.4.3 Working with multiple functions in the same module
A.5 Template literals
A.5.1 Inserting variables into a template literal
A.6 The fat arrow
A.6.1 The callback scope problem
A.6.2 Losing scope in classes
A.6.3 Managing scope with the fat arrow
The right UI can set your sites and web applications apart from the ordinary. Using the Web Components API, you can build Custom Elements and then add them to your pages with just a simple HTML tag. This standards-based design approach gives you complete control over the style and behavior of your components and makes them radically easier to build, share, and reuse between projects.
Web Components in Action teaches you to build and use Web Components from the ground up. You’ll start with simple components and component-based applications, using JavaScript, HTML, and CSS. Then, you’ll customize them and apply best design practices to maximize reusability. Through hands-on projects, you’ll learn to build production-ready Web Components for any project, including color pickers, advanced applications using 3D models, mixed reality, and machine learning.
Creating reusable Custom Elements without a framework Using the Shadow DOM for ultimate component encapsulation Leveraging newer JS features to organize and reuse code Fallback strategies for using Web Components on older browsers
Written for web developers experienced with HTML, CSS, and JavaScript.
Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team.
Budite prvi koji će ostaviti komentar.
 |
|||
|
|||
© Sva prava pridržana, Kompjuter biblioteka, Beograd, Obalskih radnika 4a, Telefon: +381 11 252 0 272 |
||
