developit

export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
  // arrays
  e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
  // components
  e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
    render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
  // create notes
  m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
  // diff props

LukasBombach

{
  "preset": "ts-jest",
  "testEnvironment": "node"
}

developit

import regexparam from 'https://unpkg.com/regexparam@1/dist/regexparam.mjs';

/**
 * <url-route href="/profile/:user">
 *   <div>some content here</div>
 * </url-route>
 */
customElements.define('url-route', class UrlRoute extends HTMLElement {
  connectedCallback() {
    this.route = regexparam(this.getAttribute('href'));

rauschma

Error.prototype.stack

Chrome

Error
    at f (eval at <anonymous> (first-steps-bundle.js:33), <anonymous>:5:11)
    at g (eval at <anonymous> (first-steps-bundle.js:33), <anonymous>:8:5)
    at eval (eval at <anonymous> (first-steps-bundle.js:33), <anonymous>:10:3)
    at eval (eval at <anonymous> (first-steps-bundle.js:33), <anonymous>:16:2)

sebmarkbage

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

developit

inline-loader for webpack

Point this loader at an empty file, and it'll let you supply fake contents for that file.

import one from 'inline-loader?filenam=one.js&code=export default 1!./empty.js';

console.log(one)  // 1

developit

Preact + Material-UI example

Preact is a fast 3kB alternative to React with the same modern API.

This example uses shows how to use Material UI 4 with Preact X and Preact CLI 3.

How to use

git clone blah preact-mui

LukasBombach

Preact Partial Hydration

We are implementing a website for a German newspaper. That website is, let's say, 80% static content, with 20% dynamic and interactive elements on the page.

Because we are seriously performance aware, we are trying to implement partial hydration, ie. SSR a Preact app and instead of sending the entire app code to the client, we only send those components to the client, that are actually interactive. Thus we are vastly reducing our bundle size, parsing and execution time. We then only hydrate those parts of our websites and effectively have multiple render roots on our page.

developit

respond

this isn't a library, don't use this.

it's a 1.5kb react-ey thing but using HTML instead of VDOM. diffing done via a hacked up version of set-dom.

Important Counter Demo

// this is a standard react component, except render() returns an HTML string

jviide

function push(array, item) {
  let index = array.length;
  while (index > 0) {
    const parentIndex = ((index - 1) / 2) | 0;
    if (array[parentIndex].__depth <= item.__depth) {
      break;
    }
    array[index] = array[parentIndex];
    index = parentIndex;
  }