We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects.
Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.
---resources
|---custom-components
|---mycomponent
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent.js
|---mycomponent2
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent2.js
|---libraries
|---backbone
|---underscore
|---jquery
|---jquery-ui
|---jqueryplugins
|---jcarouselite
|---thirdpartyplugins
|---page-js
|---mypage.js
|---mypage2.js
resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.
Custom components will be asked by main-js residing in page-js.
Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?
About the directory structure
As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.
Here is the cake's awesome MVC directory structure:
Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.
About the cleaning up techniques
Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.
For many years, programmers use module = null to free up memory from un-used codes.
Take a look at these also:
Can dynamically loaded JavaScript be unloaded?
Loading/unloading Javascript dynamically
How to unload a javascript from an html?
Hope it helps and good luck on designing your app ;D
Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.
Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.
I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)
Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html
Related
I have an Angular project and it uses a bunch of Javascript Libraries, starting with jQuery, going through Modal Forms, Tooltips and many more, mostly from third party providers. The thing is that, even when my Angular website makes use of these Libraries, the Website does not make exactly FULL use of the complete Libraries, but at the moment of Building the Dist files, the styles.xx.css and main.js are quite big files containing all these Libraries and Styles inside.
So, I was thinking there must be a way to only include in the final Distribution, only the "actual" code that is used by the Website and not the complete Libraries that includes the used and unused code. There are many features in those Libraries that the Website actually does not use, but these are at the same time, big files that make it difficult to just get in there and remove code by hand.
If there would be some sort of Code Coverage test that I can run on the complete website, just to "mark" all the actual used code and remove/discard from Dist compilation, all the unused code, that would be just awesome. This would be no-doubt a very efficient way to put on diet the Production compilations on any website.
Anyone knows if something like this exists?
You can certainly think of:
Implementing Lazy loading -> Helps in reducing main file sizes and only chunks are produced with less size
Go with modular architecture
Import the package as provider for the particular modules
Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application
AFAIK, in Meteor, when compiling app, all javascript files and all css files will be merged to one file. I think this behavior will slow down app (because user must download all css and javascript that unnecessary for that page). Moreover, this behavior makes our app not dynamic, because maybe some page, we need different css or javascript files.
So my question is: How can we choose custom javascript and custom css for a template ? Does Meteor support this ?
Thanks :)
AFAIK Meteor is not supporting this exactly in that way. So you are left with two workarounds. One would be writing a own extension which helps you in that regard or finding one which already exists. And the other would be putting your special resources somewhere in the /yourMeteorApp/public folder which is excluded from the merge process (see http://docs.meteor.com/#/full/structuringyourapp). And now you could write some template specific logic to load and evaluate JS and CSS resources from there when your template is accessed. Resources in public are available directly on root level - so public/js/my.js would be available under www.example.com/js/my.js.
UPDATE:
This answer is quite old and in modern Meteor apps you should make use of the import logic (and the imports folder) which didn't exist in that way when I originally answered this: https://guide.meteor.com/structure.html#intro-to-import-export
This should be the best way to handle any dynamic JS requirements and strucutre an app by far nowadays.
In practice this has yet to be a problem for me. The combined javascript files are minified and obfuscated. The fact that any "page load" within the UI is done without a server GET makes the UI quite snappy. I have over 20 packages which add up to 2.1MB of js loading when the app cold-starts. Even on iOS it feels fast.
I've been using a grunt file to concatenate all my JS into a single file which is then sent to the client. What advantage do I have in using require calls then? The dependencies are inherent from the concatenation order and I don't have to muddy all my JS with extra code and another third-party library.
Further, backbone models (for example) clearly state their inheritance in their definitions. Not to mention that they simply wouldn't work if their dependencies weren't included anyway.
Also, wouldn't maintenance be easier if all comments related to dependencies were in one place (the grunt file) to prevent human error and having to open every JS file to understand its dependencies?
EDIT
My (ordered) file list looks something like:
....
files: [
"js/somelib.js",
"js/somelib2.js",
"js/somelib3.js",
"js/models.js",
"js/views.js",
"js/controllers.js",
"js/main.js"
], ...
So perhaps requireJS isn't worth it for small projects anyway.
Using require.js allow you to break down each part of your application into reusable modules (AMD) and to manage those dependencies easily. It is not easy to manage dependencies in a javascript application with 100 classes, for example.
Also, if you don't want all the overhead of require, check this out (developed by the same guy who created require.js): https://github.com/jrburke/almond
The answer depends on the size of your app and the end use case..
A single site.min.js payload for the front end (client) generally aims for small file sizes and simple architectures (1 single file generated from maybe 10).
back end based (server) apps are usually much bigger and complicated and therefore may warrant the use of another tool to help with managing large code libraries and dependencies (50 files for example).
In general, RequireJS is worthwhile but only if you have many files and dependencies. An alternative for use in the client would be almond. Again, using a tool like this must warrant the need (many files and dependencies).
The answer from orourkedd is also worth reading.
I'm just taking a look at Sproutcore (gem version 1.6.0.1) to see what I can do with it.. so excuses for the beginner questions...
I've gone through the tutorial and looked at the doc mini-site.
I'm wondering how I should organise my source code files. After building the really simple todo app I've already got one messy monolithic javascript file that contains a model, some views, some view controllers, etc.. i can't picture this scaling well.
I've noticed that if I add another js file it is automatically inserted into the project when I load the app in a browser but I'm second-guessing what order those files go in - alphabetically my file (test.js) should have been included before todos.js but it wasn't.
What's the recommended approach to organise a larger scale app; are there some guidelines for this?
Couldn't see anything on the sproutcore website, strangely enough..
What if I want to share models between apps, is that possible too ?
Thanks
The helper tools should arrange the files for you. Granted, you might not use them. Here is the folder structure I have from a project I did a while ago
So under the root project directory, there is an apps dir, a frameworks dir, and a Buildfile and README (the other stuff you see is not necessary for sproutcore).
In the apps dir, you see the main app (sudoku in this case) directory. Under it, you see, directories that directly relate to the objects you are going to create -- datasources, controllers, models, views, states, etc....If you put more than one app in the apps dir, you can access both from localhost:4020/, i.e. localhost:4020/app1 vs localhost:4020/app2
I didn't expand the frameworks dir, but in it are all the frameworks the project uses. So if you want to modify sproutcore, you can put the version you use in frameworks, and the build tools will use that version. It is a good idea to make your model layer its own framework, so you can use it with other projects if you want. You model framework should be completely decoupled from the rest of the app; it should expose an API that any client app will use.
You can further create other directories under these directories at your discretion. For example, if you have a complicated application around a Person model, you can create person directories under models, views, controllers, etc, and then put your code in their.
Note that if you have a PersonController object, the file name would be person.js according to convention, but that's up to you.