EzDevInfo.com

aura

A scalable, event-driven JavaScript architecture for developing component-based applications. AuraJS - Aura

Abstracting jQuery

In these talks by Nicholas Zakas and Addy Osmani they discuss the idea of using the facade pattern as a sandbox when building large scale Javascript applications, in order to decouple the application from the underlying base libraries.

This decoupling would in theory allow you to switch out a base library without needing to rewrite your application modules. However in practice this seems to be more difficult to implement.

There are concrete implementations of this proposed architecture, such as AuraJS. However from looking at the source it seems that the sandbox still has leaky abstractions by returning jQuery objects from some of its methods.

I'm not concerned with AuraJS specifically, but more the general concept of trying to abstract a library like jQuery without losing so much functionality.

As an example, say my facade/sandbox has a dom method .find(selector). I can think of 3 options for what it might return:

  1. A jQuery object - This would leak jQuery out into the consuming modules.

  2. A raw dom element - Loss of functionality, nobody really wants to work with this! No chaining.

  3. A custom jQuery-like wrapper - Could be quite complex, but seems like the ideal solution.

So my question is, how would you abstract a library like jQuery without losing too much functionality, such that it could be replaced at some point in the future with minimal effort?


Source: (StackOverflow)

using backbone router with Aura

Trying to build a web client application with backbone aura. Struggling to add router to the application. did anyone try adding router to backbone aura yet?


Source: (StackOverflow)

Advertisements

backbone-aura event emmission

I have recently started learning backbone and aura and tried out a simple app using both. I have three widgets, say A, B and C. Now A and B publish events (using sandbox.emit) and C subscribes to them (using sandbox.on). 'A' publishes "A.eventA" and 'B' publishes "B.eventB" say. I tried publishing "B.eventB" from widget A and it still works. So, is there a way using which widgets cannot publish any events except there own events ? (Or is this allowed/expected behaviour ?)

Thanks.


Source: (StackOverflow)

Html Markup Abstraction and Consistency in SPAs

I'm currently evaluating the use of Backbone.js along with Aura.js for building an enterprise scale SPA.

I have a nice Javascript architecture mapped out that provides abstraction, consistency, flexibility and no dependencies on any base libraries.

As I see it, in using any MV* pattern (and in particular Backbone), markup generation could be scattered throughout views via a combination of direct dom manipulation and external html templates.

I would like to apply the same principles to the html markup in my views as I have with my Javascript architecture.

  1. Abstraction - Ideally I would like to provide developers with a simplified API for producing markup, potentially shielding them away from the css classes/markup structure being used.

  2. Consistency - I would like to promote and control consistency in the markup produced within a team of developers.

  3. Flexibility - I would like to avoid having to find and completely rewrite all instances of certain markup if there comes a need to change either the css classes/markup structure being used. Ideally I'd like any changes to be made in one place, that will propagate throughout all uses within the system.

As a practical example of how this can be achieved server-side, we currently use a suite of custom HtmlHelpers within ASP.NET MVC (similar in design to KendoUI). These helpers provide a nice fluent API for developers to use and centralise control of the markup that is generated.

However as we're moving towards client-side UI generation I'm not sure how to gain the same benefits that are available in server-side markup generation.

I appreciate templates can provide re-usable widgets throughout the UI, however that does not completely address the issues outlined above, which apply when creating those templates and the layout to contain them.

So to summarise my question...

What practices can be employed to achieve control and consistency in markup generation within a team when developing enterprise scale SPAs?


Source: (StackOverflow)

Creating Object Python 3 From File

Okay, I'm stuck. I have been trying to load a file with a serialized string from Aura's save feature and get into an object to work with it.

The file looks like this:


 PkgState {timeOf = SimpleTime {yearOf = 2013, monthOf = February, dayOf = 13, hourOf = 15, minuteOf = 38}, pkgsOf = fromList [("a52dec",[0,7,4,6]),("aalib",[1,4,5,9]),("abs",[2,4,4,1]),("acl",[2,2,51,3]),("acsccid",[1,0,4,1]),("alsa-lib",[1,0,26,1]),("alsa-oss",[1,0,25,1]),("alsa-plugins",[1,0,26,1]),("alsa-utils",[1,0,26,1]),("alsaequal",[0,6,7]),("android-sdk-platform-tools",[16,0,1,2]),("android-udev",[1,6,1]),("anki-beta",[2,0,7,1]),("apache",[2,2,23,1]),("apr",[1,4,6,1]),("apr-util",[1,5,1,1]),("archey",[20121216,1]),("archlinux-keyring",[20130127,1]),("archlinux-themes-slim",[1,2,3]),("aria2",[1,16,3,1]),("asciidoc",[8,6,8,1]),("aspell",[0,60,6,1,1]),("aspell-en",[7,1,2]),("at-spi2-atk",[2,6,2,1]),("at-spi2-core",[2,6,3,1]),("atk",[2,6,0,1]),("attr",[2,4,46,2]),("aura",[1,1,3,0,1]),("autoconf",[2,69,1]),("autofs",[5,0,7,1]),("automake",[1,13,1,1]),("avahi",[0,6,31,5]),("babl",[0,1,10,1]),("bash",[4,2,42,3]),("bc",[1,6,8]),("beecrypt",[4,2,1,5]),("binutils",[2,23,1,3]),("bison",[2,7,1]),("blueman",[1,23,5]),("bluez",[4,101,1]),("bridge-utils",[1,5,1]),("bzip2",[1,0,6,4]),("c-ares",[1,9,1,1]),("ca-certificates",[20130119,1]),("ca-certificates-java",[20120608,1]),("cackey",[0,6,8,1]),("cairo",[1,12,12,2]),("cairo-perl",[1,82,2]),("caps",[0,9,6,1]),("cdparanoia",[10,2,4]),("cdrdao",[1,2,3,6]),("cdrkit",[1,1,11,2]),("chromium",[24,0,1312,70,1]),("chromium-pepper-flash",[11,6,602,167,1]),("cifs-utils",[5,9,1]),("cloog",[0,18,0,1])}

This has been cut down. I can parse it out manually (which would more then likely a pain). Is there some directly to start with this and get an object?

Or since Aura was written in haskell should I just use haskell?


Source: (StackOverflow)

Backbone collection fetch not firing

I'm new to backbone and I'm trying to send and receive data from the server in Json format. It just won't work. Here's my code (BTW, I'm using backbone aura):

Collection

define(['sandbox', '../models/message'], function(sandbox, Message) {
'use strict';

var Messages = sandbox.mvc.Collection({
    model: Message,
    url: '/messagelist.php',
    localStorage: new sandbox.data.Store('messages-backbone-require'),
    parse: function(response){
        return response.rows;
    }
});

return Messages;

});

Model

define(['sandbox'], function(sandbox) {
'use strict';

var Message = sandbox.mvc.Model({

    defaults: {
        opened: '',
        messageid: '',
        phonenumber: '',
        numbername: '',
        text: ''
    },
    parse: function(data){
        return data;
    }

});

return Message;
});

View

define(['sandbox', '../models/message', 'text!../templates/incoming_messages.html'], function(sandbox, Message, incomingMessagesTemplate) {
'use strict';

var AppView = sandbox.mvc.View({
    widgetTemplate: sandbox.template.parse(incomingMessagesTemplate),

    events: {
        'click .refresh': 'refresh'
    },

    initialize: function() {
        this.$el.html(this.widgetTemplate);
        sandbox.events.bindAll(this);
        this.collection.bind('createMessageList', this.createMessageList);
    },

    createMessageList: function() {
        // Will work with the received data here
    },

    render: function() {
        var handle = 'h4';
        this.$el.draggable({handle: handle});
        this.createMessageList();
    },

    refresh: function() {
        this.createMessageList();
    }


});

return AppView;

});

Main

define(['sandbox', './views/app', './collections/messages'], function(sandbox, AppView, Messages) {
'use strict';

return function(options) {
    var messages = new Messages();

    new AppView({
        el: sandbox.dom.find(options.element),
        collection: messages
    }).render();

    messages.fetch({
        data: {
            type: 'incoming',
            offset: 0,
            offsetcount: 25
        },
        type: 'GET',
        success: function() {
            console.log(messages.models); // Shows an empty array.
        }
    });
};
});

I've check logs and it seems that the ajax request (collection.fetch()) is not firing or is not able to communicate with the server. How can I fix this?


Source: (StackOverflow)

how does aurajs sandbox.on() and sandbox.emit() works?

I am new to auraJS and have gone through documentation but did not understand what is the role of sandbox in application. According to docs sandbox.on() is subscriber(listener) and sandbox.emit is publisher. but what are the argument passed in these functions and how i can call a function of other component with sendbox.emit(). i have code in the application like

sandbox.emit('layout:add-requested', this.collection, layoutModel);

and through debugging i come to know above line of code calls renderAddLayout() of other component's view. but i could not find any relationship or asynchronous call which can trigger the renderAddLayout() function();


Source: (StackOverflow)

Aura component without any DOM element?

On the Aura.js 'Getting Started' page (which is down at the moment, so that's a Google cache link) it says the following:

The other way to start components on application start is to explicitly pass a list to the app.start method. Example:

`app.start([{ name: 'hello', options: { el: '#hello' } }]);`

All listed components MUST have at least the name and options.el defined, where name is the name of the component to start and options.el is a DOM selector to target the DOM Element that will be the root of your component.

So from that it seems like Aura requires that every module/component MUST have an associated DOM element. Is that correct?

In my app I'd like to have some modules which are purely for running long background calculations which shouldn't be associated with any DOM element. They emit their computed results to other modules which deal with displaying.

I love the philosophy behind Aura.js (mediator/modules + MVC) but I don't really want to hack around it too much. Any insights would really be appreciated. Maybe I've misinterpreted something? Maybe there's a better framework for me?

Thanks!


Source: (StackOverflow)

calling addEventListener without a DOM element

I see some salesforce lightning code that is calling addEventListener without DOM element and couldn't figure out what it is doing.

1) why there is not DOM element before this addEventListener ? 2) what the purpose of '({' and '})' here ?

({
    doInit: function(component, event, helper) {
        //listen to iframe's message
        addEventListener("message", 
          function(event) {
            if(event.data.type === 'ready' && component.find("vfIframe")) {//iframe loaded
                component.iframeReady = true;      
            } else if(event.data.type === 'response') {//send response
                var cmpEvt = component.getEvent("response");
                cmpEvt.setParams({ "data" : event.data.response});
                cmpEvt.fire();
            }
          }, 
        false);
    },
    makeRequest : function(component, event, helper) {
       helper.makeRequest(component, event); 
    }
})

Source: (StackOverflow)

Get Component Reference in AuraJS

I'm using jQuery dataTables to display a table. I need to be able to pass a row selection event on to my Aura component that handles the selection and performs some operations on the data from that row.

In the initialize() function:

initialize: function()
{
    $("#mytable tbody").click(function(event)
    {
      $(mytable.fnSettings().aoData).each(function ()
      {
        $(this.nTr).removeClass('row_selected');
      });

      $(event.target.parentNode).addClass('row_selected');
    });

    mytable = $('#mytable').dataTable();
},

I set up the click handler for the row selection, but how do I get a reference to the enclosing component so I can sandbox.emit() function to issue messages? I can put a reference to the component into the Closure, but that essentially makes this component a singleton and I could never have two instances of the component on the page at the same time.

Is there a standard way, using jQuery selectors or some other method, that I can retrieve a reference to the enclosing component from inside the click() handler?

Edit: I should never try to write code until I have had 32oz of caffine. You can pass a reference to the current component via the click() method itself. Like so:

$("#mytable tbody").click(this, function(event)
{
  $(mytable.fnSettings().aoData).each(function ()
  {
    $(this.nTr).removeClass('row_selected');
  });

  $(event.target.parentNode).addClass('row_selected');

  event.data.sandbox.emit('mychannel', {data: 'stuff'});
});

Source: (StackOverflow)

AuraJS: Specifying dependencies between extensions

I know it's possible to require other modules, but how can you tell aura to process a module as an extension?

Background:

For a large project I'm working on, I'm using aura extensions to modify a jQuery instance I'm keeping in the app's sandbox. A typical extension would look something like this, where plug1 and plug2 are jQuery plugins.

define({
    require : {
        paths : {
            'jquery.plug1' : 'lib/plug1',
            'jquery.plug2' : 'lib/plug2'
        },
        shim : {
            'jquery.plug1' : {
                exports : 'jQuery'
            },
            'jquery.plug2' : {
                deps : ['jquery.plug1'],
                exports : 'jQuery'
            }
        }
    },
    initialize : function(app) {
        var $ = app.sandbox.$;
        $ = require('jquery.plug1');
        app.sandbox.$ = require('jquery.plug2');
    }
});

For tightly coupled plugins I can specify dependencies as shown here, but I'd rather avoid this for more loosely coupled components.


Source: (StackOverflow)

Built aura project reloading modules twice with requirejs

I have an aura.js project which as part of the documentation, to load extensions you specify the path with require js. Here is an example of an extension:

define ["pace"], ($) ->
  (app) ->
    require:
      paths:
        morris: 'bower_components/morris.js/morris'
        raphael: 'bower_components/raphael/raphael'
      shim:
        morris:
          deps: ['jquery','raphael']
    initialize: (app) ->
      Morris = require "morris"
      Pace = require "pace"
      Pace.start()

My issue is that after I build the project and include all the dependencies into app.js which is the entry point for require, I can see the network requests and the app.js file is loaded but then require continues to pull down all the unoptimized modules (i.e. bower_components/morris.js/morris).

This results in a double request for each module which of course is unnecessary. Ideas?


Source: (StackOverflow)