END

Why are there JS frameworks?

Presentation slides for developers

By: Nasr Galal

Modern front-end?

To create a web app nowadays, the concept became more complicated. We, the developers must follow the standards of SPA, SSR, routing and navigation, performance, … etc

That’s why the idea of creating a framework came up! let’s explore the following features:

📝 Hot Module Replacement (HMR) - Auto-reflects the DOM changes and updates.
🎨 Component design pattern (component system) - Helps for the separation of concerns during development process
🧑‍💻 Single Page Application (SPA) Routing - consumes the browser router API for faster and efficient navigation
🤹 Large scale state management - For handling the data inputs and outputs in a single place and achieve client side data persistence
📤 Build system - For scaffolding the app for production version

SPA Routing (JS)

HTML

<section id="app" class="card"></section>
<nav>
  <a href="#/">Home</a> -
  <a href="#/page1">Page 1</a> -
  <a href="#/page2">Page 2</a> - 
</nav>
<section id="app" class="card"></section>
<nav>
  <a href="#/">Home</a> -
  <a href="#/page1">Page 1</a> -
  <a href="#/page2">Page 2</a> - 
</nav>

Home Component

const HomeComponent = {
  render: () => {
    return `
      <section>
        <h1>Home</h1>
        <p>This is Home page</p>
      </section>
    `;
  }
};
const HomeComponent = {
  render: () => {
    return `
      <section>
        <h1>Home</h1>
        <p>This is Home page</p>
      </section>
    `;
  }
};

const Page1Component = {
  render: () => {
    return `
      <section>
        <h1>Page 1</h1>
        <p>This is Page 1</p>
      </section>
    `;
  }
};

const Page2Component = {
  render: () => {
    return `
      <section>
        <h1>Page 2</h1>
        <p>This is Page 2</p>
      </section>
    `;
  }
};
const Page1Component = {
  render: () => {
    return `
      <section>
        <h1>Page 1</h1>
        <p>This is Page 1</p>
      </section>
    `;
  }
};

const Page2Component = {
  render: () => {
    return `
      <section>
        <h1>Page 2</h1>
        <p>This is Page 2</p>
      </section>
    `;
  }
};

SPA routing result

// Routes
const routes = [
  { path: "/", component: HomeComponent },
  { path: "/page1", component: Page1Component },
  { path: "/page2", component: Page2Component }
];
// Using Hash approach
const parseLocation = hash => hash.slice(1).toLowerCase() || "/";

const findComponentByPath = path =>
  routes.find(r => r.path.match(new RegExp(`^\\${path}$`, "gm"))) || false;

const router = () => {
  console.log(document.location)
  const path = parseLocation(document.location.hash);
  const { component = ErrorComponent } =
    findComponentByPath(path, routes) || {};
  document.getElementById("app").innerHTML = component.render();
};

window.addEventListener("hashchange", router);
window.addEventListener("load", router) || router();
// Routes
const routes = [
  { path: "/", component: HomeComponent },
  { path: "/page1", component: Page1Component },
  { path: "/page2", component: Page2Component }
];
// Using Hash approach
const parseLocation = hash => hash.slice(1).toLowerCase() || "/";

const findComponentByPath = path =>
  routes.find(r => r.path.match(new RegExp(`^\\${path}$`, "gm"))) || false;

const router = () => {
  console.log(document.location)
  const path = parseLocation(document.location.hash);
  const { component = ErrorComponent } =
    findComponentByPath(path, routes) || {};
  document.getElementById("app").innerHTML = component.render();
};

window.addEventListener("hashchange", router);
window.addEventListener("load", router) || router();

vDOM

Our DOM

const vdom = h('div', { class: 'red' }, [
  h('span', null, 'hello')
])

mount(vdom, document.getElementById('app'))
const vdom = h('div', { class: 'red' }, [
  h('span', null, 'hello')
])

mount(vdom, document.getElementById('app'))

The render function

function h(tag, props, children) {
  return { tag, props, children }
}
function h(tag, props, children) {
  return { tag, props, children }
}

Mounting

function mount(vnode, container) {}
function mount(vnode, container) {}

hello

The Mount

function mount(vnode, container) {
  const el = vnode.el = document.createElement(vnode.tag)

  // Props
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key]
      // Assuming that all props are attributes for simplicity
      el.setAttribute(key, value)
    }
  }
  //  Children
  if (vnode.children) {
    if (typeof vnode.children === 'string') {
      el.textContent = vnode.children
    } else {
      vnode.children.forEach(child => {
        mount(child, el)
      })
    }
  }
  container.appendChild(el)
}
function mount(vnode, container) {
  const el = vnode.el = document.createElement(vnode.tag)

  // Props
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key]
      // Assuming that all props are attributes for simplicity
      el.setAttribute(key, value)
    }
  }
  //  Children
  if (vnode.children) {
    if (typeof vnode.children === 'string') {
      el.textContent = vnode.children
    } else {
      vnode.children.forEach(child => {
        mount(child, el)
      })
    }
  }
  container.appendChild(el)
}

Presentation Powered by

Slidev