I am planning to use requireJS in my project. But does that cost more work to add it to my existing project as i have a good number of js files already in my project. what is the easier way to rope in require js into my project?
requireJS is good for avoiding unwanted scripts from loading.
if you think that your project has lot of Javascript files, that are loading unnecessarily, you can go for RequireJS. You can load the Javascript files in your page dynamically.
This will help you to reduce unwanted load in your application. This will also increase the speed of your application.
You need to add a define/require with the js files that are needed, a return at the end of each file. And you are done with 90% of code change. Your bigger part is calling the function of one file from another. You need to change them at most of the area in the code.
Related
I'm working on a web project that uses webgl content generated with unity. When trying to load the required js files the browser freezes for around 30 seconds. The main js file has 35MB size unzipped so this seems to be the cause.
I want to avoid this freeze if possible but I couldn't manage to do it using WebWorkers since the script needs access to UI. My other possible solution is to try to split the js file into smaller ones but I don't know how to do it. Do you have any suggestions?
If you add async to your script tag like this <script async src="app.min.js"></script> it will not block rendering anymore. Also caching the script in the browser or delivering it from a CDN can help reduce the download time.
35MB are, however, way too much for a website. Are you sure there isn't a lot of unused stuff like libraries in it?
We recently wrote an article with web performance best practices, with explanations to critical rendering path and other fronted concerns here
35 MB just for the JS file seems ridiculous. It could be that the entire build is probably of that size (textures, media, etc.). Have a look here on how to reduce the build size.
Though 35 MB is wayyyy to much for a JS file, you can start by following pointers:
Create utilities and reuse the code. This can be at any level. Be it generic component (HTML generating code) or validation logic, if it can be configured using arguments, make a function and use it.
If you have Hard-coded JSON in your js, move them to .josn files and load them only when they are required.
Split files based on sections in view. In SPAs, there are cases when a section is not visible. For such cases, don't load such files. Spread your code base from 1 file to 100s of file.
If you have a lot of event listeners, move them to different file. You can have section_event.js, section_data.json, section_utils.js and section_index.js. If there involves lot of data parsing, you can even have section_parser.js
Basic Idea is to split code into multiple files. Then, make code more reusable. You can even look into loading libraries to reduce your load.
Also, load a resource only when required. SPA have stages. Load concerned files when they are needed. Split download from 1 time to partial, on-demand approach. Also look into webpack or grunt or gulp to minify js.
Do i have to include all my javascript file while loading main index page?
In single page application when we are not logged in, we include all of our .js file in main index file. This contains js file that is only needed when users are logged in.
What is better approach of managing angular app in this context?
Simple answer: yes.
Your application is a single-page one, so you can combine all JS files into one and load it at one request. It saves time for processing in the future.
Alternatively, create two pages login.html and others.html, then load two different sets of JS files accordingly.
Normally, nowadays the bandwidth is not the bottleneck, loading a larger JS file does not make trouble (usually).
You can split your code into multiple modules and then just load the js needed for that module.
I suggest using Gulp with packages to inject HTML when appropriate. You then have single lines of code as place holders for your Javascript and you run the Gulp task to inject the Javascript into the areas where it is needed.
You could also run gulp tasks to minify your js into just a few minified files. You will need to be sure your js in min safe (gulp can do this too).
If you make AMD - most often using RequireJS - then you won't need to include all from the very beginning.
A while ago we did a similar project, although without AngularJS, and by using RequireJS we made the different pages, which use different files. And this way people's browsers will never download certain files if they never go to certain pages.
(Of course, we had many pages inside the app, not just 2 or 3, where this wouldn't make any difference.)
I was just wondering about some good practices when it comes to external files specifically with javascript and CSS.
For javascript, should you make an external file for every module/added feature so that it's easy to locate and find the code in one spot for the module?
Also is it bad to have too MANY external files connected to one page, to the point where it affects load time and general bad practice?
Same question appllies for css..
Thanks
You always want to your files to be organized and well structured in a project like manner during development time. It's okay to have many css,js files during development, but that's very costy and expensive in production or real-life phase due to the fact that each file load adds an overhead to the exact file size making the file fetching slower and increasing your page load times. So, when you are ready to deploy your application, it's a good idea to merge and minify all your css files into 1 css file, the same goes with your javascript files too. Just remember that if you are doing CSS overrides, you will have to maintain the file order while merging not to mess up your css logic.
You can merge and minify using that tool http://www.shrinker.ch/ ;)
Person I use external files for every code so they are all separate. One for my CSS, and one for my JavaScript. I wouldn't say it's bad practice, It keeps things organized.
Is it bad to have too many?
I don't see the point on have multiple external JavaScript or CSS files when you can use a comment line to separate it if you are really OCD about it being organized. If for some reason you want to have multiple files you could create a folder specifically for the group of files.
Overall
I organize a lot with external files, helps me keep track of things. So I would say it's good practice, just trying to not go overboard with it, keep it like at 2-3 of CSS, JavaScript, Or jQuery each.
Edit*
I think it's primarily for organization, so, yes it is good practice to use external files.
Best case scenario is to have a master css file for the high level layout, and then different css files for the sub layouts that are only called when the module is loaded (not sure what framework your using, but I suppose your modules can have independent layouts). However you would want to use a minifier:
code.google.com/p/minify/
This compiles your css to a smaller format / single file, which helps keep the size down by merging all called css files into 1 master css file.
At the same time you want to get an adequate balance between load time and maintainability, if lumping some layouts together makes the code easier to maintain and the load time trade off is minimal then there's no real harm in this.
I like keeping myself busy building modular web-applications, but don't want to spend time where I can save some..
For example I'm building a news module that should be easily implemented over multiple sites, because the same web-application is used.
However not all websites will need a news module. Is it better/easier/faster to create an inline stylesheet/javascript file built into the module itself, than to create a big external stylesheet/javascript with all the libraries? Even though the file for the news module is not needed on all other webpages?
It seems to be much easier to create an inline library in the module itself. So that this only gets loaded when needed, and saves load time and bandwidth on the other pages.
The other thing is that I like writing 'plug-and-play' modules. Say I move a file across the file server into the module folder, and the application will take care of the rest. With inline sheets, I dont have to add new lines to the header/footer etc.
What is the best solution for this? When also taking into account that I rather spend 10 minutes moving a file and it works, than to spend 1 hour appending external libraries just because its more of a 'good practice'?
If you re building web applications, are you using the MVC patern? Do you separate your concerns? (your Templates/Views, your Models, and your logic(Controllers))
If you follow MVC, it makes easier maintaining and customizing your app.
To answer to your exact question, what you need is RequireJS. This way you have only one place to declare your requirements, and RequireJS will handle the rest.. Load order and more..
Quoting from the requirejs website:
Over time, if you start to create more modular code that needs to be
reused in a few places, the module format for RequireJS makes it easy
to write encapsulated code that can be loaded on the fly.
Inline is never a solid way to maintain CSS. Take care to separate the description of your layout from your views. You can easily include the file in the same directory as the module so it should not be an issue.
Or if you want just to load "on fly" some script you can use jQuery.getScript , http://api.jquery.com/jQuery.getScript/ . Otherwise you should follow George's way.
I'm faced with a dilemma. I started a project using Backbone.js and have many many JS files (views, models, controllers, templates, collections), but I didn't want to have to load them each using the script element in my HTML file.
My idea was to load one file (bootstrap.js) and within that, load all the required JavaScript files for my web app (minus 3rd party libraries, which will get loaded using <script> before bootstrap.js).
Would using the jquery getScript function work to load all the JS files from within bootstrap.js? What's best practice? I just don't want to have like 20-30 <script></script> lines in my HTML file when I don't need to - just trying to keep it nice and clean.
You should concatenate them all before deploying. You can also run YUI Compressor on them for speed and size optimizations.
But my favourite way is keep them separate during development, and 1 big file before deploying. Some server-side script will make this easy.