Dumbass – UI Made Simple

栏目: IT技术 · 发布时间: 4年前

内容简介:Make components from cross-browser web standards without thinking too hard.Kernighan's Law is named forWhile hyperbolic, Kernighan's Law makes the argument that simple code is to be preferred over complex code, because debugging any issues that arise in co

:bug: dumbass

Chosen by toddlers, insects, and stupid coders.

Be boring, be dumb. Be too stupid for complex tools.

Make components from cross-browser web standards without thinking too hard.

Why?

Kernighan's Law

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
(Brian Kernighan)

Kernighan's Law is named for Brian Kernighan and derived from a quote from Kernighan and Plauger's book The Elements of Programming Style :

Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it?

While hyperbolic, Kernighan's Law makes the argument that simple code is to be preferred over complex code, because debugging any issues that arise in complex code may be costly or even infeasible.

So, what's this?

No JSX, no Shadow DOM, no fancy framworks, no opinions.

  • Just HTML, CSS and JavaScript —No JSX, no Shadow DOM, no fancy frameworks, no opinions.
  • Stop learning, stagnate! —Use the syntax you already know. Stop learning new things. Do more with what's already here.
  • Crazy and fun, but in a serious way —Dumbass is the tool for people who don't want to think too hard to make UI.

To learn more ...oh wait, you already know enough.

Gorgeous dumbass

function Spin(n) {
  return d`  
    <div 
      wheel:passive=${spin}
      touchmove:passive=${move}
    >
      <h1>
        <progress 
          max=1000
          value=${n}
        ></progress>
        <hr>
        <input 
          input=${step}
          type=number 
          value=${n}>
    </div>
  `;
}

Still not bored?

You soon will be. Nothing amazing here: Play with the full example on CodePen

See even more boring code in a 250 line TodoMVC test

Install mantras

Install dumbass with npm:

npm i --save dumbass

Parcel or Webpack dumbass and import:

import { d } from "dumbass"

See a CodeSandbox how-to of above

Or import in a module:

<script type="module">
  import { d } from "https://unpkg.com/dumbass"
</script>

See a CodePen how-to of above

Basic Examples

Components

Components are pure views. Functions that take something and return dumbass objects . If the view needs state, it can take it as a parameter.

Defining

const Component = state => d`<h1>${state}</h1>`

A dumbass object is your HTML template. It's just a standard JavaScript template literal you tag with the d function.

Nesting

Nest components by slotting the result of calling the component into the template of the parent component.

const Parent = state => d`<main>${Title(state)}</main>`;

Mounting

The first time you call a top-level component, you should mount it to the document.

Parent("Hello").to('body', 'beforeEnd');

Updating

In order to update some view, just call that function again. It's as simple as that.

Parent("Greetings");
setTimeout(() => Parent("Hi"), 3000);

Real-world example

In the example below the App component nests TodoList and Footer components.

It also calls the newTodoIfEnter updator function on the keydown event of that input tag.

function App(state) {
  const {list} = state;
  return d`
    <header>
      <h1>todos</h1>
      <input placeholder="What needs to be done?" autofocus
        keydown=${newTodoIfEnter} 
      >
    </header>
    <main>
      ${TodoList(list)}
      ${Footer()}
    </main>
  `;
}

function TodoList(list) {
  return d`
    <ul class=todo-list>
      ${list.map(Todo)}
    </ul>
  `;
}

You'll notice we don't pass state (the whole client state object) to every component. Components can define the parameters they take, and it's up to their embedding components to pass them the correct state.

You might also notice we're passing an Array into the template (in TodoList ). That's OK so long as the Array only contains dumbass objects.

Updating on events

In order to update state and view in response to user input, you define updator functions and pass them into a template slot as the value of an attribute named for the event you respond to. The above real world example showed the newTodoIfEnter updator was hooked to occur on the keydown event.

function newTodoIfEnter(keyEvent) {
    if ( keyEvent.key !== 'Enter' ) return;
    
    State.todos.push(makeTodo(keyEvent.target.value));
    TodoList(State.todos);
    keyEvent.target.value = '';
  }

Updator functions noramlly do two things:

  1. Update some state.
  2. Call the components that change in response to that update.

They're a loose convention that makes explicit the mapping between state changes and view functions / components.

You might also notice we manually empty the value. There's no strict binding between input values and state as enforced in more opinionated frameworks. You're free to write that sort of thing if you like, e.g: const NumberInput = n => d`<input type=number value=${n}>` ;

Properties

There are no such things as properties in this "framework". A Component is simply a JavaScript function that returns dumbass object, which is just a template literal tagged with the d function.

The way that state is passed through to sub-components is simply through function calls, and the way that attributes and content are applied to elements is simply by slots in the dumbass template, just like in the above examples.

Global State

Again, there is nothing special about "state" in this "framework". State is simply regular JavaScript variables. You use state the same way you use variables in your program. State needs to be in scope where you reference it.

State flows through the component tree via normal JavaScript function calls. A sub component receives state passed down from its parent component by a function call.

Routing

Routing is not natively provided so you need to wire it yourself. Here's an exmaple of one way to do it:

function changeHash(e) {
  e.preventDefault();
  history.replaceState(null,null,e.target.href);
  routeHash();
}

function routeHash() {
  switch(location.hash) {
    case "#/active":                listActive(); break;
    case "#/completed":             listCompleted(); break;
    case "#/":          default:    listAll(); break;
  }
}

And you'll also need a place to list the routes:

function Routes() {
  return d`
    <ul>
      <li>
        <a href="#/" click=${changeHash}
         #/" ? 'selected' : ''}">All</a>
      </li>
      <li>
        <a href="#/active" click=${changeHash}
         #/active" ? 'selected' : ''}">Active</a>
      </li>
      <li>
        <a href="#/completed" click=${changeHash}
         #/completed" ? 'selected' : ''}">Completed</a>
      </li>
    </ul>
  `
}

Most of the examples above are taken from in a 250 line TodoMVC test , the full code of which you can see here. .

Go forth, stagnate and be dumb!


以上所述就是小编给大家介绍的《Dumbass – UI Made Simple》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

并行算法的设计与分析

并行算法的设计与分析

陈国良 / 2009-8 / 66.00元

第3版在修订版的基础上进行了大幅度的修订,新增加3章、重写3章,改写8章。《普通高等教育十一五国家级规划教材·并行算法的设计与分析(第3版)》系统深入地讨论了计算机领域中诸多计算问题的并行算法的设计和分析方法。在着重介绍各种并行计算模型上的常用和典型的并行算法的同时,也力图反映本学科的最新成就、学科前沿和发展趋势。 全书共分二十章,包括基础篇4章(绪论、设计技术、前缀计算、排序和选择网络),......一起来看看 《并行算法的设计与分析》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具