Git Product home page Git Product logo

espresso.js's Introduction

Espresso.js

Espresso.js is a tiny MVC library inspired by Backbone and React with a focus on simplicity and speed.

We've aimed to bring the ideas of unidirectional data flow of Flux to a simple, Backbone-style library.

Features

  • tiny, less than 500 lines and 3kb gzipped
  • zero dependencies
  • performance and memory focused
  • does not aim to support anything below IE10, but may work on older browsers using a shim

Documentation

Backbone-style docs can be found here

All documentation is automatically generated from docs/index.md using Bocco.

Getting Started

If you're using Browserify or Node/CommonJS, simply install the package:

$ sudo npm install --save espresso.js

Alternatively grab the standalone version that you can import with a <script> tag or checkout the GitHub Repo.

Now dive in and check out the To-Do Example app.

Testing

$ npm test

Building

If you need to use this module outside a CommonJS environment, you can build a standalone UMD module as follows:

$ npm run build

espresso.js's People

Contributors

akrymski avatar fritx avatar slashdotdash avatar timgates42 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

espresso.js's Issues

docs error? init is not actually passed options

it appears init is not passed options they are just set behind the scenes

init: function(options){ console.log(options) }

shows 'undefined'.

i think the docs are wrong, perhaps you should also mention that you should pass an object

IE9 Support

Readme.md mentions that this framework/library does not support anything under IE10. In short, what makes it difficult to support IE9?

best way to clone node & have two instances of a controller running?

I'm trying to create two instances of 1 widget Box; is this the best way?

Also bug report? Its not working.

<div id="appwrapper">
    <div id="app">
        <div data-ref="view"></div>
    </div>
</div>

var Box = Controller.extend({
    init:function(){},
    render:function(){
        return {
            view: { html: 'adsfasdfdsfadfsa' }
        }
    },
    click:function(){},
})

window.app = new Box({view: 'appwrapper' })
window.app2 = new Box({ view: 'appwrapper' })

// nothing is displayed and no errors are given

// window.app = new Box({view: document.getElementById('app') })
// works

from the docs:
If options.view is a string, then it is used to locate the DOM node by ID and clone its first child. This is much faster than doing templating and parsing templates using innerHTML.

not sure if its not working or im doing it wrong. Chrome 33 on linux.

REST requests?

How should I integrate REST API calls to a with Espresso? Are there any recommended libraries, or even examples?

Collection.Find method (probable) bug

Hi Artemi.
I was trying to find a model in a collection, passing some of its attributes, but without the id.
Contrary to my expectations, the collection's find method yielded "undefined", although I was certain that there was the model whose attributes I was looking for.
I think I may have found a possible issue.

Changing (from line 80 onwards)

isEqual: function(attr) {
    for (var key in attr) {
      if (!isEqual(attr[key], this[key])) return false;
    }
    return true;
  },

To

isEqual: function(attr) {
    for (var key in attr) {
      if (isEqual(attr[key], this[key])) return true;
    }
    return false;
  },

made it possible to find a model in a collection, by passing some of its attributes (without the id).

Using a model function (instead of an attribute)

Hi, I have a function 'status' on a model that returns the status of an object based on some other model attributes (assigned_to, start_date, complete_date).

In my render function, I'm trying to do this:
render: function() {
return {
job_status: this.model.status
}

However, in my view I just see the toString of the 'status' function (rather than the return value of the function).

In the docs, it says that Model#get accepts an attribute or function name.

What am I doing wrong?

Possible bug or I'm confused.

Edit: NVM, you can close this....

it turns out it was my fault; if you use syntax
for (i in arr){
collection.push({id: i, ...})
console.log(i, typeof i)
}
you'll see JS uses a string type for index, and that breaks the collections update/find Fn's

sorry.....

Hi I'm a little confused on Collection.set and Collection.push, can you tell me if this is a bug?

Anyway If you use collection.push({id: 9999, otherfield: 1234})
collection.set({id: anyid, ...}) no longer works... I assume this is because either you cannot set the ID from push, you cannot start above 0, or you cant use abritrary IDs from the backend ^_^.

  1. What is the correct way to add an item to collection, .push()? Is it without specifying an id?
  • I am using push({ id: 9999, otherfield: 1234, otherfield2: 1234 }), and i'm using Ids > 0 as my first item, I think this is causing the problem
  1. What is the correct way to update one field of one item to that collection?
  • If I do collection.set({ id: 1, field2: 'newdata'}), sometimes the entire object is replaced with this new smaller object (now only has these 2 fields) but usually nothing happens and .get(id) returns the old values

Maybe you can update the docs to be a little more clear? This is a great lib

Large scale app questions

I am interested in starting a similar project based on components of backbone and react but it looks like this project might be heard in a similar direction but I have a few questions.

  1. There doesn't seem to be a router, did I just miss it? If not what are the plans for one?
  2. There isn't an example of using templates, is it possible? For later applications there is no way all the HTML can be in a single file.
  3. Why not just use react as the rendering engine? they have already addressed many issues of updating the Dom efficiently.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.