structure for jquery in my mvc project - javascript

whats the best way of structure jqueryfiles in my mvc app.
Now i have all my scripts in script folder and it starting to be difficult to have
a good overview.
//thanks

We used the following structure on my last project:
Scripts
|
|- jQuery
|- Libraries
|- Infrastructure
|- PageSpecific
jQuery contained jQuery and any plugins. Libraries contained other third-party libraries (e.g. underscore.js). Infrastructure contained shared JavaScript modules, e.g. one full of utility functions, or one for handling server-side account-management communications, etc. PageSpecific contained code to wire up event handlers and page-specific logic.

The HTML5 Boilerplate has some minimal structure for JavaScript already. Anything I do will likely be built on top of that because there is at least a chance that another developer will have encountered it prior to hitting it in my project.
Boilerplate has a "js" subdirectory that contains all the JavaScript, another directory under that called "libs" that has just jQuery and Modernizr, and a "mylibs" directory where you're directed to put all the third party libraries (for example, the libraries for jQuery templates or Lawnchair).
js
libs
mylibs
plugins.js
script.js
They also recommend your short plugins should be concatenated in plugins.js and your basic script stuff go into script.js. Of course, that won't work for a large project, but you've at least got a start with just the js, js/libs, and js/mylibs structure. At the moment I'm using a JavaScript per HTML file with a corresponding name (blahblah.html + blahblah.js) but long term I know I'm going to need more structure than that.

Keeping your JavaScript files in the Scripts folder is the way to do it. If you want, you can use subfolders within the Scripts folder so that it's a little more organized.

It is always a good idea to keep your css files and javascripts organized within your web application.
Have two main folders 'styles' and 'scripts' in the root folder of your application.
Inside each of these folders, create sub folders that reflect specific module in your app like 'jquery', 'blueprint' etc and place those files over there.

Related

Cordova - share the common code

Is there is any way to have a common project which contains plugin, java script file etc and there is a multiple Cordova project which can access/get those plugins and java script files.
For an example, Cordova-Project-A and Cordova-Project-B has some common plugins, CSS files and java script files. So need to separate these common codes and place it on separate project.
Note: Cordova templates will do this work. But if there is any plugin/JS file update in the template, it won't reflect anything on Cordova projects.
there is. this place is called npm, and it serves as a giant, worldwide, warehouse for javascript developers. by the way, cordova is already using it to power its plugin system.
to join the party:
create the desired projects to contain the common, extracted, code as npm projects (i.e. use npm init on them).
use npm's link to always have the updated source in all consuming projects.

Website with node - couple of questions about browserify or webpack

I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.

How can I structure/access the react components of my non node.js application?

I have a production application whose folder structure is much like you would expect:
/project
/css
/js
/php
/fonts
/images
/index.php
I have recently begun learning to use react.js and I would like to start developing new features using react while leaving all existing functionality as is and I understand that react.js can certainly be used this way.
What isn't entirely clear, is how to structure the files in my non node.js project and access them.
For example, I tried searching for this and found this article which proposes the following structure
and states:
Here index.jsx works as the entry point of the application. It uses ReactDOM.render to render App and gets the party started. App in turn does something interesting with Note. If I wanted yet another component, you would simply add it below /components.
Presumably this is a node.js project where index.jsx can call something like require('components/App.jsx');, but how do I achieve the same in my non node.js project.
Consider if I set the following folder structure:
/project
/css
/js
/php
/fonts
/images
/react
/components
/App.jsx
/Note.jsx
/scripts
/featureFoo.jsx
/index.php
Given the above, I'd like to have index.php load react/scripts/featureFoo.jsx which would somehow include/use react/components/App.jsx and react/components/Note.jsx
I figure I could have script tags in index.php to load all of the components then featureFoo.jsx but I feel like there is a more react way to do this.
So
How can I structure/access the react components of my non node.js application?
Im tagging node.js as I feel those users may well bring insight regarding this possibly from having to deal with multiple projects/aproaches.
In order to import/require other modules in a non-node.js (i.e. browser-based) JS application, you'll need to use a bundler such as webpack or browserify.
They work by starting at your "entry" file (index.jsx in your case) and recursively following all of your imports/requires. Then it smartly bundles everything up into a single "output" file, which includes everything your application uses, that you can link in your HTML.
You can also use more complex configurations with multiple entry and output files, or even dynamic loading of "chunks" at certain points in your application. But the above is the most basic use case, and works well for most simpler projects.
These bundlers have some other cool features as well. For instance, with webpack (with additional plugins and loaders) you can:
Write ES6/ES7 JavaScript that gets compiled (via babel) into cross-browser compatible ES5
minify/uglify your output JS
import/require non-js files such as CSS, images, and webfonts, and choose how to process these imports (e.g. pre/post-process your CSS, or optimize your images)
Extract all imported CSS into a single .css file
Use webpack-dev-server (or webpack-dev-middleware) to take advantage of hot module replacement, which makes developing JS apps easier by letting you see your changes take effect instantly in the browser without having to refresh or lose your app's state.
And a lot more. The world of bundlers is a pretty big ecosystem with a lot to learn, but it's totally worth getting into.
A good place to get started is the excellent Survive JS series of tutorials.
However, if you're still learning React, then diving into webpack and the entire ecosystem of JavaScript tooling can be overwhelming. It will probably be easier and a more efficient use of your time to keep things simple at first, and then only get into bundlers etc. after you get comfortable with React.

Javascript compiler / dependency manager?

I have many JS files. Some of them depend on each other. Many of them depend on jQuery.
I need tool that can accept one file as parameter, fetch all its dependencies transitively and compile them into one file in proper order (based on dependencies)
Dependency information not always available inside files itself, so it would be nice to have it somewhere outside (xml file? folder structure?)
I've heard about Yahoo JS compiler, closure and so on, but I am not sure they do what I need.
Look: I have module "CustomerPage". It sould include "validation.js" and "gui.js". Both require jquery.js. And "gui.js" also requires "myFunctions.js".
I want some ant task or some script that would generate "CustomerPage.js" as result of all that files.
Tool should check dependency order, prevent double including and so on.
My project could have around 500 js files, how could I live with out of this tool?
People says "use GWT", but I need plain JS.
You might want to look at one of the AMD-style module loaders, such as RequireJS. Some of these can do what you want for precompiling, and can run in a development mode which makes it easier to debug by including all the files directly.

How can I dynamically load and execute all of the Javascript files in a directory?

I'm making a very simple content-management system in Javascript. It uses plugins which are individual .js files which live in a "modules" folder. Currently I'm loading them with JQuery's getScript() function, but I have to manually define the list of available modules.
Is there any way to dynamically load the list of Javascript files so that the user can install additional modules by simply dropping them into the "modules" folder?
No, you will have to use serverside code for that.
If I were you I would combine them server side with a script like minify, and provide a URL which automatically minifies everything in the modules/ directory.

Categories