https://evanjon.es/

Wigly, yet another UI library for the web.

Logo for Wigly.

Wigly is a JavaScript library for building user interfaces on the Web. Much like a React, Vue, Angular,… and so on. Wigly has a couple goals that I believe sets it apart from other frameworks and libraries. First, to be very small, and second, to have a simpler API surface.

Small here means the end size of the library. At the time of this writing the ES6 build of Wigly is 2.28kb gzipped while the ES5 build is sub 4kb. Simple here is two-fold. The first meaning of simple is that the implementation is easily grokable…  The core source code of the library comes in at (at the time of this writing) 228 lines of JavaScript. It doesn’t use any advance “design” patterns. The library is very intentional in how it is written and does not succumb to anything that doesn’t serve a purpose for the end goal of being light weight. The most high level thing you’ll find in Wigly’s source is the use of closures and callbacks. Things that have been found in the JavaScript realm since the 90s. The second meaning of small is the API exposed by Wigly is tiny. Wigly exposes a function, render, a JSX factory, h, similar to Preact/HyperApp, and two hooks, state and effect, much like React bar the naming (React calls these useState and useEffect).

Now lets see how simple creating components in a component based UI library can be. A Wigly component is just JavaScript, as React once use to proclaim of itself. A Wigly component is JavaScript function that return the result of the hypertext function Wigly exports.

function MyFirstComponent() {
  return <div>Hello, World!</div>;
}

This component will render a div element with the text content being “Hello, World!”

Those familiar with React (and friends such as Preact/HyperApp) should feel right at home.

When you are ready to render a Wigly component (or many) onto the page you’ll call the render function Wigly exposes, like so.

wigly.render(<MyFirstComponent />, document.body);

Huzzah, four lines of code and our “Hello, World!” is complete.

Now how can we build feature rich client side applications with something so small? Newer conventions found in React are available for us. Wigly components have a two of the same hooks mentioned previously state and effect. effect can be compared to mounted/updated/destroyed lifecycle you’ll find in most JavaScript UI libraries today.

function Triumph() {
  effect(() => {
    // This will operate as
    // an updated lifecycle.
  });

  effect(() => {
    // While this will operate
    // as a mounted lifecycle.
    return () => {
      // Lastly, this will behave
      // as a destroy lifecycle!
    };
  }, 0);
}

Learning these hooks will be the same process as learning React’s hooks.

Now on to props… how are they used? Passed? State? Can we pass around children components like we can in React? How do we update state?

function Input(props) {
  // Events are attached by prefacing it with
  // an "on" -- any prop prefaced with an "on" is
  // assumed to be an event handler that will be
  // attached to the given element. Wigly calls
  // element.addEventListener("input", value) in
  // this case.
  return <input oninput={props.handleChange} />;
}
function Header(props) {
  // The text we're going to be displaying here has been
  // passed to us via our children but it could very well
  // have been passed to us like
  // <Header text={name} />;
  //  so we would then use it like
  // <h1>{props.name}</h1>;
  return <h1>{props.children}</h1>;
}
function App() {
  // The value passed to state will be the initial
  // value of the given state item, `name` in this case.
  var [name, setName] = wigly.state("____");

  var handleChange = event => {
    // This ultimately becomes the event listener
    // atttached to our input element that will
    // be rendered by the input component.
    // Calling the second value in the touple
    // returned by state is how one would
    // update a component's state.
    setName(event.target.value || "____");
  };

  return (
    <div>
      <Header>{name}</Header>
      <Input handleChange={handleChange} />
    </div>
  );
}

Alright, now we have some code down. I hope you are enjoying what you’re seeing and find it as simple and elegant as I do (thanks React for the ideas). Trying Wigly out is just an “npm install wigly” away. I encourage you to view our repository as this isn’t all you may want to know when it comes to creating feature rich applications with Wigly. For example you may want to now how to incorporate lazy/async components into Wigly, or use css-in-js – both totally possible. Please come and see!