I have notice that meteor is creating and loading every template javascript file. Is it possible to selectively load javascript of each template? Because my app generate template file for each of my user. So if this is the case every user's template javascript is loaded to the page. That would not be ideal.
index.html
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_cart.jade.js?4e6fe10676dcbfd5eec51f802ab604bf7afefdfc"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_footer.jade.js?c904832f29a144cc6a3c53b8fc4159088d427ce9"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_header.jade.js?02a4f5e9a4a697194e32a16bee9209fa9a63422a"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_home.jade.js?91d90f326d7da8db94396648b81f88c739691754"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_product.jade.js?3eed90e15d544fb8e4d5418c641a51ce94c048b2"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_search.jade.js?08b0b0b4e02599e9ceaac00b94515a1ee7638036"></script>
It's not possible, yet, but is on the roadmap: Incremental loading. According to that card:
Right now, on initial pageload, you download all of the JavaScript, templates, and css in the app.
If you are generating a unique file in your filesystem for every user that uses your app, you might want to reconsider how you are going about structuring your app. Do you really need a new template for every user, or can you get it done with one template and have it update according to which user is currently displayed/logged in?
The short answer is, you shouldn't.
This answer explains an elegant approach of selective loading and also explains why you shouldn't.
Consider the fact that after the initial page load (of maybe 2MB - 5MB for a medium size app) the browser caches everything and all that comes through the wire is pure data.
Related
I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.
In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.
Technically Place Scripts at the Bottom of html page is JavaScript Best Practice.
But i'm confusing why some scripts should call at the top of page like Angular.
So when i use Angular-like libraries is i'm breaking JavaScript best practices?
Any Explanations?
Technically it's only best practice if you don't care "much" for the sequential loading of script files. You figured out you need a library first before you can call it. Hence people load all of their custom scripts in the bottom, after the HTML is loaded, so they don't need to take care of that particular DOM loaded event and to counter render blocking scripts which is what happens when you simply put them all in the head tag.
But JavaScript libraries are actually dependencies that need to be fully loaded first. Technically also on small band (or these days compare it with slow smartphones). And you should also know that the http protocol allows you to download 2 requests at once.
With that info in mind, I say best practice is one bundled script file put on async mode loaded from the head-tag, preferably minified. Achievable with a grunt/gulp setup or some sort.
<head>
<title></title>
<script src='path-to-bundled-script.js' async='async' />
</head>
The async attribute makes sure the page loading doesn't wait on this script to be fully loaded. It still does wait on more than one http requests, hence the bundeling for sequential execution.
So when you are developping and you don't have your grunt/gulp setup completed for this bundle, you will hit errors, saying that libraries aren't loaded or symbols aren't recognized.
To solve this you can use the attribute defer.
<head>
<title></title>
<script src='path-to-library.js' defer='defer' />
<script src='path-to-library2.js' defer='defer' />
<script src='path-to-library3.js' defer='defer' />
<script src='path-to-custom1.js' defer='defer' />
<script src='path-to-custom2.js' defer='defer' />
</head>
With the defer attribute, the page load will wait for the scripts to be executed, but not for the HTML to be completely loaded.
Using this technique, you can forget about the closing body tag as best practice and you'll gain speeds testable with google's pagespeed insight
It really depends on the content (data to be pulled) of your page to be loaded. If most of it is static with only few AngularJS bindings then it will be better to place it at the bottom. But in case of a fully-dynamic content you would like to load AngularJS at the top of the page for example in RESTful web services .
The logic is simple if we need some data (bindings) in Angular way we need to place it in the top.
In Sails.js how can I load a javascript file in a specific view, because I have an script that I want to load only in one view (.ejs).
I see that in layout.ejs all the javascript files are loaded for all views, so the idea is to exclude the javascript file from the layout and load inside the view.
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.js"></script>
<script src="/js/dependencies/angular-ui-router.js"></script>
<script src="/js/dependencies/angular-route.js"></script>
<script src="/js/dependencies/angular-translate.js"></script>
<script src="/js/dependencies/ui-bootstrap.js"></script>
<script src="/js/dependencies/textAngular-rangy.min.js"></script>
<script src="/js/dependencies/textAngular-sanitize.min.js"></script>
<script src="/js/dependencies/textAngular.min.js"></script>
<script src="/js/dependencies/angular-color-picker.js"></script>
<script src="/js/dependencies/angular-click-outside.js"></script>
<script src="/js/dependencies/angular-bootstrap-tpls.min.js"></script>
<script src="/js/dependencies/angular-filemanager.js"></script>
<script src="/js/dependencies/resource.js"></script>
<script src="/js/app.js"></script>
<script src="/js/locales/ca.js"></script>
<script src="/js/locales/en.js"></script>
<script src="/js/locales/es.js"></script>
<script src="/js/controllers/IndexController.js"></script>
<script src="/js/controllers/LoginController.js"></script>
<script src="/js/controllers/LogoutController.js"></script>
<script src="/js/controllers/NewVideoController.js"></script>
<script src="/js/controllers/PreviewController.js"></script>
<script src="/js/controllers/VideoConfigController.js"></script>
<script src="/js/controllers/layoutController.js"></script>
<script src="/js/services/LoginService.js"></script>
<script src="/js/services/VideoConfigService.js"></script>
<script src="/js/services/VideoService.js"></script>
<script src="/js/services/authInterceptor.js"></script>
<script src="/js/services/authToken.js"></script>
<script src="/js/test/controllers/IndexController-spec.js"></script>
<!--SCRIPTS END-->
The code above are the scripts of the layout. I would like to remove the textAngular scripts from the layout and load only in the view that uses textAngular.
Has someone an idea?
If you're loading different scripts on different pages as part of the actual behavior of your application, I'd advise against it. (But it looks like you're using Angular, so that's probably not the case, since you're probably attaching UI controllers to a particular page via ng-controller).
So, on the other hand, assuming you're looking into doing this for performance reasons, then here's what I'd suggest:
First lift with --prod and check to see what each page load feels like. Now that you're using a minified bundle, it should be considerably faster. Pay particular attention to what subsequent page loads feel like, since your browser will have cached everything by then. Because of the way the browser (and HTTP v1) work, in most cases you'll find that using a single bundle in production is actually faster then including only those scripts used on a particular page. (Plus it makes switching to a CDN much easier if that ever comes up).
That said, if you're using tons of JavaScript files (megabytes and megabytes), that might not always be an option. What we usually do at my company in that scenario is what #KevinLe suggested: manually include the really heavy scripts on the page that needs them. (Even then, you can probably still use the linker for everything else-- or vice versa).
Alternatively, you could get fancy with Grunt or Gulp-- just keep in mind that, when you go to production and you consider using a CDN, you'll have to bundle up those scripts for each individual view into separate payloads.
So to recap:
avoid writing front-end code that does stuff immediately when it is loaded without first checking the DOM
for most apps, you should just use a single bundle (performance will be better)
if you need to separate things out, include scripts manually in the views where you need them (note that if you do this and also decide to continue using the linker, then you'll probably want to move the linker tags out of layout.ejs and into each individual view as well-- that keeps your script tags in one place in the code)
I have a number of js files that I put in an another folder for ease of updating and for sharing between different pages. These files are called from another page and I use the
<script type="text/javascript" src="/js/file.js"></script>
notation.
This works fine but when I change something in one of these js files, the browser (chrome, firefox, safari) still loads the previous version without the changes, therefore not updating the js file it uses to the updated one. I tried to clean out the cache to force it to load the js file again (with the changes), but to no avail.
The only workaround that I have is to rename the external file to file2.js and include that in the page calling it but it is a tedious process because if I make another change I have to change the name to file3.js, etc.
Is there a way to force the browser to reload the original js and not use a previously stored one>
You can force the refresh by adding something unique in the URL:
In the code below the string "d6aa97d33d459ea3670056e737c99a3d" has to be generated for each request. You can use a timestamp, a hash, a random number, whatever you want.
Because of this, the browser will not reuse what he has in cache and will always download the JS file.
<script type="text/javascript" src="/js/file.js?d6aa97d33d459ea3670056e737c99a3d"></script>
You could try the classic technique of adding a random number to the query string.
<script type="text/javascript" src="/js/file.js?r=123"></script>
This would achieve the same thing as using a different file name (as far as the browser is concerned, this is a different URL) but you wouldn't have to rename your file.
Just use this:
<script type="text/javascript" src="/js/file.js?1"></script>
See the ?1 after the filename.
i have a webpage with javascript that split the view into "pages" visible to the user:
<!-- optionally include helper plugins -->
<script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
i'm wondering if the app can know the page that is displayed...accessing some variables in the page or some other method to know it.
i've not programmed the page, so i'm asking only if is conceptually possible or not, and what is a way to know what is happening to the page, driven by an event in the webpage
thanks
Use the call stringByEvaluatingJavaScriptFromString: If you have a javascript method that will return the displayed page, you can use the above call to query the page and return the result.
I am not sure of any direct way of doing this. Using some app specific custom url scheme is one wat. This answer comes close to answering your question - send a notification from javascript in UIWebView to ObjectiveC
I have also read somewhere about writing to NSLog from your javascript code, then iterate through that log and extract the commands and variables to be used by your Objective-C code. Never tried it.