Giter VIP home page Giter VIP logo

maria's Introduction

Maria

The MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC.

  • A model contains domain data. When a model changes, it informs its observers.

  • A view observes a model and represents its model's current state. A view has a controller. A view can have child views.

  • A controller decides what happens when a user interacts with the controller's view.

The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.

Downloads

See http://peter.michaux.ca/downloads/maria/

There are several different built files from which to choose:

maria.js the main release of the framework. If in doubt, use this file.

maria-min.js contains the same code as maria.js but maria-min.js has been minified to remove whitespace and code comments. This is a good file to serve in production.

maria-debug.js contains additional code that is stripped when creating maria.js. This additional code points developers to potential problems with more informative console logging. maria-debug.js is a good file to use during development.

Documentation

See http://peter.michaux.ca/maria/

Examples

The eg directory contains several example applications.

Community

You can report bugs, suggest features, or join general discussion at https://github.com/petermichaux/maria/issues

Status

Stable.

Browser Support

Tested working in IE6 and newer browsers by a variety of manufacturers.

Dependencies

None. Maria combines several independent micro libraries which are all included.

Source Code

See https://github.com/petermichaux/maria

Build

To build the production ready files, just type make at the command line and look in the build directory for the results. The first time you run make, it will download some libraries used during the build process and install them in the lib directory: Google's Closure Compiler and JSDoc3.

Tests

To run the automated tests, open tst/runner.html in a web browser.

Acknowledgements

Thanks to James Ladd for encouraging me to start this project. Check out his Redline Smalltalk if Smalltalk on the JVM seems like a good idea to you.

Thanks to the Buster.JS development team for providing a great, automated testing tool.

Thanks to the Git and GitHub teams for making it easy to collaborate with others on code projects.

Author

Peter Michaux
[email protected]
http://peter.michaux.ca/
@petermichaux

License

Simplified BSD License. See the included LICENSE file for details.

maria's People

Contributors

hieuhuynh avatar kijanawoodard avatar laantorchaweb avatar petermichaux avatar revathskumar avatar vincenttoups avatar webreflection 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

maria's Issues

update ObjectSet to more closely match the ES6 Set draft?

The ES6 Set draft is different than the ObjectSet class used in hormigas.ObjectSet. Matching the ES6 Set draft more closely would likely mean breaking changes to Maria. I've started a discussion on the es-discuss mailing list to find out more about the ES6 Set spec which seems incomplete.

do the quick start tutorial

Follow the instructions and ensure everything works. [completed]

Need more screenshots of the UI near the end of the tutorial or at least reuse the one from the start of the tutorial. [completed]

Use the resulting app as the eg/checkit app in the git repository. [completed]

I need to introduce the composite pattern at the end of the tutorial. [completed]

There is one missing version of index.html in the tutorial. The step is explained but the updated version of the file is not shown. [completed]

Can I remove the dependency on features of ObjectSet that are currently in question? See #10 [completed]

SetModel rename?

It may just be me but I think this entity could be named better. How about 'ModelList'?

For me it sounds like a setter.

don't borrow dependencies

The dependency libraries are hidden inside the IIFE that surrounds the entire build maria.js and maria-amd.js files. Since these dependency libraries are hidden, there is no need for them to be in their own namespaces. Instead of borrowing those libraries into the maria namespace object, the namespaces of those other libraries can be replaced with maria. For example just replace every occurance of hijos with maria, etc. This will make the documentation of Maria read much better and make maria.js read much better also.

This may require a build step before running Maria tests or opening the example applications.

Magic

Currently, controllers and views are bound through naming convention - is there a way to bind them explicitly if I was not to follow that convention?

Hide third-party libraries from global namespace

Hey @petermichaux!

First of all congratulations for maria. It's an amazing project. Small, clean and supper easy to learn. I simply love it.

This issue is just a simple suggestion for improvement: Shall the final build of maria.js be wrapped in a Immediately-Invoked Function Expression (IIFE), exporting only the maria namespace and hiding all the other libraries from the global namespace? That would make for a cleaner implementation (in my opinion anyways).

Cheers!

set models do not need to observe each element for delete

Events bubble. A set model can observe itself for bubbling destroy events. Then check if the original target is a member of the set (not bubbling from deeper in the tree) and remove the item. This will be much simpler than adding and removing destroy listeners on each element in the set.

Same for maria-NodModel plugin.

plugin for events with type "change:name"

Occasionally, views need more fine-grained notification than the coarse-grained change event that usually causes the view to make a complete refresh. For example, a PersonView might want to know only when the PersonModel's name changes and only update the visible name in the display.

The plugin implementation would be

(function() {
    var original = maria.Model.prototype.dispatchEvent;
    return function(evt) {
        var type = evt.type;
        while (type) {
            evt.type = type;
            original.call(this, evt);
            type = type.replace(/\:?[^\:]+$/, '');
        }
    };
}());

With this plugin, a model can have just

setName: function(name) {
    name = '' + name;
    if (this._name !== name) {
        this.name = name;
        this.dispatchEvent({type:'change:name'});
    }
}

which is equivalent to the following without the plugin

setName: function(name) {
    name = '' + name;
    if (this._name !== name) {
        this.name = name;
        this.dispatchEvent({type:'change:name'});
        this.dispatchEvent({type:'change'});
    }
}

When using the plugin, a view that needs fine-grained control will use different modelActions object, for example,

maria.ElementView.subclass(app, 'PersonView', {
    modelActions: {
        'change:name': 'updateName',
        'change:height': 'updateHeight'
    },
    properties: {
        updateName: function() {/* ... */},
        updateHeight: function() {/* ... */}
    }
});

SetView flash ... how to stop?

We have a Set and a SetView.

When we update an element in the Set it can change the order in which it should be displayed in the SetView.

The simple way we achieve this right now is to clear the Set and add the elements back in the order we require. However, this causes the SetView to 'flash' (View draws empty list, then draws list w entries).

How can we redraw / refresh the SetView without a 'flash' ?

debug build for Maria

Could more development debugging statements be inserted in the Maria code to help developers? This code would be included in a built maria-debug.js but removed from maria.js and maria-min.js.

For example

/* DEBUG BEGIN */
    console.warn('are you sure you are doing the right thing here?');
/* DEBUG END */

Or embedded in another line

x=1; /* DEBUG BEGIN */console.info('hello');/* DEBUG END */ y=2;

The build process in the Makefile will need to strip these debugging statements.

Optimize maria.SetView.prototype.handleDelete

There is plenty of looping in maria.SetView.prototype.handleDelete. The "j" loop could be removed if a tag property like "_maria_SetView_id" was added to each item model object and then a mapping from these ids to view objects was kept.

maria.SetView.prototype.handleDelete = function(evt) {
    var childModels = evt.relatedTargets;
    for (var i = 0, ilen = childModels.length; i < ilen; i++) {
        var key = childModels[i]._maria_SetListView_id;
        this.removeChild(this._mapping[key]);
        delete this._mapping[key];
    }
};

Need initialize and keep this mapping up-to-date throughout SetView's implementation and ensure it is destroyed correctly.

This is an optimization to consider when SetView proves itself as something useful that will stay around permanently.

Sure could use ES.next Map right about now.

uiActions not working in chrome mac ...

I have the following:

uiActions: {
'click .create-open' : 'onClickCreateOpen',
'click .create-close' : 'onClickCreateClose',
'click .save' : 'onSave',
'click #inputOccursAtYear' : 'onYearSelected',
'click #inputOccursAtMonth' : 'onMonthSelected',
'focus #inputName' : 'onNameInput',
'blur #inputName' : 'onNameInput',
'keyup #inputName' : 'onNameInput',
'keypress #inputName' : 'onNameInput'
},

All works fine on Chrome on Linux (Ubuntu) and Firefox (Ubuntu) and Mac Firefox.

However - the controller method is not called for click events on select lists under Chrome on the Mac (Chrome V26).

Please could this be fixed?

Offer a built solution for a quick start

Maria is great but having to download the whole repository, install dependencies and build the solution in order to get started with Maria can be a bit time consuming and discourage people to start playing around with the project.

Just a suggestion, but having a dist directory containing the built Maria both in dev version (pretty with comments) and the minified version would be great to offer the community a quick starting point. The example applications within eg could even use this minified version as a way to show off how it'd do in production...

Again, food for thought ;)

modelActions gotcha ...

When I add the below to my view:

modelActions: {
    'edit'  : 'onEdit'
},

The view stops working because I didn't include the { 'change': 'update' } entry.
The modelActions work when I change to:

modelActions: {
    'change': 'update',
    'edit'  : 'onEdit'
},

Could this GOTCHA be added to the doco (I looked but didn't see it).

release version 1.0.0

It seems like we are ready for the big release.

Update the version number in header.js, CHANGES file, and push.

Tag and push.

Release to my downloads site and update current link.

Rebuild maria-bower with only one tag for 1.0.0 (need to do this because node-semver is buggy and causing Bower to have problems.)

this.find() not matching full word ...

I have two elements in my DOM, one classed "detail" and one classed "details".
When I use this.find('.detail') it matches on '.details'.

Is it possible it also needs to use the size of the word in the match?

How to use with require.js?

I found your MVC library and thought it might be the ideal place to play about with client-side MVC models. I was trying to make the maria work with require.js and jQuery since I had a working example already with jQuery and require.js but it seems that the namespacing requirement and the way that models get created clash with the assumptions made by require.js. This is a bit new to me so I may just need to dig in for a bit. Could you give me any tips for using maria with require.js?

Getting existing element in Set ...

Marias set allows me to say set.has(element) and it returns true/false.
However, how can I get the existing element?

The situation I'm trying to deal with is a refresh of data from the server.
If the element is new I add it but if it exists then I want to update it.

maria command line tool

Developing a full-blown, single-page, web application is a primary target use case for the Maria framework.

Implementing such an application requires creating many models, views, templates, and controllers. The process of creating these files and including a few lines of boilerplate is tedious.

A production-ready, single-page, web application should be built before deploying to the web servers. This involves minifying, concatenating, and gzipping files that have time or checksum stamped file names that are used both for the files and in the references to those files. Yet in a development mode we do not want a build process to slow down our workflow or to deal with error line numbers not matching the source code.

Most of this will seem familiar to folks accustomed to the server-side Ruby on Rails framework with its rails command line tool that generates files and runs a development web server and the Rails asset pipeline. Jammit is a Rails plugin worth looking at also.

I think all of these features should be built into a maria command line tool.

~/src/ $ maria new checkit
    create
    create README
    create src
    create src/index.html
    create src/js
    create src/js/models
    create src/js/views
    create src/js/controllers
    create src/css
    create src/img
    create tst
    create lib
    create lib/maria
    create lib/maria.js
...

I'm not completely sure where templates should go. They need to be written in HTML files that end in the suffix .html and be compiled to the necessary JavaScript template objects that Maria expects (as shown in the examples.)

~/src/checkit/ $ maria generate model Todo
    create src/js/models/TodoModel.js
    create tst/models/TodoModel.js

How will these files be included in the served page? That should be done automatically. Manifest files, require comments, and require AMD are all possibilities.

~/src/checkit/ $ maria generate view Todo
    create src/js/views/TodoView.js
    create src/js/controllers/TodoController.js
    create src/path/to/TodoTemplate.html
~/src/checkit/ $ maria server
application starting in development on http://0.0.0.0:3000
~/src/checkit/ $ maria build

Bower, Yeoman, and Grunt could possibly be used behind the maria command line tool without the developer even knowing.

Examples not working

I'm trying to open the example applications, but getting an error in View.js:140.

Am I missing a step? It looks like the hijos library not being attached to the maria namespace.

2013-05-21_104021_696021390

rebuild maria-emphasize-bower

Rebuild the maria-emphasize-bower repository to depend on maria 1.0.0. Too many problems with Bower thanks to node-semver bugs.

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.