I found interesting link on how to organize my files and load files using require.js http://backbonetutorials.com/organizing-backbone-using-modules/ , the only issue I have with that example is that they load everything in the beginning even asynchronously. I was wondering if it is possible load .js files only when they needed... For example if I click on Project List ( http://backbonetutorials.com/examples/modular-backbone/#/projects ), it checks on which url we are currently located, and load projects.js and list.js after that....
For small apps it would be ok, but for big apps with big classes it might take a while, before all classes will be loaded to the browser, for all routers.
I think creator of that example answered this question more accurately. Here is his answer: http://backbonetutorials.com/organizing-backbone-using-modules/#IDComment-CommentText210764496 , see the reply
First of all, you would really need a big application in order to need that. The files of a normal application, minified and gzipped, are not a significant load. And then you can use caching to load them only once in each browser.
If you really want to, of course you can do partial loading, in the same way you do it for the application in the example (in the router, the projects route will first ensure the project-related js files are loaded, and only then do the fetching/view initialization etc)
Related
Every time I search about this I get something related to react router and lazy loading. Isn't there a way to create an entirely separate page independent of index.js?
I created admin.js within my react project. If I go to http://localhost:3000/admin, it still loads index.js. I quite do not understand this bit of react if it is possible.
No, this is not possible without router. And here is why: your index.js has nothing to do with what is loaded in the browser.
When navigating to http://localhost:3000 your dev server actually serves a index.html to your browser. In it is a reference to a bundle.js (or however you name it) containing a bundled version of your .js files. So, http://localhost:3000/admin references to a admin.html which does of course not exist (unless you create it). But, doing this has several disadvantages over react-router. Because at build (or bundle) time index.js and admin.js will be two separate apps. Two separate bundle.js. Twice the amount of work needed to package it. Twice the amount of (maybe generated) .html files. Means no shared data at all. Twice the loading time in your browser. And many more.
I'd opt for react-router ;)
Edit: Of course it is not exactly twice in the points mentioned above. I am aware of that. But you get my point.
I'm not really sure how to word this so it's making it hard to search but if I have a big application and each component is in it's own js file, then it doesn't make sense to load ALL component files in index.html. The user might never even see a large number of these components as they are navigating through the app.
So the question would be, how can we load components as they are needed in a view that houses them vs all at once?
In a perfect world, as a page is routed it would know the components on the view and know if it's already registered that component and if not, go get the js file to do so and register it automatically for us before running the view. This would require some kind of configuration that says this string component name is this js file on the server.
Does anything like this exist?
Looks like it's called lazy loading of scripts. There seems to be a really easy angular module for this!
https://oclazyload.readme.io/
Very cool and close to what I was hoping for. Ideally I'd love for config of components and then dynamic loading of components when the view uses then but this is close enough. Perhaps I can enhance this to pre-read the view html looking for components that aren't registered with angular already and then search the config to get them if not.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
I am writting an app from scratch in Angular with node.js and I was wondering if I am doing things correctly.
I want to split the content of my index into smaller html modules with their respective controllers, this way, everything will look more structured and easy to find when the project gets bigger.
For example :
index.html <--- main file
/views/menu.html <--- menu module
/views/content.html
/js/menu.js <---controller for the html module
/js/content.js
...
I can manage those files by just adding ng-include :
e.g
< ng-include src=" 'views/menu.html' ">
My concern is that this is like a GET request per file and I was wondering if this would affect the load speed of my application. Because I am working in local, this loads in 2ms which is very quick but I was wondering how this would behave online.
My questions are :
Is this the best way to create a modular app with different html files and js controllers ?
Is there a better way to achieve what I want to do ?
I am still learning Angular, sorry if this is too basic.
Thanks
Its better to use index.html as basic load file which will load all css and js on the load of the app,
for ex:- you can make diffrent app for login and after login section. After login.
load all the js and css files through the app after login..it will improve the loading time and also be a modular
as suggested by #Dhruv Raj Singh It is good to use a different ng-app for pre-login and post-login.
It is always good to structure the code that you want.
Now ng-include
will Emitted event $includeContentRequested every time the ngInclude content is requested.
Now it up to the requirement use cases how to use and when to use.
If
the module is a sperate and special one which requires lots of resources specific to it only and will be used by few users and only few times then it is better to include them for that module only
else common resources should be included at ng-app level.
You can name and organised the resources whatever way you want but include them at post-login app creation.
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.