I am starting a new project with the idea of moving some logic to client side.
I was looking in Backbone, and later in Marionette. Looks like it is a very good library which extends backbone to make it easier to create an application.
However, I couldn't find in any place a good document explaining the architecture and philosophy behind modules in Marionette.
My question is, although it is quite wide, how should I organize my code? What is the idea behind Module? What should it represent?
My reference is the MarionetteJS TODO example.
Thanks!
I do not want to write many texts I will just demonstrate two folders structures I like.
Group by independent modules (<3)
src
application
router.js // router here or for each module
main.js // app entry point
profile
collections
models
views
templates
profile.js // module entry point
news
collections
models
views
templates
news // module entry point
Group by Backbone types
src
collections
profile
news
models
profile
news
modules
profile.js // module entry point
news.js // module entry point
views
profile
news
templates
profile
news
router.js // router
main.js // app entry point
Related
Our company is slowly transitioning a long-standing product from Backbone to React 15. We are limited to React 15 because the product interacts with other shared products, and the life cycle and build processes we use don't support JSX (as well as other things).
So right now the core application is Backbone, routing, view, models, etc, all handled by the Backbone framework. What we have done is injected React into some of the views, so that while the basic functionality such as the header and footer bars are controlled by Backbone, the internal view, the main user interaction of that particular view is a React application embedded in the view.
All the React code is in one folder, with many, sub-folders, well organized. We want to have documentation for this code only, using something like docz or react-docgen, but those don't seem to work as the git repository and npm roots live at the root of the Backbone app and not the React code folder.
Further complicating the issue is that the React code is in a sub git-repo inside a git-repo (this product has been around a long time).
Any thoughts on how to generate a doc site given these parameters?
Thanks
I've been messing around with Angular and i wanted to split all the files up according to their role in my app.
I want a folder for each "page" like /home or /products and take care of everything within their respective folder(It sounded like a great idea).
However, now i'm not sure how to approach loading these files in or even where to do it.
This is my current file structure:
Due to certain limitations im not able to use other helpful tools, this needs to happen in the code directly.
What would be the best way to approach this?
1st part of your question:
There's no default way to organise your angular app.
However, there are some guidelines. I keep thanking myself for reading the Angular 1 app-structuring-guidelines by John Pappa which enlightened me on the same question you are asking.
At the moment, I have organised all my apps in a folder-by-functionality apprach rather than a folder-by-type one (i.e. all controllers in a controllers folder, all services in a services folder,etc).
2nd part of your question:
Just use Gulp or Grunt and then import the single file in your index
The Web is getting more and more component oriented, now all the most famous frontend frameworks adopt a reusable component policy (React and Angular 2 relies heavily on it)
If you want your angular app to be as modular as possible, you have to put everything regarding a component in a separate folder (html templates,css styles and js logic),and split the shared logic between services and assets
In Your case an example of project structure could be:
app/
assets/
//put here images,fonts and shared styles
services/
apiService.js
utilsService.js
etc etc ...
components
home/
home.js
home.css
home.html
products/
products.js
products.css
products.html
etc etc/...
index.js
index.html
we are currently working on a big project in Marionette. We've based the architecture on http://www.backbonerails.com/. The project is divided in number of modules , every with its own responsibilities. It's important for the modules to be reusable, so they can be rendered in any region on the website. Right now the modules are initiated like this:
App.execute "module:name_of_the_module:action", #model, #layout.regionName
This worked good so far, but now we added Routers to the project. Every module should have responsibility for their routing, so they are in the modules. Now when the routers get the route and start routing, they are missing the region and model to work with. So we first have to save the region and models to the module to be used in the router later.
App.commands.setHandler "module:name_of_the_module:action", (model, region) ->
MyModule.region = region
MyModule.model = model
This is not really a good way to do it, because there is usually many actions on every widget (show, edit, create, ...) and we would have to duplicate a lot.
So I am asking - how do you initialize your modules and work with the routers? Is there some best practice?
I've create a marionette.js plugin which allows you do state based routing(much like angular.js ui-router). You can completely eliminate modules in code and reuse controllers.
Link: http://ajency.github.io/marionette.state/
I'm developing an application with this structure
App
Pages
Profile
Account
etc...
Modules
nameOfModule
nameOfModule
etc
In the Pages directory I've got all the different pages in the application, switching between these pages will cause reloads.
In each of these pages directories, for example Profile, I've got 3 files(may differ)
router.js
main.js
app.js
main.js is called using requireJS and the only thing it does in set some paths for the dependencies and then it just calls the initialize() located in app.js wich in turn simply initializes the router in router.js.
My problem is, how and where do I connect the modules to the actual page?
Lets say I've got a few modules that are supposed to show up on the Profile page, lets call them Module1, Module2 and Module3, where do I organize these modules for the page?
It feels wrong to organize these kind of things in the router? Where do I decide wich modules I use and where they go?
You may consider using Marionette's Module to help you
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md#starting-and-stopping-modules
I'm in the process of structuring my first backbone.marionette app and there are some things I find confusing.
In the backbone.marionette version of TodoMVC there seem to be two different modules performing the work of the App:
First there is TodoMVC which is an instance of Backbone.Marionette.Application and then there is TodoMVC.TodoList which seems to be nothing more than a container for holding the controller and router.
Why isn't the controller object simply added to the App object?
Another thing that confuses me:
In other marionette apps I've seen discussed on stackoverflow, such as this one, addInitializer() is called on the app object but in the TodoMVC application addInitializer() is called on the todolist object.
Is this specific to apps that want to have a controller object?
I also find the naming rather confusing, since both the TodoMVC (app) and Todolist (controller container?) hold names that imply they are the base app. Could the Todolist module be more semantically called TodoController?
Why isn't the controller object simply added to the App object?
It's a modular design choice, related to the Single Responsibility Principle. TodoMVC is the top-level application and TodoList is a module (or sub-application) within our application, and they both tend to their own gardens. This allows us to make an arbitrary amount of modules without growing our top-level app code.
In other marionette apps... addInitializer() is called on the app object but in the TodoMVC application addInitializer() is called on the todolist object
I think this is just a matter of convention for Application.Modules. The TodoMVC app doesn't need any init code, so we don't add an init function.