I have the following Javascript folder structure:
- js
- libs
- Backbone
- Underscore
- Require
- Etc
- models
- templates
- views
- app.js
- main.js
- router.js
In order to avoid cluttering the front end router with callback functions, ideally I want to delegate the functionality to external modules and have at maximum 1 line of code per route. This way I keep a very clean overview and I should never actually touch the router again when delegate functionality changes.
For example:
var Router = Backbone.Router.extend({
/* --- 1. Route management --- */
routes: {
'': 'landing_page',
'(/)login': 'auth_redirect',
'(/)home': 'auth_redirect'
},
landing_page: function(){
this.navigate("/login", {trigger:true});
},
auth_redirect: function(){
//Checks if the user is authenticated;
//Returns either "true" or "false"
$.get('/ingeb/api_v1/auth', _.bind(function(response){
var success = $.parseJSON(response)['success'];
if (success === false){
this.renderView(Login_view);
}else if(success === true){
this.renderView(Home_view);
};
}, this));
}, ...
I would like to delegate the code that handles the authentication check and redirection to an external module. I want to do the same for helper functions that I can call as static methods (no need to instantiate) throughout the entire application.
Since my folder structure is very clean now, I would like to keep it this way.
Is there any best practice to order these:
Delegate objects;
Helper function;
in a clean folder structure ?
Here's what yeoman generated app folder hierarchy looks like
.
├── bower_components
├── images
├── scripts
│ ├── collections
│ ├── helpers
│ ├── lib
│ ├── models
│ ├── routes
│ ├── templates
│ ├── vendor
│ ├── views
│ └── main.js
└── styles
└── fonts
Related
I recently started my first project with Next.js and since then my pages directory has grown a lot. Now I want to separate my pages and group them into modules, ending up with something like 'src/modules/*/pages/*'.
Researching the topic I came accross exportPathMap, a function that I can include in my next.config.js file and then map custom paths to my pages, but it seems like I'd need to add a new path for every page I create, which is not ideal. I want to give to Next a single expression, something like 'src/modules/*/pages/*', and let it resolve the pages and routes for me (like you would do in a ormconfig.json file to map entities when using TypeORM).
I suppose I could group my page components directly inside pages, like pages/a-module/*, but I also have components, hooks and other logic that I'd like to segregate into modules. I could also try using Node's fs to iterate through my project file structure and map the the page folders, but I'd like to avoid that if possible.
You could use symlinks. You would need one for each module, but not one for each nested path within the module. Your directory structure would look like:
├── modules
│ ├── bar
│ │ └── pages
│ │ ├── first.js
│ │ └── second.js
│ └── foo
│ └── pages
│ ├── first.js
│ └── second.js
├── pages
│ ├── _app.js
│ ├── bar -> ../modules/bar/pages
│ ├── foo -> ../modules/foo/pages
│ ├── index.js
Which would end up with routes:
/bar/first
/bar/second
/foo/first
/foo/second
I'm not sure what that buys you, though, really. Now your modules folder will have the same clutter that pages used to. You don't have to have all of the component content in the files in pages. It could be as simple as:
// pages/foo/first.js
import FirstContent from '../../modules/FirstContent'
export default function First() {
return <FirstContent />
}
As #Roman Mkrtchian mentioned, you're not supposed to do so. My suggestion is that, if you want to organize your files into modules like me, creating a file structure similar to this one:
src
├── modules
│ ├── foo
│ | └── pages
| | ├── one
| | | ├── index.jsx
| | | └── styles.js <- For `styled-components`; could be a css file
| | └── two
| | ├── index.jsx
| | └── styles.js
| └── bar
| └── pages
| └── three
| ├── index.jsx
| └── styles.js
├── shared
└── ...
You should take another approach. As #erich2k8 said, you don't need all of the component content to be in the files inside /pages, you could create the same structure above, but add /pages directly to src:
src
├── modules
├── shared
└── pages
├── foo
| ├── one.jsx
| └── two.jsx
└── bar
└── three.jsx
And inside src/pages/foo/one.jsx, for instance, you'd import src/modules/foo/pages/one, like so:
import OneContent from '../../modules/foo/pages/one';
const One = () => <OneContent />;
export default One;
Yes, you'd still need to create a new file for each page you create inside /modules, but it spares you from a really bad time messing with Next behavior.
This is not permitted by the Next.js team on purpose for reasons explained in this post and in the posts referenced there.
You may read some of the discussions before deciding if you really want to hack the files structure to do it anyway.
Using Ember 2.17.0, I can't seem to get routes nested under other dynamic routes to load properly.
With the following file structure I'd like the stacks route to load a new page.
features/instances/
├── edit
│ ├── route.js
│ └── template.hbs
├── index
│ ├── route.js
│ └── template.hbs
├── new
│ ├── route.js
│ └── template.hbs
└── view
├── route.js
├── stacks
│ ├── route.js
│ └── template.hbs
└── template.hbs
The URL for the stacks endpoint looks like /instances/view/91467053-ba03-33b9-8950-83f0e64b4688/stacks/123456
Where 123456 is the ID of the stack model. However at the moment when I trigger the link above the page doesn't reload and I'm still on the view route. If I put a {{outlet}} tag into the view template, the content of the stacks is rendered there. But I want it on it's own page...
My router.js
Router.map(function () {
this.route('instances', function () {
this.route('view', {path: '/view/:instance_id'}, function () {
this.route('stacks', {path: '/stacks/:stack_id'});
});
this.route('edit');
this.route('new');
this.route('all');
});
this.route('error');
});
What have I done wrong here? I can't find much about nested dynamic routes for ember 2.0+
I hope I'm understanding your problem correctly. There are two ways to do this:
1) instead of view/template.hbs put that HTML in view/index/template.hbs, that way view/stacks/template.hbs will share none of the view template code.
2) instead of nesting the stacks route in the view route you pull up to the instances route with path: '/view/:instance_id/stacks/:stack_id', and then move the route/template files accordingly
Nested routes in Ember don't work as you're used to.
Where in most other view frameworks, a nested route implies a relation between objects, in Ember nested routes imply a nested view.
So for example you could have a messages.index route which nests a messages.show route if you would like to have a list of messages rendered and the ability to open them in a detail pane next to it.
If you want to render something independent (so not nested in another view) simply give it its own route.
I am currently trying to build my first webapp using vue.js
Now 2 days of tutorials deep I am still not 100% sure how to structure a basic application.
Using the vue-cli and webpack already makes a nice structure, including a /src Folder with components and a /router Folder for routing.
Now my plan is to create a ToDo App. I want to dynamically switch between [show todos] and [add todo], which is just a form with a submit button.
I have already achieved it by using it without components and the cli.
My structure would be:
App.vue -> buttons with the two router-link to components/ShowTodos.vue & components/AddTodos.vue
components/ShowTodos.vue -> Table including the todo list
components/AddTodos.vue -> Form with submit button
Now the routing part works, I am able to switch between those two components.
Now 2 Questions:
How can I push the information from the form in the AddTodos component into an Array in the ShowTodos component in order to loop through there ?
Is this a proper way to structure an vue app, and if not how can I improve it ?
Thank you very much.
This is the first time for me using a component based JS Framework, so its pretty hard to follow along.
On structuring your vuejs application , this can be helpful
app/
moduleA/
components/
index.js
routes.js
moduleB/
components/
index.js
routes.js
index.js
routers.js
main.vue
router/
components/ -> shared
main.js
// app/routes.js
import { routes as moduleA } from './moduleA'
import { routes as moduleB } from './moduleB'
export default [ ...moduleA, ...moduleB ]
// app/moduleA/index.js
export { default as routes } from './routes'
// app/moduleB/index.js
export { default as routes } from './routes'
// app/index.js
export { default as routes } from './routes
'
About the second question, I did some researches, and that's what I recommend:
.
├── app.css
├── App.vue
├── assets
│ └── ...
├── components
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── index.js
├── store
│ ├── index.js
│ ├── modules
│ │ └── ...
│ └── mutation-types.js
├── translations
│ └── index.js
├── utils
│ └── ...
└── views
└── ...
Read more here: https://medium.com/#sandoche/how-to-structure-a-vue-js-project-eabe75161882
I can recommend this boilerplate. It has a very good structure and I am now using it in every project.
/components
/layouts
/mixins
/pages
/routes
/services
/store
/transformers
He also explains the structure very well. https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure
I have a very strange behaviour of Spring Boot application (1.4.0.RELEASE)
My static content lies under /src/main/resources/static/* and one of the pages needs css and js files, but despite the fact that css files are served without problems I am getting 404 for js files:
For CSS file I see in the logs
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/custom_admin.css]
RequestMappingHandlerMapping : Looking up handler method for path /admin_files/custom_admin.css
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/custom_admin.css]
SimpleUrlHandlerMapping: Matching patterns for request [/admin_files/custom_admin.css] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/custom_admin.css] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/], (...)
so it looks completely fine. However for JS file it looks different:
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/vendor/jquery/dist/jquery.min.js]
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/vendor/jquery/dist/jquery.min.js]
SimpleUrlHandlerMapping : Matching patterns for request [/admin_files/vendor/jquery/dist/jquery.min.js] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/vendor/jquery/dist/jquery.min.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/] (...)
//
// and now something strange starts to happen BELOW
//
HttpEntityMethodProcessor : Written [{timestamp=Tue Sep 13 23:17:12 CEST 2016, status=404, error=Not Found, message=No message available, path=/admin_files/vendor/jquery/dist/jquery.min.js}] as "application/json" using [org.springframework.http.converter.json.MappingJackson2HttpMessageConverter#29139aae]
I am really stuck as it looks like a very small glitch or something very tiny that I am missing somewhere.
My application looks like this:
#SpringBootApplication
#EnableAsync
#EnableTransactionManagement(proxyTargetClass = true)
#EnableEncryptableProperties
public class Application extends WicketBootSecuredWebApplication { }
without any custom configuration beans, etc.
tree executed in /src/main/resources:
.
├── application-dev.yml
├── application-prod.yml
├── application-staging.yml
├── application.yml
├── banner.txt
└── static
└── admin_files
├── custom_admin.css
└── vendor
├── jquery
│ ├── jquery.js
│ └── jquery.min.js
└── metisMenu
├── metisMenu.css
├── metisMenu.js
├── metisMenu.min.css
└── metisMenu.min.js
Any help appreciated!
Notice that you're asking for /admin_files/vendor/jquery/dist/jquery.min.js but in your resource tree the dist directory does not exist.
I have a folder structure like this:
.
├── autocomplete
│ ├── core.js
│ ├── search.js
│ └── user.js
├── build.js
├── collapsible_lists.js
├── griffgrabber
│ ├── canvasobject.js
│ ├── cargame.js
│ ├── car.js
│ ├── griffDrawer.js
│ ├── keylistener.js
│ ├── run.js
│ └── victim.js
├── main.js
├── newsfeed.js
├── require.js
├── shortcut.js
└── sidebar.js
3 directories, 20 files
main.js is the startup file. That file requires a couple of the files, but not all of them. The rest of the files are included with
<script>
require(['shortcut'], function(shortcut){
// ...
})
</script>
in some html files.
This is my build.js file so far:
{
baseUrl: ".",
name: "main",
out: "main-built.js",
}
But it only includes the files that are required by main.js. Is it possible to optimize all the javascript files in one run?
(to expand #Ryan Lynch's suggestion):
Use the include option, as per the documentation:
You can always explicitly add modules that are not found via the optimizer's static analysis by using the include option.
(http://requirejs.org/docs/optimization.html)
{
baseUrl: ".", // ?
appDir: ".", // ?
dir: "output/",
modules: [
{
name: "main",
include: [ "shortcut" ]
}
]
}
More detailed example in the excellent example.build.js (I actually find it more useful than the documentation page)
(sorry, had no time to replicate and test properly to make sure the paths values are correct, I'll try that later and update my answer)
Try including a modules array in your options, so:
{
baseUrl: ".",
out: "main-built.js",
modules: [
{
name: "main"
}
]
}
As per the documentation:
In the modules array, specify the module names that you want to
optimize, in the example, "main". "main" will be mapped to
appdirectory/scripts/main.js in your project. The build system will
then trace the dependencies for main.js and inject them into the
appdirectory-build/scripts/main.js file.
Another - less orthodox - way of achieving this would be to add this "shortcut" module as a dependency to any of the "visible" modules that are discovered by r.js scanning (i.e. "main.js"). This way the entire dependency branch starting at "shortcut" would be included in the output.