Need help with exoteric?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

c9fe
149 Stars 7 Forks The Unlicense 550 Commits 0 Opened issues

Description

🌿 exoteric - JavaScript tool to make front end UI simple. Tools should be simple, because you're not smart enough to debug it. Better and simpler than React.js and Vue.js, et al. Make UI, not opinion. Like demo? https://cutt.ly/full-dumbass

Services available

!
?

Need anything else?

Contributors list

# 43,481
Shell
Chrome
embedda...
archive...
440 commits
# 52,698
Ember
Babel
webasse...
google-...
3 commits
# 75,972
sage
Bootstr...
PHP
Webpack
3 commits
# 310,707
Node.js
dialogf...
CSS
Shell
1 commit

🌿 exoteric npm npm downloads total

The tool of choice for the madding crowd

Tooling shouldn't be hard to understand.

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

exoteric is a library to help.

Why?

exoteric

/ˌɛksə(ʊ)ˈtɛrɪk/

adjective

FORMAL

intended for or likely to be understood by the general public.

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—exoteric 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.

be exoteric

function Spin(n) {
  return e`  
    


`; }

Still not bored?

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

See even more boring code in a 250 line TodoMVC test

Holy secular install mantras

Install exoteric with npm:

npm i --save exoteric

Parcel or Webpack exoteric and import:

import { e } from 'exoteric'

See a CodeSandbox how-to of above

Or import in a module:


See a CodePen how-to of above


Basic Examples

Components

Defining

const Title = state => e`

${state}

`

Nesting

const Parent = state => e`
${Title(state)}
`;

Inserting

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

Updating

Parent("Greetings");
let i = 1;
setTimeout(() => Parent(`${i++} 'Hi's`), 3000);

ToDo ~MVC~ Example

function App(state) {
  const {list} = state;
  return e`
    

todos

${TodoList(list)} ${Footer()}
`; }

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

Updating on events

  function newTodoIfEnter(keyEvent) {
    if ( keyEvent.key !== 'Enter' ) return;

State.todos.push(makeTodo(keyEvent.target.value));
TodoList(State.todos);
keyEvent.target.value = '';

}

Properties

Do not exist.

Global State

is nothing special.

Routing

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; } }

function Routes() { return e </pre><ul class="filters"> <li> <a href="https://github.com/c9fe/exoteric/blob/master/#/" click="${changeHash}" class="${location.hash" :>All</a> </li> <li> <a href="https://github.com/c9fe/exoteric/blob/master/#/active" click="${changeHash}" class="${location.hash" :>Active</a> </li> <li> <a href="https://github.com/c9fe/exoteric/blob/master/#/completed" click="${changeHash}" class="${location.hash" :>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..

Can you hear the people sing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.