I'm building an in-browser MVC application which will eventually run on a mobile device via PhoneGap. The app will communicate with the API server but will otherwise be completely independent. When I develop standard server-side MVC applications in Rails, the models, views, and controllers are separated into distinct files and directories. What's the standard practice with in-browser MVC apps? Are the MVC components usually defined within a single JS file, or are they usually separated out?
During the development phase, yes javascript files should be separated and well documented..
You can use requirejs to load your modules/views/collections separately.
Here is a great tutorial about Asynchronous Module Definitions (AMD). It's mainly about how you would organize your application using modules. I suggest you read it.
Below is the sample project structure the tutorial's author uses:
├── js
│ ├── libs
│ │ ├── jquery
│ │ │ ├── jquery.min.js
│ │ ├── backbone
│ │ │ ├── backbone.min.js
│ │ └── underscore
│ │ │ ├── underscore.min.js
│ ├── models
│ │ ├── users.js
│ │ └── projects.js
│ ├── collections
│ │ ├── users.js
│ │ └── projects.js
│ ├── views
│ │ ├── projects
│ │ │ ├── list.js
│ │ │ └── edit.js
│ │ └── users
│ │ ├── list.js
│ │ └── edit.js
│ ├── router.js
│ ├── app.js
│ ├── main.js
│ ├── order.js
│ └── text.js
└── index.html
For the validation/deployment phase, use a grunt-like tool to launch automated tasks. Such as concatenating and minifying javascript files into a single one. (It takes around 30 seconds depending on how you've configured it)
Here is an example of a grunt file.
Related
I am working on an application using the MERN stack. The backend and frontend are in the same repository with this hierarchy:
my-project/
├── backend/
│ │
│ .
│ .
│ └── package.json
├── frontend/
│ │
│ .
│ .
│ └── package.json
├── shared/
│ ├── constants/
│ .
│ .
│ ├── index.js
│ └── package.json
├── package.json
└── README.md
I want to have my constants shared between both the backend and frontend. I have the constants in the shared folder/module.
I also want to have any change in the shared package to be reflected in the other packages without needing to reinstall.
What is the best way for both the backend and frontend to use the shared package as a dependency?
You directory structure is almost ok to work with. But there might be some flaws,
my-project/
├── backend/
│ │
│ .
│ .
│ └── package.json
├── frontend/
│ │
│ .
│ .
│ └── package.json
├── shared/
│ ├── constants/
│ .
│ .
│ ├── index.js
│ └── package.json // You might not need this
├── package.json // define shared packages here
└── README.md
For more details, how node
What would be the most optimal structure for a business project with many components, (50 approx)?
That each component has its own module?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ │ ├── comp1.module.ts
│ │ │ └── index.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ │ ├── comp2.module.ts
│ │ │ └── index.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ │ ├── comp3.module.ts
│ │ │ └── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
That a module groups all the components? in this case, every time you load the module, will it load all the components in this memory?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ ├── comps.module.ts <=== // group all components in one module
│ │ ├── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
Any suggestion?
Yes, In angular when you load a module, all of its components are loaded.
You can create feature modules for you different functionalities which you dont want to load at start up. (That is done by lazy loading.)
So the structure will be kind of like this
Core module -> All components required at start up
Featured Modules -> Will load on demand later on.
In angular9, they have provided the feature to lazy load componenets as well. Now you can lazy load components even if the module is loaded.
https://johnpapa.net/angular-9-lazy-loading-components/
There is no strict rule. It depends on the components.
Usually it is a mix. A component that represents a "page" (e.g. the top level routes like your admin area) makes a good module. For "smaller" components used only from a single page it makes sense to put them into the same module.
Other components that are used multiple times from different "page" modules should get into their own module.
The size of the components is also a consideration. The larger a module gets the more it may be good to extract smaller modules.
I'm working to cleanly structure my AngularJS app according to best practices, which includes separating the controllers and app into different script files.
Quick question: where should I put my factories and services? I am asking in the context of having factories & services that will be accessed outside of the scope of a single controller as well as having some that are within the scope of a single controller.
Update: the immediate answer below is no longer correct. Please see the latest addendum (written March 1, 2015) to this answer.
Got it! According to Brian Ford's article on Building Huuuuuuuge Angular Apps, the best practice appears to be to connect services and factories to the app in a separate file, like so:
root-app-folder
├── index.html
├── scripts
│ ├── controllers
│ │ └── main.js
│ │ └── ...
│ ├── directives
│ │ └── myDirective.js
│ │ └── ...
│ ├── filters
│ │ └── myFilter.js
│ │ └── ...
│ ├── services
│ │ └── myService.js
│ │ └── ...
│ ├── vendor
│ │ ├── angular.js
│ │ ├── angular.min.js
│ │ ├── es5-shim.min.js
│ │ └── json3.min.js
│ └── app.js
├── styles
│ └── ...
└── views
├── main.html
└── ...
(PSST! In case you're wondering, Brian Ford is part of the AngularJS team, so his answer seems pretty legit.)
Addition (April 24, 2013)
This just in: Yeoman is a fantastic tool for generating apps with the proper directory structure for big, functional Angular apps. It even has Grunt & Bower packed in!
Addendum (March 1, 2015)
According to a comment via PaoloCargnin, Google actually recommends a different structure, as detailed by this document. The structure should look like this:
sampleapp/
app.css
app.js //top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css //styles only used by this component
adminlogin.js //optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
I'm starting to develop with node.j,I meet an issue regarding the using of the module 'formidable'.
I have this error:
Error: Cannot find module 'formidable'
Here is the module list installed using 'npm ls installed' :
├─┬ express#2.5.9
│ ├── connect#1.8.7
│ ├── mime#1.2.4
│ ├── mkdirp#0.3.0
│ └── qs#0.4.2
├── formidable#1.0.9
├─┬ node-inspector#0.1.10
│ ├── paperboy#0.0.3
│ └─┬ socket.io#0.8.7
│ ├── policyfile#0.0.4
│ ├── redis#0.6.7
│ └─┬ socket.io-client#0.8.7
│ ├── uglify-js#1.0.6
│ ├── websocket-client#1.0.0
│ └── xmlhttprequest#1.2.2
├─┬ npm#1.1.21
│ ├── abbrev#1.0.3
│ ├── archy#0.0.2
│ ├── block-stream#0.0.5
│ ├── chownr#0.0.1
│ ├── fstream#0.1.18
│ ├─┬ fstream-npm#0.0.6
│ │ └── fstream-ignore#0.0.5
│ ├── graceful-fs#1.1.8
│ ├── inherits#1.0.0
│ ├── ini#1.0.2
│ ├── lru-cache#1.0.5
│ ├── minimatch#0.2.2
│ ├── mkdirp#0.3.0
│ ├─┬ node-gyp#0.4.1
│ │ ├── ansi#0.0.4
│ │ └── glob#3.1.9
│ ├── node-uuid#1.3.3
│ ├── nopt#1.0.10
│ ├── proto-list#1.0.0
│ ├── read#0.0.2
│ ├── request#2.9.153
│ ├── rimraf#2.0.1
│ ├── semver#1.0.13
│ ├── slide#1.1.3
│ ├── tar#0.1.13
│ ├── uid-number#0.0.3
│ └── which#1.0.5
└─┬ socket.io#0.9.6
├── policyfile#0.0.4
├── redis#0.6.7
└─┬ socket.io-client#0.9.6
├─┬ active-x-obfuscator#0.0.1
│ └── zeparser#0.0.5
├── uglify-js#1.2.5
├─┬ ws#0.4.14
│ ├── commander#0.5.2
│ └── options#0.0.3
└── xmlhttprequest#1.2.2
I add that it is the only module who generate this error.
Also, I don't really understand the way are encapsulated some module, it appears that npm is installing the module directly in the directory I'm using the module installation command, and I notice that formidable has been installed in the express/connect/ module on its first installation.
Can you give me more information about the module installation tree.
Thank for your replies
Cheers
The accepted answer looks very comprehensive and correct, but this worked for me:
npm install -d
d stands for dependencies (I think)
To understand module resolution, have a look at the Modules documentation, especially Loading from node_modules Folders.
For example, if the file at '/home/ry/projects/foo.js' called require('bar.js'), then node would look in the following locations, in this order:
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
NPM takes advantage of this by installing modules into:
./node_modules/{module}
So, when you use npm install formidable, it will create and install the module into:
./node_modules/formidable
But, this means that only scripts within the current directory, including sub-directories, will succeed in using require('formidable'):
./foo.js
./lib/bar.js
./src/baz.js
./src/sub/qux.js
You can however install modules as "global," but you have to explicitly ask for it with -g or --global:
npm install -g formidable
Then, any script on the system should be able to require('formidable').
As for the tree output, you current have 5 installed modules available from the current directory:
express
formidable
node-inspector
npm
socket.io
Everything else in the tree is a list of these modules' dependencies, and their dependencies, etc., but only these 5 are available for require(...) within your scripts.
I am trying to work out the best directory structure for a small Dojo application (it's a basic booking system).
I am just about finished writing login/registration.
Here is what I have now:
.
├── app
│ ├── client
│ │ ├── JsonRest.js
│ │ ├── lib
│ │ │ ├── defaultSubmit.js
│ │ │ ├── globals.js
│ │ │ ├── globalWidgets.js
│ │ │ ├── Logger.js
│ │ │ └── stores.js
│ │ ├── login.js
│ │ ├── main.css
│ │ ├── main.js
│ │ ├── register.js
│ │ ├── rrl.css
│ │ ├── TODO.txt
│ │ ├── validators.js
│ │ └── widgets
│ │ ├── _AjaxValidatorMixin.js
│ │ ├── AlertBar.js
│ │ ├── AppMainScreen.js
│ │ ├── BusyButton.js
│ │ ├── css
│ │ │ └── AlertBar.css
│ │ ├── Dashboard.js
│ │ ├── LoginForm.js
│ │ ├── RegisterForm.js
│ │ ├── SearchPage.js
│ │ ├── StackFading.js
│ │ ├── _StackFadingMixin.js
│ │ ├── TabFading.js
│ │ ├── templates
│ │ │ ├── LoginForm.html
│ │ │ ├── RetypePassword.html
│ │ │ └── SearchPage.html
│ │ ├── ValidationEmail.js
│ │ ├── ValidationPassword.js
│ │ ├── ValidationUsername.js
│ │ ├── ValidationWorkspace.js
│ └── server
│ ├── AppErrorHandler.js
│ ├── auth.js
│ ├── db.js
│ ├── globals.js
│ ├── node_modules
│ │ ├── express
│ │ ├── jade
│ │ ├── mongodb
│ │ └── mongoose
│ ├── public
│ │ ├── app -> ../../client/
│ │ └── libs -> ../../../libs
│ ├── routes
│ │ └── routes.js
│ ├── server.js
│ ├── test.js
│ └── views
│ ├── index.jade
│ ├── login.jade
│ └── register.jade
├── libs
├── build-report.txt
├── dojo -> dojo-1.7.1
├── dojo-1.7.1
│ ├── app -> ../../app/client
│ ├── dijit
│ ├── dojox
│ ├── dojo
│ └── util
└── dojo-1.8.0
├── app -> ../../app/client
├── dijit
├── dojox
├── dojo
└── util
The idea behind it is that:
the "app" directory will be in a git repository somewhere (it's about time I make one, actually). It has the directories "client" (all the client-side code) and "server" (the node code).
In "libs" I will add things like dgrid, etc. I also noticed that Dojo 1.8 can be loaded within node (!). I will play with this later -- exciting!
Now, here you can see that I basically used symbolic links to make things work.
SERVER side: Under "public", I had symlinks to "app" and "libs". That way, I can access, from HTML, things like /libs/dojo/dojox/form/resources/BusyButton.css, or (important!) /libs/dojo/dojo/dojo.js and /app/main.js (which then instances AppMainScreen with a simple require(["app/widgets/AppMainScreen" ], function( AppMainScreen){ ...
CLIENT side: I have a symlink to the latest Dojo (my boilerplate still has a problem with Dojo 1.8, so I am still using 1.7 for now). However, in order to make this work within the app:
require(["app/widgets/AppMainScreen" ], function( AppMainScreen){
I have a symlink to "app" within Dojo.
Now: I realise the basics (I think the symlink to "app" within Dojo is solved by simply using DojoConfig, for example). But... well, this is my current 100% unoptimised, never built tree.
I can ask you guys give me the tick of approval for this tree? Will it work once I start "building" things? (I am still miles away from doing it, but I will eventually otherwise my [pregnant] wife will go crazy!). Avoiding that symlink to "app" is one of the things I think I should do (but then again, do I need to?).
Thank you!
Merc.
While not being a fan (nor knowledgable at all) of node, it looks to me as there's a huuge javascript library :)
I'd suggest You should really consider making a buildprofile and use the prefix key to set the location of your scripts. As result of a build, you would automatically get an 'app' folder coexisting with dojo,dijit,dojox.
Actually, i would suggest that once there is a separate repository for your dojo application layer, simply do the checkout within the SDK root, e.g. :
wget download.dojotoolkit.org/dojotoolkit-1.7.2-src.tar.gz -O djsrc.tar.gz && tar xfz djsrc.tar.gz && rm djsrc.tar.gz
cd dojotoolkit-1.7.2-src/
svn checkout http://example/mylibrary app
sh utils/buildscripts/build.sh --profile app/package.profile --release /var/nodejs/docroot/lib/
There is no harm at all in developing your app.widgets somewhere else then in your main document root (/lib). You could simply setup one global variable that tells loader where to look.
If built, nothing should be nescessary, but as far as your current tree goes, try something like this
<script>
var isDevelopement = true;
var dojoConfig = {
packages : (isDevelopement) ? [ name: 'app', location: '/app/client/' ] : []
}
</script>