When someone navigates to my Meteor app, I would like the home page to be loaded first, rendered, and displayed. And then as soon as this is done (the user can start clicking around), all the other resources and databases for all pages of my app are loaded (cached) in the background to LocalStorage (as much as can fit), so that all the pages, images, etc, of my app will appear instantly when navigated to.
What's the no-brainer convention for doing this in Meteor? Is there a package?
And secondly, how do I indicate which resources I want to be highest priority in the background loading queue? For example, how do I make sure that a "splash page" and its images shows up right away?
Meteor apps are, by design, single-page sites. If you view-source on a deployed Meteor app, for example http://docs.meteor.com, the <head> always looks something like this:
<link rel="stylesheet" href="/5a6084946b1bc47e30e45c05bdecb13536a2dc64.css">
<script type="text/javascript">
__meteor_runtime_config__ = {"meteorRelease":"galaxy-follower-5","ROOT_URL":
"http://docs.meteor.com","ROOT_URL_PATH_PREFIX":"","serverId":
"964b34dc-ffbb-b860-a313-9eedca254d83","DDP_DEFAULT_CONNECTION_URL":
"ddp+sockjs://ddp--****-docs.meteor.com/sockjs"};
</script>
<script type="text/javascript" src="/3353c2b059d42f3fe42e0d5eba87882b955d7cbe.js">
</script>
That .css file is all of your app's CSS, concatenated into one file; and that .js file is all of your app's JavaScript, including all of your templates, concatenated into one file. That's just the way Meteor is designed, and it's not something you can change without delving deep into Meteor's source and rewriting some major chunks.
The only suggestion I have for you is to have your homepage served by something else, such as an Apache or Nginx server, which really does serve up just the bare minimum that you're after; and fetches the above .css and .js files and preloads them. Use a router package in your Meteor app, and take care that all the links in your homepage point to routes that are defined in the Meteor app. You can also speed things up a bit by separating out and loading from a CDN or your Apache/Nginx server any resources not directly needed by Meteor—images, additional CSS, external JavaScript like libraries—and having those preloaded by your non-Meteor-hosted homepage.
Finally take a look at meteor-external-file-loader. It's designed for loading external JavaScript libraries on the fly in Meteor apps, for example loading Google Maps only on the pages where you're actually showing maps. I'm not sure if it can be used to load JavaScript that's core to your app like templates, but if your app is so large that you're thinking of splitting it up anyway then presumably there are parts of your code that you can separate into packages like your own custom JavaScript libraries, which can then be loaded dynamically from your Apache/Nginx server using meteor-external-file-loader.
Related
I'm trying to create a Firefox extension that will allow me to modify a page on my company's local web server. I don't have access to modify the source code of the page itself. So in the same spirit of extensions like the Reddit Enhancement Suite I'd like to write some code that will inject a CSS file and some javascript to enhance the page on page load for myself and my co-workers.
I've successfully made a Firefox extension that loads in files on regular sites like say google.com and such. But once I change the domain to match the page on my company's local web server (for example: 10.0.0.12:82), it stops working. Specifically I am attempting to inject a .css file into the page. I am using resource:// to do it and it works flawlessly on other sites. The CSS is not being injected at all. So it's not a matter of permissions or anything. It seems like the javascript isn't firing.
Is it not possible to do this on a local web server? Perhaps there are extra measures I need to take first since it's not a normal website?
Here is the relevant code from the files in my extension. I set up a path in my manifest file and then in the javascript file that loads I append a css file located at \chrome\skin\resources into the <head> tag of the loaded page.
chrome.manifest file
resource cemod chrome/skin/resources/
console.js file
$("head").append('<link media="all" href="resource://cemod/page.css" type="text/css" rel="stylesheet"></link>')
Just to reiterate, this code works fine when the extension is written to activate on other pages like reddit.com. But it stops working once I change it to the IP address of my company's local web server.
My website is in javascript with dynamically generated content on top of a fixed HTML frame. To make Google aware of the content I use the _escaped_fragment_ trick and track on the server side when to serve fixed content instead of dynamic. It all works well for the sub pages as long as they are linked with #!, which is the case for all pages but the homepage.
I obviously want to keep the homepage without an ugly #! at the end of the URL.
So far the only solution I can think of is to serve the homepage with fixed content instead of Ajax generated one for everyone.
I would rather keep the Google dedicated version branch separate from the common version as I don't maintain it as much, especially in terms of CSS and navigation, which do not matter that much.
Is there a way to figure out that it is Google crawling the website and serve a static version instead?
The solution is to add the meta tag:
<meta name="fragment" content="!">
More details there.
I am creating a mobile singlepage web app using jquery mobile. The webapp includes a number of javascript files and a number of css files. I have written a deploy script that concatenates and minifies js and css files, and now I am wondering whether I should inline the concatenated js and css directly in the HTML file - please note that I am talking about a singlepage app here (I know that this would be a bad idea in a traditional web 1.0 app with dynamically generated HTML). I am also using appcache/manifest file to cache the singlepage app so that subsequent access to the web app will be served from the cache, so it is the initial load time that is my primary concern.
When I inline everything (jquery, jquery mobile etc.), my 7kb HTML file increases to 350kb (100kb zipped) but now everything can be loaded in a single request.
But am I missing some other benefits such as parallel downloading of js files - and would it therefore be better to not inline the css and js, but instead just concatenate all js and css to a single js file and a single css file and then fetch each of them in separate requests?
Are there any limits regarding file size that I should be aware of? Maybe caching in network routers works better with smaller file sizes or whatever?
So my question boils down to whether it is a good idea to inline everything when making singlepage mobile web apps?
The answer to how much should be concatenated and how much should be inlined varies depending on a number of conditions. The final answer is you should do A/B testing and find what works best for you. From what you describe I recommend you definitely NOT inline 350K of CSS & JS. If you do this then any change to the HTML or JS or CSS requires downloading the entire payload. Instead, compartmentalize those changes and forced updates by keeping HTML, JS, & CSS as separate requests. You could do dynamic | inlining to make the first response fast but leverage (app or localStorage) cache for subsequent requests, but that's going to get complicated when coupled with app cache (because the HTML doc is saved to app cache). Otherwise, just keep them separate, save each resource to app cache, and update individual resources as needed.
I would not recommend inlining everything into the html if your webapp could be accessed from different urls with different querystring.
Example :
http://webapp.com/?fb_token=fdsf
http://webapp.com/?referer=bla
http://webapp.com/?tracker=toto
Each of those will add a master copy in the appcache (you can veryfy it by looking at chrome://appcache-internals/ in chrome). You then risk to reach the quota limit for appcache in term of cache. Furthermore on appcache update, the browser goes through its appcache entry list and ask a fresh copy of it.
A good compromise that i am following for mobile device & appcache , is to keep the html tiny and then have one big css (containing base 64 inlined images) and one js file.
FYI, there is currently a quota limit on the size on the sum of all your listed resources in appcache in the order from 5MB to 25MB (25 being the new iOS6 limit)
-seb
People are telling me that I need a script loading for web app, but I already have <script /> and <link /> tags already, can anyone tell me when I should use a script or resource loader? and What is the load you recommend.
I'm assuming they are referring to loading and executing javascript files as and when needed, to reduce the initial load times of pages by not loading all your scripts in the head section of the html.
Not totally sure if thats what your getting out, could you give more information on the situation? does your web app have a large number of javascript tags?
I think the requirement of the scripts loader is for multiple <script src=""> tags in the html page, one of more of the scripts have the loading order required, like: the jquery.js must be loaded before the jquery-plugin.js. Another case is the scripts which will be loaded are different in different client devices, like the javascript run for desktop client will be different than the javascript run in the touch pad
When you are working on a single-page application with a lot of dependencies between JS files.
I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.