Pooty.js: A VMC framework for Javascript


that won't ruin your life.





about 6.0KB minified

Clean up your view.

You can use Pooty on an existing webpage without modifying the HTML. No {{, no bind attributes, no business logic and no fuss.

For advanced capabilities, you only need to learn three new tags: <poothtml>, <bucket>, and <template>. That's it. There's nothing confusing in a Pooty view, because it's mostly vanilla HTML.
<html>
 <head>
  <script src="pooty.min.js">
 </head>
 <body>
  <span class="message">Helloooooooo Tina!</span>
 </body>
</html>
/* A Pooty-compatible page! Pooty can change the message inside the span, reactively, without any special HTML syntax. */

Take control of your model.

Pooty.model({
 'message': 'span.message'
});
Stop wondering what your model looks like, what's in it, and how to access it.

Most frameworks try to abstract the data layer away from you. Pooty literalizes it. You decide what goes in, what shape it takes, and where it should be displayed.

Plan now, relax later.

Pooty encourages a functional approach to data binding, API interaction, and user input handling. Likewise, it discourages micromanagement of events and application state.

You describe processes and callbacks, and Pooty does the rest. Most of the things you need to do are built in.
Pooty.controller(function () {

 // Let's do a GET request & display the response.
 this.url('/API').get().poot.model('message');

 // Hey...that wasn't hard at all.
});

Keep it reactive.

Pooty.model({
 'example': {
  'input': 'input.example-input',
  'response': 'poot.example-response',
  'button': 'button.example-button'
 }
});

Pooty.controller(function () {
 var control = this;

 this.input('example.input')
  .poot.model('example.response');

 this.button('example.button').click(function () {
  var answer = 'Yes!!!';
  control.model('example.response').poot(answer);
  control.input('example.input').poot(answer);
 });
});
Pooty is driven by events, not the system clock, so it stays on top of things without getting bogged down. Check it out:




poot.example-response:
 

Be a hero.

Look at you. You just spun up a reactive SPA in fifteen minutes. It wasn't even difficult.

Lol, wat?

Your HTML is clean and maintainable, your data model is clearly defined, and your controller is so readable a six-year-old could understand it. You have done something truly amazing.

Go ahead: uncap your gold-trimmed fountain pen and check another item off your bucket list.