Course platform vnext

Course Platform v.next

Hi I'm Doug!

On the Frontend team
At Skilljar two years

Agenda

Technical Overview
FAQ
Questions

Web developers draw boxes

We use HTML elements to do it

1<form class="input-form">
2  <input type="text"></input>
3  <button></button>
4</form>

We can add custom elements

1<skilljar-hero-image src="http://www.skilljar.com/logo" alt-text="the skilljar logo">
2</skilljar-hero-image>
3<proserv-announcement-banner background-color="rebeccapurple">
4This is an announcement
5</proserv-announcement-banner>

Future code

1<proserv-announcement-banner background-image="...">
2  <h1>Reddit Mod Education</h1>
3  <p>Courses, skill training, and tips for community builders.</p>
4</proserv-announcement-banner>

Current code

1<div class="catalog-header custom-header">
2  <div class="homepage-ch-container">
3    <div class="homepage-ch-title">
4      <h1>Reddit Mod Education</h1>
5    </div>
6    <div class="homepage-ch-text">
7      <p>Courses, skill training, and tips for community builders.</p>
8    </div>
9    <div class="search-container" role="search">
10      <div id="catalog-search-box" class="catalog-search-input-group">
11        <input id="catalogSearchInput" type="text" value="" class="catalog-search-input" placeholder="Search" aria-label="Search">
12        <span class="catalog-search-input-button-wrapper">
13          <button class="catalog-search-input-button" type="button" title="Search" aria-labelledby="catalogSearchInput">
14            <i class="fa fa-search" aria-hidden="true"></i>
15          </button>
16        </span>
17      </div>
18    </div>
19  </div>
20  <div>
21    <style>
22      .catalog-header {
23        background: url('...')
24      }
25    </style>
26  </div>
27</div>

Custom components are standards

Custom components are well-documented

Custom components are available on every page

We can allow clients to use our custom components anywhere they can input html

Custom components can be protected

But why?

Customer DOM access slows development

Two Search Boxes

Search Box html

1<div class="search-container" role="search">
2  <div id="catalog-search-box" class="catalog-search-input-group">
3    <input
4      id="catalogSearchInput"
5      type="text"
6      value="{{ search_query }}"
7      class="catalog-search-input"
8      placeholder="{% trans 'storefront_search_placeholder' %}"
9      aria-label="Search"
10    />
11    <span class="catalog-search-input-button-wrapper">
12      <button 
13          class="catalog-search-input-button" 
14          type="button" 
15          title="Search" 
16          aria-labelledby="catalogSearchInput"
17      >
18        <i class="fa fa-search" aria-hidden="true"></i>
19      </button>
20    </span>
21  </div>
22</div>

How can clients customize with closed DOM?

Html blocks
Attributes
Slots
Theme values
Wrap our custom components
Provide their own custom components

Html Blocks

Attributes

1<skilljar-hero-image url="www.custom-domain.com/my-image"></skilljar-hero-image>

Slots

1<skilljar-announcement-banner><h1 slot="top-left">My custom text</h1></skilljar-announcement-banner>

Theme values

Clients can define their own custom elements

Currently, we allow custom components with the prefix "proserv-" on catalog pages; we can add a client namespace as well.

Defining a custom component

1class HelloWorld extends HTMLElement {
2  connectedCallback() {
3    this.textContent = `Hello ${this.getAttribute('name')}!`;
4  }
5  static get observedAttributes() {
6    return ['name'];
7  }
8}
9customElements.define('hello-world', HelloWorld);

Using a custom component

1<hello-sayer name="Doug"></hello-sayer>

Styling a custom component

1class StyledButton extends HTMLElement {
2  connectedCallback() {
3    this.dispatchEvent(
4      new ContextEvent(
5        window.skilljarThemeContext,
6        (skilljarTheme) => {
7          this.buttonColor = skilljarTheme.buttonColor;
8        }
9      )
10    );
11    const wrapper = document.createElement('div');
12    wrapper.innerHTML = `
13      <style>
14        button { background-color: ${this.buttonColor} }
15      </style>
16      <button>my button</button>
17    `;
18    this.appendChild(wrapper);
19  }
20}
21customElements.define('styled-button', StyledButton);

Using a custom component

1<styled-button></styled-button>

Wrapping a custom component

1customElements.define('client-hero-image', CustomHeroImage);

Clients can redefine our custom elements

If clients define an element with the same name as an existing component, it will take precedence

Clients can redefine our custom elements

Redefining a custom component

1customElements.define('skilljar-hero-image', CustomHeroImage);

FAQ

What if we have a customer that wants to customize everything?
How are we going to merge "legacy" + builder pages?
What if a customer wants to be able to modify one thing that we can't?
What if a customer wants to add one field?
Bring your own template?

What if we have a customer that wants to customize everything?

We have no plan to deprecate "legacy" pages. Customers can continue to add custom html/js/css to catalog pages using "legacy" pages

How are we going to merge "legacy" + builder pages?

All custom components from page builder will be available on "legacy" pages for reuse.

"Legacy" pages

Builder pages

What if a customer wants to be able to modify one thing that we can't?

Customers can "swizzle" or "bring their own template" by defining their own custom components that wrap existing components.

Bring your own template?

Customers can "swizzle" or "bring their own template" by defining their own custom components that have whatever contents they like. Clients can also add custom html blocks.

Questions?