www.webdeveloper.com
Results 1 to 13 of 13

Thread: joi JavaScript Framework

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    55

    joi JavaScript Framework

    Hello, my name is Nathan Wall, and I have recently released a JavaScript library which I call joi .

    I know, anther JavaScript library, right... like the world needs one of those. But my purpose in creating it wasn't to replace jQuery or Prototype or MooTools or Dojo. In fact, when I started writing it most of those libraries either didn't exist or were just starting out themselves.

    I've been slowly working on and adding to this library for the past 5-7 years, and I've used it in a lot of my personal projects. I've always wanted to release it so that others could use it, and I think it has a lot to offer to JavaScript developers, so I finally sat down and created a site to give people a place to download it and teach them how to use it.

    It's object oriented (much more so than jQuery) and features a full DOM replacement, prototype-based inheritance (with improved syntax), and includes support for AJAX, effects, and widgets. It integrates well with existing scripts, and is nearly fully encapsulated (leaves almost no trace on native/DOM objects).

    If anyone would like to take a look at it and see if it's something you might be interested in using, that'd be great.

    There's no license. I've release it to the public domain, which means there are no copyrights on it and you're free to use it, even in commercial products, however you'd like.

    I'm looking forward to hearing what you think.

    http://joijs.com/

    Nathan

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    there were some bugs in Opera (dialogs didn't close)
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Apr 2012
    Posts
    55
    Thank you for letting me know, Padonak. I have corrected the error.

  4. #4
    Join Date
    Jan 2011
    Posts
    117
    That's not bad at all - I liked the most of it...
    A bit oriental for my taste, and quite far from conventional JavaScript purity,
    - (to much of JSON idiom ) and weights about 300KB !
    That would be one of the major objections.

  5. #5
    Join Date
    Apr 2012
    Posts
    55
    Quote Originally Posted by Troy III View Post
    That's not bad at all - I liked the most of it...
    A bit oriental for my taste, and quite far from conventional JavaScript purity,
    - (to much of JSON idiom ) and weights about 300KB !
    That would be one of the major objections.
    Thank you, Troy III. If I may interact with your critique a little bit, 300KB is unminified and uncompressed. jQuery is 247KB unminified and uncompressed (and jQuery aims at being "lightweight"). Still, it is a little larger, but it does a lot more foundational work than jQuery (provides an inheritance model, an object-oriented approach, and a DOM replacement, for starters). The Dojo base, on the other hand is 534KB uncompressed. I do think it performs well. I have worked hard (and continue to work hard) on improving its performance over the years, and I wouldn't think that in today's economy file size would be that big of a deal, what with streaming video being a part of today's web and everything.

    Your point is taken about lots of JSON idiom. Many of the methods take at least some of the arguments in another form, for the most basic things. Perhaps expanding that is something I can work on going forward.

    And again thank you very much. I appreciate the time that you took to give it your critique.
    Last edited by nathanwall; 04-09-2012 at 10:04 AM.

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I have to say, of all the "check out my library" posts that come along, this is by far one of the better ones.

    Just be prepared, though, that your library may nevertheless not gain any traction. Even established libraries such as YUI, Dojo, ExtJS, and Closure have only a fraction of the user base that jQuery has.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Apr 2012
    Posts
    55
    Quote Originally Posted by Jeff Mott View Post
    I have to say, of all the "check out my library" posts that come along, this is by far one of the better ones.

    Just be prepared, though, that your library may nevertheless not gain any traction. Even established libraries such as YUI, Dojo, ExtJS, and Closure have only a fraction of the user base that jQuery has.
    Thank you for the gracious post. I understand that, and you're absolutely right. I don't expect it to get the traction that jQuery has. But I do hope it finds a niche.

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i think you need a clearly-defined unique selling point; what does your code do that jQuery doesn't?

    also, 300kb is a lot, and you don't have plug-ins. consider moving some heavier peices to plug-ins; it would shrink the base size, and allows you to push those and other plugins. people use jQuery because of the plugins, so having a few on the project's homepage makes it seem more competitive.

  9. #9
    Join Date
    Apr 2012
    Posts
    55
    Ok, due to the comments here, I have decided to move the widgets to a separate extension library in the next version. Built-in widget capabilities will remain a part of the joi core (via joi.Ui.Widget and joi.Ui.ContainerWidget), but the widgets themselves will be moved to the extension library (Dialogs, Calendars, Panels, DataDisplays, etc.). From the work I've done so far, it looks like it will bring the joi core file size down below the jQuery core.

  10. #10
    Join Date
    Jan 2011
    Posts
    117
    @ author

    what is the (joi lib) equivalent of:

    myElement.onclick=myFunction;

  11. #11
    Join Date
    Apr 2012
    Posts
    55
    Assuming myElement is a joi Element object:

    Code:
    myElement.on('click', myFunction);
    or

    Code:
    myElement.on({
        click: myFunction
    });
    The reason for the two styles is the second allows attaching multiple event handlers with one call to on.

    If myElement is a DOM Element:

    Code:
    var joiElement = joi.Html(myElement);
    joiElement.on('click', myFunction);
    If you retrieve the element with joi.get then it will already be a joi Element:

    Code:
    var myElement = joi.get('my-element');
    myElement.on('click', myFunction);

    Some further documentation on joi events can be found here: http://joijs.com/learn/events/
    joi JavaScript Framework - the sunnier side of JavaScript.

  12. #12
    Join Date
    Jan 2011
    Posts
    117
    what is the source of event, and how does it trigger. or who/what monitors the actual event?

  13. #13
    Join Date
    Apr 2012
    Posts
    55
    Are you asking how it works internally? Because that's a little bit of a complicated question which has pieces on several different levels.

    Here's how the abstraction is set up, and the only thing you really need to know for everyday use:

    In joi, there's no distinction between events and methods. Any method can be listened to by calling on. For instance:

    PHP Code:
    var Person joi.Unit.sub(function() {

        function 
    constructor(name) {
            
    this.base();
            
    this.setName(name);
            
    this.
        }

        
    constructor.prototype = {
            
    '#name'null,
            
    setName: function(name) {
                
    this['#name'] = name;
                
    // call the nameChanged method to notify any event handlers that the name has changed.
                
    this.nameChanged();
            },
            
    getName: function() {
                return 
    this['#name'];
            },
            
    nameChanged: function() { }
        };

        return 
    constructor;

    }());

    var 
    pete = new Person('Pete');

    pete.on('nameChanged', function() {
        
    console.log('Pete\'s name changed to "' pete.getName() + '."');
    });

    pete.setName('John');
    pete.setName('Bill'); 
    This would log:

    Code:
    Pete's name changed to "John."
    Pete's name changed to "Bill."
    Every joi Element object has methods which correspond to DOM events (click, mousedown, focus, blur, etc.). Therefore, element.on('click', function () { ... }); will attach a listener to the click method, which is called any time the element is clicked.

    Behind the scenes, this works by setting the DOM element's onclick to a joi handler the first time on('click', ...) is called on the corresponding joi Element. It's only set one time (and if there's an existing onclick method, joi will store it in a variable and execute it when the element is clicked). Any subsequent on('click', ...) calls to the same element will add a listener to an array of listeners for the click method on the element. joi will execute these handlers in sequence when the element is clicked.

    Hopefully that helps and answers your question.
    Last edited by nathanwall; 08-10-2012 at 07:28 PM.
    joi JavaScript Framework - the sunnier side of JavaScript.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles