Best practice for JS files being loaded? - javascript

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.

Related

vuejs templates als asp.net partialviews, good practice?

i'm using Vue.js in a Website and added the templates in the html Code and the js-Code in a single js-file.
So i do not want to use the *.vue <-> Vuefy/Browserfy approach but bundle and minify my js-files later.
As i have to use Asp.Net MVC i could use split the single Html-file in a view and insert the vue-div-elements hierarchically structured with #Render.Partial(...).
This way i could do a clean separation and use the same system like the *.vue files.
Would this be a good practice?
Do you think it would be better to write the html and new Vue({}) in every partial .cshtml or just write the html code there and put the javascript into (a) js-file(s).
The js-code in script-tags could not be bundled and i don't like that much inline Code but it would a nice coupling of the components code.
By using multiple js-files i could store then in the views folder next to their partial partners and bundle them together with the VS Extension Bundler and Minifier.
Are these thoughts usefull or is there still a good aproach for using vuejs templates in asp.net?
EDIT: I used to write some of the partial views with a specific Preifx. The include inline script tags, wich comes the .vue approach very close and is cool in small components because its all in one page. The inline script is conditional with Razor, so only in the dev build it gets rendered inline, for production it get's send separated. To do so I wrote a powershell script and execute it as pre-build event to exctract all the inline code into a js-file.
This file get's bundled with the other js-files and is served minified for production. So i can use all the Razor features in the html/templates and other pages of the project are just *.cshtml views.
For only-one-SPA-sites the approach mentioned by iknowitwasyoufredo sounds better.
If you use vue.js to do some simple js tasks, instead of jquery I think it is good.
But if you want to have a single page application, routing, two way binding etc. mixing asp.net mvc views with vue.js is not a good idea. Eventually, you will face many problems.
It's an architectural decision but you could implement web api services with dotnet, and use this services from a node.js application (express, webpack, vue.js).

Split very large javascript file

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.

AngularJs SPA Javascript file

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.)

Cost of using require.js in an existing project?

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.

Way to link multiple javascript files without minifying or combing into one document?

Is there a way to link multiple javascript files without making them one file?
What I would like is to have one file (javascript or otherwise) which houses links to my other javascript files.
For example, the webpage has one file called allmyscirpts.js, and inside this file is a list of links to my actual individual, separataed javascript files.
Is this possible?
Tod
JS can't simply import more JS, but you could easily write a simple server-side script that concatenates your files together. If you can't/won't work on the server, scriptloader libraries are very plentiful out there these days. Check out require.js, lab.js, yepnope.js, etc. and see if one of them suits you well.
The only way I can think of is to load Javascript files through ajax. The YUI Loader you to not only load all your js files (and those from YUI) within javascript, but it also allows you to configure dependencies between your js files. So For instance, if widget1.js requires global.js, you can configure that dependency, then you can tell the loader to load "widget1" and the loader will also load global.js when it loads widget.js.
Unlike css, I do not believe there is built in syntax in javascript that automatically includes another javascript file. But there are javascript utilities out there that allow this.
For a simpler solution than the YUI Loader, check out the YUI get utility. For my projects I have setup the YUI loader, and as a result my HTML pages only have about 2 or 3 javascript files included, and the rest of what I need is loaded on demand by the Javacript controller for that page.

Categories

Resources