I am coming from https://github.com/backbone-boilerplate/backbone-boilerplate backbone boilerplate.
I have tried backbone generator marionette https://github.com/mrichard/generator-marionette
but the folder structure is not convenient at all.
Is there a boilerplate for marionette with the module folder structure that bbb use ?
Check Derick's BBCloneMail. That's the classic folder structure for Marionette.
https://github.com/marionettejs/bbclonemail
I quite like this Marionette Wires starter application by thejameskyle. Seems more up to date than others (that bbclonemail now hasn't been updated for years unfortunately).
Related
I'm developing several AngularJS applications and I'm looking for best practices how I can share code, especially directives, between these projects. The biggest problem I'm facing is the following:
Most of my directives contain at least one js file and a html template. The js file often contains a reference to the template. When I include the same js file from two different projects, what's the best way to handle the different paths?
There may be better ways to handle this situation I can't even think of. So, I would like to know if someone has experiences with this situation and how this is handled. Thanks!
I find it helpful to use compiled HTML templates using a build tool like https://www.npmjs.com/package/grunt-angular-templates . There are plenty of Gulp/Grunt alternatives if that one doesn't suite your needs.
Then you will need to keep your templates in namespaced directories so that your consumer applications don't collide.
Then you when you just need to consume a single compiled JS file. The templates are compiled into it. If you need to override the templates in your applicatons, just use the template namespace convention to provide the overrides.
Maybe you can write your code in nodejs style (with CommonJS), locate your files in different folders and such, and then use browserify to combine your js code into one piece. HTML templates can be also easily transpilled into js files using angular template cache and some tool like this one for gulp or maybe some similiar for grunt.
I am building a pinterest-type clone for learning the node and I am wondering whether it is best to put my partial views (for rendering all the pins for example) in the public/partials folder, or put this into the views/
folder.
Thank you
It's up to you but i'd suggest John Papa's styleguide. The guide recommends keeping all common elements of a component in the same directory. You can organize that directory however you like but over organizing can be as bad as under organizing.
https://github.com/johnpapa/angular-styleguide#style-y140
So for example. If I am writing an app I may have a header component. My app structure would look like this-
app/
header/
header.tpl.html
header.controller.js
header.service.js
If I find my component is getting large and there are a lot of templates (or directives, or controllers, or services) I might organize that further (but not until that point)
app/
header/
partials/
header.menu.partial.html
header.search.partial.html
header.login.partial.html
header.logo.partial.html
header.tpl.html
header.controller.js
header.service.js
But generally I organize by type.
app/
header/
search/
header.search.directive.js
header.search.partial.html
header.search.controller.js
header.search.service.html
menu/
header.menu.directive.js
header.menu.partial.html
header.menu.controller.js
header.menu.service.html
header.tpl.html
header.controller.js
header.service.js
So you should decide what you think makes sense but if you're trying to find a battle tested pattern I'd recommend looking at John Papa for guidance.
While the Angular framework is un-opinionated on how you store your components, different people/teams adapt what works for them. Usually just being uniform is more than enough. However there are certain best practices put together by the community and other experienced folks.
A good place to start is: http://yeoman.io/
In a nutshell, yeoman is a generator that has many templates published by the opensource community. They usually make a great seed template.
A good place to start looking for templates is generator page. If you want a quick fix for a Angular project, Angular Template by Yeoman team is my favorite.
I am working on an angular project. I am interested in creating a generator in Yeoman that allows me to generate 'Widgets'.
Basically I would like to have a scenario where I call a command like:
yo angular:widget pieChart
and this would generate a folder in app/scripts/widgets with an js file called pieChart.js and also generate some test code in test/spec/widgets.
Would anyone have any pointers on where to start with this?
Many thanks,
kSeudo
I did something similar to want you want. I would recommend starting with angular-generator. Then you need to add a new file to the templates folder called widget that contains the widget template. Create a new folder on same level as the directive folder called widget and give it an index.js. Then you can pretty much copy the index.js from the directive folder and make necessary changes. You would also just create a widget.js template in the templates/javascript/spec folder as well
Writing your own Yeoman generators is fairly straightforward if you are already familiar with tools like Grunt and Bower.
I'd recommend starting with the official tutorial here. The Yeoman generator-generator is fairly straightforward to use and will create a simple skeleton for your generator.
EDIT: Also, if an existing generator does at least some of what you want, it might be worth using that as a starting point.
There is official generator-generator
It's quite easy to create your own generator, just follow official tutorial http://yeoman.io/authoring/
I am considering changing our current application to use Marionette. The trouble is that there is currently a whole number of different views, models, and collections that have been made by other developers that use regular Backbone.
I figure I can't really convert the whole application in one go especially considering I didn't develop a whole bunch of it. I am considering just starting with the Application object and Router.
Is this going to be possible? Can I start with that and convert the actual views later?
We recently converted our backbone application to use marionette, and we started with creating a new marionette application and router, and then created a few regions and layouts which managed our older Backbone views.
We were then able to convert the old backbone views to Marionette's ItemViews and CompositeViews, and we found we were able to delete a lot of old code.
Any custom collections and models we kept untouched. You'll probably find you won't need to change them.
My advice is to have a good read through the docs and have a look through how other people have their application structured, and how their router works. There are a few boilerplate examples and generators on github.
The simple answer is yes, you can convert the app piece by piece over time.
And your strategy of starting with the Application and Router is good. I've done a few projects where I only used the Application, Router, and maybe the Module feature of Marionette, keeping the rest plain Backbone.
From the Marionette Docs:
Like Backbone itself, you're not required to use all of Marionette
just because you want to use some of it. You can pick and choose which
features you want to use. This allows you to work with other Backbone
frameworks and plugins easily. It also means that you are not required
to engage in an all-or-nothing migration to begin using Marionette.
And even once you start converting the views, you can do it one view at a time, as needed.
Recently I'm looking for a well structured boilerplate of Backbone along with Requirejs and CoffeeScript. I've been familiar with Backbone and Requirejs already. But I prefer the CoffeeScript more than the original js. Anyone has a good idrea of it?
Here's a tiny weekend project I did recently called flickr date fixer. It's not set up to be used as boilerplate, but it's small enough to serve essentially the same purpose.