In my Layout which extends Brisket.Layout, the variable layout.environmentConfig is not available with value undefined on client. I checked that it has the correct value on server.

As a developer,
I want to execute code randomly, but still have view reattaching working correctly,
So that I can satisfy use cases that require random execution

Acceptance

• Bison makes a method available that returns a random value
• The random value is memoized so that, for the current server/client request, when code runs on the client, it executers exactly the same as it did on the server

As a developer,
I would like to be able to get a value for a cookie on the server,
I would like to be able to get a value for a cookie on the browser,
So that I can provide functionality based on the value of a cookie

Acceptance Criteria:

• identical interface for both server and client

@sylnp0201 we need to make the preinstall script a little smarter so that it doesn't change the jsdom dependency during brisket development. if it changes the dependency and we don't notice, it breaks brisket's support for newer node versions

As a Brisket user, I would like Brisket to tell me nicely not to abuse routers, rather than crashing randomly.

>> [2015-10-19T15:41:20.694Z|39734] TypeError: Cannot read property 'host' of undefined
>>     at Object.ServerRequest.from (/Users/dlucia/Development/business/node_modules/brisket/lib/server/ServerRequest.js:14:41)
(/Users/dlucia/Development/business/node_modules/brisket/lib/server/ServerRenderingWorkflow.js:17:47)

My use case was experimenting with default values in a route. I set up two routes in my router.

routes: {
   routeOne: "routeWithDefault",
   routeTwo: "routeWithoutDefault"
},

routeWithDefault: function() {
   this.routeWithoutDefault("defaultValue");
},

routeWithoutDefault function(value) {
   MyController.doSomething(value);
}

While one could argue that the Controller is the correct place for the defaulting logic, I still think Brisket should provide a more meaningful error message in this case.

As a user, it is inconvenient for me to have to shim jquery-mockjax in my Brisket application for bootstrapped data to work.

Acceptance Criteria Bootstrapped data functions correctly without the consumer having the shim any libraries.

As a developer,
I would like a way to manage the response for a request from a route handler,
So that the user's response correctly reflects the user's request and application state

Acceptance criteria

• Expose a response object to route handlers
• response object api should be normalized across client/server
• behavior of functionality provided by response object should work "as expected" in the environment it is used (i.e. a redirect on the server should respond with 302 and show another route's content, while on the client, the redirect should just show another route's content)
• eventual desired functionality includes redirecting, setting cookies, setting status code
• ideally developer does NOT have direct access to express response object (don't want them to destroy their own response by setting response to another object)

I was wondering if using the approach that Ampersand uses would be wise. Ampersand separates each of their components into separate packages so each component can be loaded individually and be updated independently.

As a developer,
I would like to specify how to transition from one route to another,
So that I can delight my users

Background
Currently, you can use onRouteStart and onRouteComplete in your Routers to make some transitions. Assume the main View for first route is A and main View for second route is B.

What you can do now - using onRouteStart and onRouteComplete, you can make any transition where only A is visible and then only B is visible e.g. "fade out the entire content well, then fade it back in when B is ready"

What you cannot do now - any transition where A and B are visible at the same time. The Renderers replace views by closing one, then rendering the other i.e. close A, then render B in it's place. There are currently no hooks to manage how replacement happens.

As a developer,
I would like to be able to use a framework on top of Brisket's base libraries,
So that I can use a framework that I'm familiar with,
So that I can still get the Brisket goodness

Acceptance
I can use frameworks like Marionette on top of Brisket

Note
The goal of this issue is to make libraries "Brisketable". For example if I have a framework that includes a View called ExampleView, which inherits from Backbone.View, there should be a way to set it up to inherit from and operate as a Brisket.View without clobbering any of its functionality

the work in these 2 branches (https://github.com/bloomberg/brisket/tree/brisket_iojs and https://github.com/bloomberg/brisket/tree/brisket_node4) should be merged into master:

var jsdomObj = jsdom.jsdom();
var serverWindow = jsdomObj.defaultView || jsdomObj.parentWindow;

We also need to add documentation to help guide users to choose the version of jsdom that works with their version of node

Per route, I want to be able to specify HTTP caching headers.

For example:

{maxAge: 3600, public:false}

Currently, only the Layout has access to the environment config. It is definitely possible that a user could want access to the environment config at any point during the handling of a route, so we should make it available there.

When there are two (or more) requests on the page to the same data url, the later request overwrites the bootstrap data of the first one. Then the front end application tries to re-fetch the data with an unnecessary ajax call.

i would like to be able to access the bootstrapped data for the first request in the console

If you need to initialize something only in the browser, that can go in the ClientApp. If you need to initialize something only in the browser, that can go in the ServerApp. If something needs to be initialized in both places, right now, the code needs to go in ClientApp AND ServerApp. There should be another way to initialize code for client and server without having to write it twice

As a developer,
I would like to choose the data for the layout from my routers,
So that different routes can provide the layout with different data

Acceptance

• At the Router level, there should be a way to specify how to fetch data for the layout (e.g. if you have a preview router, there should be a way to provide preview data to the layout)
• At the RouterBrewery level, there should be a way to specify how to fetch data for the layout so you can set defaults

Make the necessary changes in Brisket to upgrade to backbone >= 1.2 (http://backbonejs.org/#changelog). The biggest changes will be to decouple from jQuery by default, provide hooks to continue to use jQuery if user wants to, have a new solution for server side rendering.

Motivation: http://blog.codeclimate.com/blog/2013/09/11/test-coverage-and-code-quality-better-together/

There are a couple other options out there, such as https://scrutinizer-ci.com/tour/measure-and-improve-code-quality

Acceptance Criteria: Passing code quality badge at https://github.com/bloomberg/brisket

Currently, HTML elements from the 1st page view are kept in memory because module global variable viewElements in the following file has reference to them. We should remove the reference if we don't need them.
https://github.com/bloomberg/brisket/blob/master/lib/viewing/ViewsFromServer.js#L7

Similar to the other metatags, Brisket should support the canonical link tag with the format of

<link rel="canonical" href="http://www.blabla.com/example-path" />

You guys really need to work simpler installation..

What if I dont want to use yeoman, grunt, bower? This project assumes
that all of these sys-admin dependancies are available. They may not be.

Kudo's on choosing BackBonejs, but cant install everything cleanly. I dont
want to corrupted the global NPM namespace with all the pre-install
dependancies.

If you go to a brisket app and click on a link fast enough (i.e. after brisket app has started but before the initial page load completes), the page breaks. In this case "breaks" means that the url updates but a new page is never rendered.

Based on my early analysis, the root cause is a flaw in the ClientRenderingWorkflow logic that causes the layout not to be initialized correctly.

As a developer, I want a quick way to check the version of the Brisket serving the application. One option is to allow the application to output the version of Brisket in the console output.

As a developer, I want all child views to be closed when their parent view is to be close. Currently, it's required to put the following code in the parent view:

onClose: function() {
    this.closeChildViews();
}

This is almost always the case whenever the view has child views. Making it happen automagically not only cut the coding burden, but also reduce the risk of memory leak when it's missed.

Since brisket is being advertised as being super fast there should be a benchmark against other popular frameworks so that as a user I can better compare if it's worth using for my next app. At the moment I have no view as to whether its more performant than say the original Backbone.js, Angular.js or React.js

Also it's stated in your readme that brisket depends on:

jQuery ~1.11.1
jsdom ~0.11.1
Underscore ~1.6.0
Backbone ~1.1.2
bluebird ~2.2.1
jquery-mockjax ~1.5.3
express ~4.0.0
qs 1.2.2

This does not sound performant to begin with - with so many key external dependencies. Instead these could be broken down to only use specific modules e.g. only jQuery ajax, and particular _ functions that are required, rather than loading the entire library.

I'm sure you'll do performance sprints in the future so this could be food for thought.

If you do an ajax call with query parameters on the server, the params are not reflected in the bootstrapped data at the bottom of the page on initial load. this could clobber two requests with different params e.g.:

/data/request?param1=value1

AND

/data/request?param2=value2

may both be in the bootstrapped data hash like this:

{
"/data/request": { some: "data" },
"/data/request": { "someOther": "data" }
}

This could lead to the initial bootstrapping working incorrectly

It would be good to update the meta content of a page on route update so that JS reading such meta content at runtime will have the meta content of the current view.

Some of the dependencies listed in the README are out of sync with package.json. These should be cleaned up so that new users have a realistic expectation of Brisket's dependencies.

Hi,

I'd like to share my findings about the problem I encountered while playing around with Brisket 0.29.0.

After setting up a simple project by following the README the Grunt task exec:nodemon refused to work:

'node_modules' is not recognized as an internal or external command,
operable program or batch file.
Exited with code: 1.
Warning: Task "exec:nodemon" failed. Use --force to continue.

Well, node_modules is never a command, if I'm not mistaken. 😸

So, I checked the Gruntfile.js and my first assumption was that the the problem was in the path of nodemon server.js (line 49).

Therefore I changed it from

cmd: 'node_modules/.bin/nodemon server.js'

to

cmd: './node_modules/.bin/nodemon server.js'

But, no luck. 😭

My "solution" was to uninstall the preinstalled nodemon package from my project's node_modules/.bin and install it again, globally.

npm i -g nodemon

Now, grunt works.

Running "concurrent:server" (concurrent) task
Running "exec:nodemon" (exec) task
Running "watch" task
Waiting...
22 Feb 01:10:18 - [nodemon] v1.3.7
22 Feb 01:10:18 - [nodemon] to restart at any time, enter rs
22 Feb 01:10:18 - [nodemon] watching: .
22 Feb 01:10:18 - [nodemon] starting node server.js
My favorite town is Brisket Town
My favorite server is a plate
ServerApp has started
Brisket app is listening on port: 8080

As a developer,
I would like to be able to trigger a route,
So that I can refresh the current route

Currently, Brisket will not execute the route for a link if the user is already on that route.

Acceptance Criteria:
I can call a function and pass a route and the route is fully executed.

Consumers of Brisket will want to use modularization tools such as Browserify to bundle their application. Brisket needs to provide metadata to these tools to make server side code a noop in the browser.

As a developer,
I want to now when my request is visible,
So that I can avoid doing work that the user will never see

Some of the use cases:

• Tracking
• Detecting user activity
• Fetching additional data for lazy loading

As a developer,
I would like to receive a clear error message when ErrorViewMapping has not been defined,
So that I know the reason for obscure errors,
So that I know how to take steps to fix the problem

Update the browserify documentation section of Brisket to reflect the changes made to the browser portion of package.json

Need the ability to add an application path to handle environmental path differences. For example, in one environment the path might be /foo/ while in another environment the path is /bar/foo/. We should be able to account for that without needing to use a regex in a router.

As a developer,
I would like to have the Express adapter available as a Brisket plugin,
So that I can easily startup an app with Express,
So that I can use another routing framework if I wanted to

A.C.

• Express not shipped with Brisket
• Express plugin as easy to integrate as Hogan adapter

I think brisket should ship with https://github.com/wawjr3d/template-string-brisket instead of the current string adapter. To stay backwards compatible, the template string adapter can also accept a string as a template

As a developer, I would like to create a Brisket View with the option of using an event bus local to it and its children
so that I can design my application knowing that if a child view triggers an event, only its siblings and parent are able to listen to that event.

Background
A lot of the applications right now, implement a global event bus to manage event handling. Developers may not fully understand the implications of using a global event bus. Consider the following use case -

I have multiple instances of a view (type X) on the page. X has a child view of type Y. Y triggers an event and X listens to that event and handles it. The event uses a class selector as part of the definition.
With a global event bus implementation, if the event is triggered by one instance of Y, the event handler of each instance of X is invoked.

A workaround to this of course, is to set an ID for the view, and pass this on to child views as well. All event names will be namespaced with the view ID dynamically. This works, but is error prone and not very DRY. Hence the idea for the option to create a view with a local event bus.

As a front end engineer,
I would like to be able to use different layouts for different routes in the browser,
So that I can separate responsibilities between layouts

As an external actor,
I would like to know when a View has entered the dom,
So that I can execute some work when a View enters the dom

When viewing the recipes readme the link to the only recipe goes to the wrong location. It's set to https://github.com/bloomberg/brisket/blob/master/docs/recipes/README.md#fetching-multiple-models.md which doesn't work.

As a developer,
I want to place my child views in my template,
So it's easier to see how all the pieces fit together

• view.closeChildViews doesn't remove html code.
• It should remove root element first and loop through its children to optimize client rendering performance. (need to make sure no memory leak)

If a View's template includes an iframe, rendering it on the server causes a memory leak. Here's an example of a View that can create a server-side memory leak:

var LeakingView = Brisket.View.extend({
  template: '<iframe src="about:blank"></iframe>'
});

To test i used a simple Brisket app with a route "/has-leaking-view", the following scripts, and my Mac's activity monitor:

hit.js

var Promise = require('bluebird');
var request = Promise.promisify(require('request'));

var count = 0;

function ping() {
  return request("http://localhost:8080/has-leaking-view")
    .then(function(response) {
        console.log("");
        console.log("");
        console.log(count++);
        return ping();
  });
}

ping();

hitters.sh

echo "Spawning 60 processes"
for i in {1..60}
do
    ( node hit.js & )
done

I put hit.js and hitters.sh in the same directory and run ./hitters.sh. If you look at the activity monitor, you can see that the memory usage increases very quickly and never goes down.

This happens when the app is mounted under a directory.

On client side: /:appRoot/:realPath

On server side: /:realPath

As a developer,
I want bootstrap data to be as small as possible,
So that my users get all the benefits while not feeling the impact of additional content sent down the wire

Acceptance

• Bootstrap data is compressed on the server, then unpacked losslessly on the client

We have recently looked to have the ability to add other page-level changes (e.g. link tags, body classes, etc) triggered by a view similar to how meta tags and page title are handled.

It would be great to be able to have something similar to renderMetaTags/renderPageTitle and how that whole workflow works, but have it for anything we want to be page-level (e.g. renderPageElement, withPageAttributes, etc).

It would also be helpful if setExtraRenderInstructions/executeRenderInstructions would be passed in the view which would allow us to achieve similar, if not same results.