mrichard / generator-marionette Goto Github PK
View Code? Open in Web Editor NEWYeoman marionette generator a la AMD
Yeoman marionette generator a la AMD
So I can have this app structure:
app/
account/
models/
collections/
views/
templates/
product/
models/
collections/
views/
templates/
Hello.
I have few questions:
On my last project I used this generator as a basis to parse out and follow Brian Mann's proposed Marionette app structure from his elegant-but-huge Rdio app (vid) (slides) that is now featured on Marionette's homepage. _Be prepared for the thought bomb._ Much is only covered in the audio.
The main difference from what we have here and over on this generator fork that adds modules is that his Marionette components are laid out and scoped by AppModules.
As Brian Mann says, individual AppModules and isolated (Bower or otherwise) Components are the gateways to essentially all internal app interaction.
Here was my fairly successful folder structure:
app/
scripts/
apps/ - app modules container folder
first-app-module/
app-first-app-module.js - the AppModule definition and an initializer for the router, controllers, and a primary layout.
=> see fork elycruz/generator-marionette for this generated file. Name can begin with "app-"
first-app-module-new.js - the first verb-oriented controller
first-app-module-list.js - the second verb-oriented controller
first-app-module.js - the single marionette router for this app module
composite/ - Marionette CompositeViews for this AppModule
collection/ - Marionette CollectionViews
item/ - Marionette ItemViews
layout/ - Marionette LayoutView including the default one
first-app-module-layout.js - default subregions for the AppModule
another-controllers-layout.js
second-app-module/
app-second-app-module.js - the AppModule definition with an initializer for the router, controllers, and layout. Name begins with "app-"
=> see fork elycruz/generator-marionette. Name can begin with "app-"
second-app-module-new.js - the first verb-oriented controller
second-app-module.js - the single Marionette router for this app module
composite/ - Marionette CompositeViews for this AppModule
collection/ - Marionette CollectionViews
item/ - Marionette ItemViews
layout/ - Marionette LayoutView including the default one
second-app-module-layout.js - default subregions for the AppModule
another-controllers-layout.js
entities/ - model and collection definitions
application.js - primary app with highest level region creation and an initializer for
communicator.js - boilerplate messaging bus definition for requiring as needed.
init.js - grunt generated bower_component includes and other custom theme_component requirejs definitions
regionManager.js
main.js - App.start()
styles/ - SASS or LESS stylesheets
templates/ -- hbs or jade templates
theme_components/ - manually managed components
bower_components/ - automatic components
server/
app.js -
test/
SpecRunner.js - the test framework's own init.js
spec/
apps/
first-app-module/ - AppModule structure is more explicitly separated in generated test folder
controllers/
routers/
views/
layout/
item/
second-app-module/
controllers/
routers/
views/
entities/
_Any comments? Is this a decent way to implement scoped AppModules productively that we could consider implementing in the mainline generator?_
I feel like Brian Mann's pattern reflects the best thinking from Ember.js and other parts of the javascript/rails ecosystem and it is nice to work with that within Marionette.
(We used this structure with a standard backbone backend PaaS API implemented with Kinvey rather than Rails as BM advocates.)
The grunt task does not appear to transfer over the handlebars plugin correctly to the dist directory, but I am having quite a time figuring out what exactly is going wrong. This is a build sans express, which it looks like others have had quite a time when selecting this option...
The documented
$ yo marionette:model model-name --inherit model-name
does not seem to work. It always extends from Backbone.Model.
Looking at the code (model/index.js), 'inherit' is a positional argument, not an option?
If I grok the code with the NamedBase correctly, it means that the generator takes three positional arguments: name, model and inherit.
Testing this with the command
$ yo marionette:model bar dummy foo
I finally get an app/scripts/models/bar.js that extends from models/foo as Foo.
Would you like to install the full express app or simply the marionette generators? (Y/n)
Hi,
First of all, thank you all for provinding and helping building such nice project. It's community power!
I'm new kid on the block for SPA development and I'm looking for good references to getting started with backbone + marionette for doing line of business apps.
I thought that maybe you could have some references of OS projects, examples end-to-end, tutorials, videos and so on that could be shared with me to get started.
Any OS sample projects using generator-marionette???
Thanks in advance!
Best regards,
Gabriel Marquez
We use Jasmine for testing, rather than Mocha. Any chance of supporting both options?
When using the generator I often get a mix of spaces and tabs in generated files. Is there anyway to only get spaces or only tabs? I prefer spaces. Let me know if I can help in anyway.
Hi,
I have a few questions on the app architecture:
Why exactly do you do the root.define
stuff and not a straight define
call?
E.g.
(function() {
'use strict';
var root = this;
root.define([], function(){});
}).call( this );
In other words, why do you deem it necessary to wrap them in a module pattern?
How is the Communicator->RegionManager to be used? Like this?
//create region
function(communicator){
communicator.reqres.request("RM:addRegion", 'foo', '#bar');
}
//use region
function(communicator, SomeFantasticView){
var region = communicator.reqres.request("RM:getRegion", 'foo');
region.show(new SomeFantasticView());
}
Is this to allow a complete decouplement of views and regions?
I guess I'm mainly wondering when to use what part of the communicator, which is probably something I should ask at the Marionette repo...
Hi,
New version of SASS Bootstrap was released recently.
http://alademann.github.io/sass-bootstrap/
Will it be supported soon by generator-marionette?
Thanks.
Hello all, just wanted to ask if this project is being maintained at all. If now, we might move it to some other repo. Original author ? Please comment( you did a great job btw )
I have an issue:
On grunt build this happens:
Running "handlebars:compile" (handlebars) task
Destination not written because compiled files were empty.
I plan to add coffeescript support for the generator, at least for the webapp part? Anybody is working on this?
For the express part I can do it but it is not on my top priority list.
++
Looks like there is a build problem related to mismatched anonymous defines. Hopefully I'm not missing something obvious this time... Ran this right after yo marionette
and getting a successful "congrats" page.
$ grunt build
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> Destination not written because compiled files were empty.
Running "compass:dist" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css
Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Found a block:
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- app/bower_components/modernizr/modernizr.js
Found a block:
<!-- build:js scripts/main.js -->
<script data-main="scripts/init" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- dist/scripts/main.js
Configuration is now:
cssmin:
{ dist:
{ files:
{ '<%= yeoman.dist %>/styles/main.css':
[ '.tmp/styles/{,*/}*.css',
'app/styles/{,*/}*.css' ] } } }
concat:
{ 'dist/scripts/vendor/modernizr.js': [ 'app/bower_components/modernizr/modernizr.js' ],
'dist/scripts/main.js': [ 'dist/scripts/main.js' ] }
uglify:
{ 'dist/scripts/vendor/modernizr.js': 'dist/scripts/vendor/modernizr.js',
'dist/scripts/main.js': 'dist/scripts/main.js',
'dist/bower_components/requirejs/require.js': 'app/bower_components/requirejs/require.js' }
requirejs:
{ dist:
{ options:
{ baseUrl: 'app/scripts',
optimize: 'none',
paths: { templates: '../../.tmp/scripts/templates' },
preserveLicenseComments: false,
useStrict: true,
wrap: true,
pragmasOnSave:
{ excludeHbsParser: true,
excludeHbs: true,
excludeAfterBuild: true },
name: 'init',
out: 'dist/scripts/main.js',
mainConfigFile: 'app/scripts/init.js' } } }
Running "requirejs:dist" (requirejs) task
>> Error: Mismatched anonymous define() module: function (){
>> return Handlebars;
>> }
>> http://requirejs.org/docs/errors.html#mismatch
Warning: Task "requirejs:dist" failed. Use --force to continue.
Aborted due to warnings.
Example: a collection named Test is generated by yo marionette:collection Test
which makes the path spec/collections/Test.js
appear within testSuite.js
.
Now the collection and its test file are refactored (say Test2.js
) and the path is adjusted accordingly (spec/collections/Test2.js
).
Then, if any other generation takes place and testSuite.js
is overwritten, the old path spec/collections/Test.js
will appear again.
Can you help me? Thanks in advance
Niels
I performed the following from the install instructions:
$ sudo npm install -g yo grunt-cli bower
$ sudo npm install -g mocha-phantomjs
$ npm install generator-mocha-amd
$ npm install generator-marionette
$ yo marionette
$ grunt
Y for express
N for mongo
Y for socket.io
N for baucis
$ grunt
Everything runs ok up until:
Running "exec:mocha" (exec) task
>>
>> events.js:72
>> throw er; // Unhandled 'error' event
>> ^
>> Error: spawn ENOENT
>> at errnoException (child_process.js:980:11)
>> at Process.ChildProcess._handle.onexit (child_process.js:771:34)
>> Exited with code: 8.
Warning: Task "exec:mocha" failed. Used --force, continuing.
When I navigating to http://localhost:1234/test I see the output of the test runner.
Thanks!
Dave
marionette is currently on 1.4.1 but this generator installs 1.0.2. It caused me to stumble around for a few hours โ the AppRouter constructor functionality described in the current marionette docs doesnt work in 1.0.2.
a bunch of other dependencies have also made significant version advancements over what this generator installs: underscore, backbone, require-handlebars-plugin, modernizr, and some of the testing libs.
I've since manually upgraded to more recent version of everything but this may cause confusion for others.
Thanks for the great generator, I'm really loving it.
Hi,
When i run mocha at project directory it gives the error below:
0 passing
(13ms)
1 failing
You can see available generators with npm search yeoman-generator and then install them with npm install [name]
To see the 6 registered generators run yo with the --help
option.
at Environment.create (/home/codio/workspace/node_modules/yeoman-generator/lib/env.js:341:7)
at Object.helpers.createGenerator (/home/codio/workspace/node_modules/yeoman-generator/lib/test/helpers.js:214:23)
at /home/codio/workspace/test/tests.js:27:26
at /home/codio/workspace/node_modules/yeoman-generator/lib/test/helpers.js:158:5
at CB (/home/codio/workspace/node_modules/yeoman-generator/node_modules/rimraf/rimraf.js:42:5)
at /home/codio/workspace/node_modules/yeoman-generator/node_modules/rimraf/rimraf.js:118:7
at Object.oncomplete (fs.js:107:15)
But i have backbone-amd:app generator installed. What might be the issue?
When you run
grunt build
The main.js file generated in dist/scripts/ should contain all the code of the app but it doesn't.
Whenever I run "yo marionette" I get this error:
TypeError: Cannot read property 'bold' of undefined
at Object.<anonymous> (/usr/lib/node_modules/generator-marionette/node_modules/yeoman-generator/lib/util/common.js:5:56)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/usr/lib/node_modules/generator-marionette/node_modules/yeoman-generator/lib/base.js:101:26)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
It seems like it would be more appropriate to create a Marionette router than an ordinary Backbone router. Just a suggestion since its easy enough to change the Backbone.Router class to Backbone.Marionette.AppRouter after the generator runs.
Hi Michel,
Thanks for amazing generator.
Is there any plans to update it for 2.1 support.
Generate Behaviors, Objects and so on.
One more point - i found a differences in file structure described in README and actual structure i receive on project init, especially regionManager file.
wanted to know if this would be an amicable pre-configure option. I prefer using marionette modules instead of AMD.
I have an existing PHP back-end stack I'm trying to hook my app into - can I still use this marionette generator ?
If you select "No" to the server app questions like this:
[?] Would you like to install the full express app or simply the marionette generators? No
[?] Would you like to include MongoDB for storage? No
[?] Would you like to include Socket IO for real time communication? No
[?] Would you like to include Baucis for REST? No
this is the project structure created:
total 40
-rw-r--r-- 1 julio staff 7291 Jul 31 14:52 Gruntfile.js
-rw-r--r-- 1 julio staff 563 Jul 24 08:13 bower.json
drwxr-xr-x 19 julio staff 646 Jul 31 14:52 bower_components
-rw-r--r-- 1 julio staff 1225 Jul 31 14:52 index.html
drwxr-xr-x 28 julio staff 952 Jul 31 14:52 node_modules
-rw-r--r-- 1 julio staff 959 Jul 31 14:52 package.json
drwxr-xr-x 8 julio staff 272 Jul 31 14:52 scripts
drwxr-xr-x 3 julio staff 102 Jul 31 14:52 templates
drwxr-xr-x 5 julio staff 170 Jul 31 14:52 test
As you can see there isn't a styles folder nor compass grunt task so it doesn't work:
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> Destination not written because compiled files were empty.
Running "compass:dist" (compass) task
Verifying property compass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "compass.dist" missing. Use --force to continue.
Aborted due to warnings.
[email protected] postinstall C:\Winginx\home\test\node_modules\grunt-requirejs\node_modules\grunt-lodashbuild
er
node ./bin/post-install.js
module.js:340
throw err;
^
Error: Cannot find module '../node_modules/lodash/vendor/tar/tar.js'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at C:\Winginx\home\test\node_modules\grunt-requirejs\node_modules\grunt-lodashbuilder\bin\post-install.js:14:13
at Object. (C:\Winginx\home\test\node_modules\grunt-requirejs\node_modules\grunt-lodashbuilder\bin\post-i
nstall.js:166:2)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
npm ERR! error rolling back Error: ENOTEMPTY, rmdir 'C:\Winginx\home\test\node_modules\grunt-requirejs\node_modules\grun
t-jquerybuilder\node_modules\jquery-builder\jquery\node_modules\grunt\node_modules\underscore.string'
npm ERR! error rolling back [email protected] { [Error: ENOTEMPTY, rmdir 'C:\Winginx\home\test\node_modules\grunt-r
equirejs\node_modules\grunt-jquerybuilder\node_modules\jquery-builder\jquery\node_modules\grunt\node_modules\underscore.
string']
npm ERR! error rolling back errno: 53,
npm ERR! error rolling back code: 'ENOTEMPTY',
npm ERR! error rolling back path: 'C:\Winginx\home\test\node_modules\grunt-requirejs\node_modules\grunt-jqueryb
uilder\node_modules\jquery-builder\jquery\node_modules\grunt\node_modules\underscore.string' }
npm ERR! weird error 8
npm ERR! not ok code 0
I was trying to use yo marionette while answering yes on all questions and got this error.
I am not sure what generates the package.json file but the row that causes this problem inside package.json is
"grunt-requirejs": "~0.3.5",
according to asciidisco/grunt-requirejs#74 it should be changed to version 0.4.0 to fix this problem, and so it did.
"grunt-requirejs": "~0.4.0",
If I say 'no' to baucis on the generator question, the 'grunt' command won't work due to the following error: "ReferenceError: baucis is not defined".
Also, the first question is unclear -- not a 'yes/no', but more of an 'either/or'.
Thanks!
Full app with express the default grunt task server is working fine. The no express app build does not throw error, but when opens in browser, the server is not working
Tried updating grunt-contrib-connect, porting in config from projects where connect server is working, setting up new connect task...
Hi Everyone.
I cannot seem to run any tests. I get the following output on exec:mocha
TypeError: 'undefined' is not a function (evaluating 'mocha.useColors(config.useColors)')
at phantomjs://webpage.evaluate():5
at phantomjs://webpage.evaluate():13
at phantomjs://webpage.evaluate():13
Any help will be appreciated.
I don't see a reference in the readme that explicitly describes building a production ready project. That is, concatenating and uglifying js and css files, and otherwise copying all project files such that /dist can be zipped up and deployed to a production server.
I have been able to get js copied to /dist and uglified by editing /Gruntfile.js and setting:
options: {
// `name` and `out` is set by grunt-usemin
baseUrl: 'app/scripts',
optimize: 'uglify',
dir: 'dist',
paths: {
'templates': '../../.tmp/scripts/templates'
},
Then running
grunt requirejs:dist
The result is that all js files are copied (not concatenated) to /dist and uglified, but no other application files are copied to the /dist folder.
What am I missing?
describe("ChartApp Factory Tests", function () {
var $root={};
beforeEach(module('chartApp'));
it("expects GET http calls and returns mock data", inject(function ($http, $httpBackend,$rootScope,$controller) {
var url = 'RNASequenceDataServlet?country=scatterplot',
successCallback = jasmine.createSpy();
$scope = $rootScope.$new();
$root=$rootScope;
ctrl = $controller('chartCtrl', {
$scope : $scope
});
// Create expectation
$httpBackend.expectGET(url).respond(200, 'mock data');
// Call http service
$http.get(url).success(successCallback);
// callback called only after flush
expect(successCallback).not.toHaveBeenCalled();
// flush response
$httpBackend.flush();
// Verify expectations
// Actual response is [ 'mock data', 200, Function, { method : 'GET', url : '/path/to/resource' } ]
expect(successCallback.mostRecentCall.args).toContain('mock data');
expect(successCallback.mostRecentCall.args[1]).toBe(200);
expect(url).toEqual('RNASequenceDataServlet?country=scatterplot');
$root.$apply();
console.log($scope.scatterplotdata);
}));
});
Error:-Unexpected request: GET ReadingExistingComment Expected GET RNASequenceDataServlet?country=scatterplot
It is redirecting to ReadingExistingComment servlet,though I have not given that path in url.
Got this error while following the README instructions:
$ yo marionette
TypeError: Cannot read property 'bold' of undefined
at Object.<anonymous> (/Users/eevenson/Downloads/temp2/node_modules/generator-marionette/node_modules/yeoman-generator/lib/util/common.js:5:56)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/eevenson/Downloads/temp2/node_modules/generator-marionette/node_modules/yeoman-generator/lib/base.js:101:26)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
I am sorry this is not an issue with the code but I am struggling to find out how the 'build' task managed to force the browser to reload all the JavaScript and CSS files each time you run it? It does it perfectly but I couldn't find out how (I already looked through the .htaccess file but it only says "if you are not using the build script, then consider cachebusting") .
I have used cachebusting before but this is all over my head =.=
Any help would be really appreciated!
Richard
In the grunt file there is a section named requirejs.dist.options.paths.templates this path prefixed with '../../' this make sense when accept to use express, but when you don't it points some directory which doesn't located in project's structure.
Here is the transcript:
$ grunt
Running "default" task
Running "clean:server" (clean) task
Running "compass:server" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css
Running "connect:testserver" (connect) task
Started connect web server on localhost:1234.
Running "express:dev" (express) task
Starting background Express server
connection error: [Error: failed to connect to [localhost:27017]]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.