JavaScript drives browser components by combining data, template literals, and functions that generate HTML. A component can pass structured choices into a template, then render menus and other markup from those choices. section 6.4
A practical JavaScript workflow for browser components includes:
- Use template literals to mix ordinary markup, variables, and function results in one HTML string. section 6.8
- Adapt newer JavaScript for older browsers by transpiling ES2015 features into ES5 output with Babel. section 12.5
A data-driven business card
A business-card component receives backgroundChoices and logoChoices arrays. Its template calls an options function for each array, producing two select menus. Selecting an item lets the component customize its logo and tiled background without duplicating the surrounding markup. section 6.4
Listing 6.10. Calling out to a function-based expression to render our menus
html(p) {
return `
<div class="logo-picker">
Logo: ${this.options(p.logoChoices)} #1
</div>
<div class="background-picker">Background:
${this.options(p.backgroundChoices)}</div> #2
<div class="biz-card">
<div class="logo"></div>
<div class="top-text">
<h1>${p.first_name} ${p.last_name}</h1>
<h3>${p.title}</h3>
</div>
<div class="bottom-text">
<h3>phone: ${p.phone}</h3>
<h3>${p.email} / ${p.website}</h3>
</div>
</div>`;
},
Inspect the template-literal listing to see how JavaScript calls a reusable options function from HTML generation. section 6.4
