I am building two ASP.NET MVC sites. There is a certain amount of content I wish to be able to share between the two sites. I created a class library and was able to share a large portion of what I needed too. However I would really like to know how I could share contents such as images and JavaScript files, so I do not have to duplicate them between both web sites.
I would be very grateful if anyone has any good ideas on this.
You could use a CDN (content delivery network) for shared files.
<script src="http://shared.yourdomain/stuff.js" type="text/javascript"></script>
It's the same trick that SO employs, it's good for load time too as the browser will only open 2 connections per domain. Using a CDN means that you can add another 2 connections per CDN used. That can include sub domains on your own site. So you could have js.yourdomain and img.yourdomain and they're all counted as different.
If you have a common assembly you may consider embedding your content as web resources. More info about web resources can be found here.
For javascript you can directly give url as src of JavaScript.
e.g.
<script src="some_url_path_/global.js" type="text/javascript"></script>
To share a class I recommend to use web services rather to allow access to class file source.
Javascript files and images can be hosted in a common location - for standard javascript files (jquery library etc.) it's a good idea to use a CDN as Kieron points out - you get a lot of benefits there.
For other content files you can just put them on a common url that is accessed by both sites - e.g. with 2 sites on different urls:
http://site1.somedomain.com/default.aspx
http://site2.somedomain.com/default.aspx
they can both use content from a common location like:
http://commoncontent.somedomain.com/images/bigimage1.jpg
http://commoncontent.somedomain.com/scripts/customjavascript1.js
The same thing works with virtual directories instead of a fqdn too of course.
Related
I have a webpage(say http://www.example1.com) which contains an anchor tag that points to a different website(say http://www.example2.com). I have to test it on testing servers (for which the urls are www.example1-test.com and example2-test.com) before publishing it. When the code is on example1-test.com then the link should point to example2-test.com and when it is on example1.com then it should point to example2.com.
But I cannot use JavaScript or manually change code while switching the servers. I can only use html and css. Is there a way to do this?
I know this is a weird question and css is used for styling and not to write logic but I cannot use JavaScript for this unless there is a way to enable JavaScript in the browser through some html tags.(say some meta tags,etc.)
I can put in two separate link pointing to respective example1.com and example2.com and do a show/hide depending on the environment but then the question is where do I put these conditions (cannot use JavaScript).
For testing I used to change my hosts file and redirect live domains to my test IPs on the internal network. I follow links and my browser thinks I'm hitting example2.com but actually my hosts file is pointing to the IP of example2-test.com and I see new functionality. When both go live I know visitors experience exactly what I've just tested but using live DNS.
Nowadays URLs in my applications are generated using routes and environments. I can specifically tell my framework that in development environments I expect URLs to be generated with XYZ base but behave differently in production.
Another option is Greasemonkey scripts. It is a browser plugin which executes scripts on command to manipulate pages, navigate, automate and more.
I can't think of a client-side way to achieve what you're looking for without the use of Javascript or browser plugins.
I noticed that some programmers use two ways of calling .js file.
1- this way where you must have the js file:
<script src="lib/jquery.js" type="text/javascript"></script>
2- and this way where you don't need the js file :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
and I want to know which way is better to use.
The first option is using local files, The second option is using a CDN.
A CDN is a group of fast servers with several common use files. Is really useful to save bandwidth and speed up the download of your site.
However, as was mentioned, you would have problems if the end user don't have access to internet.
Basically, if you expect your application to be executed always online, a CDN is a great option. If you are developing an app that could be executed offline (like a CRM for a company) then it would be better to be served using local files.
If the CDN is down, then your website will be broke. But is more likely that your website is down than the CDN.
Depends.
Method #1 means you have a local copy of the file -- you don't need to rely on an existing path to the internet (from an intranet behind a firewall, spotty internet service, etc). You take care of any caching, and making sure the file exists.
Method #2 may give you a fast planet-wide content-delivery-network (CDN).
I have, and will continue to use both methods... but #2 is easier.
I am working on an enterprise application development in ASP.NET MVC3. Of-course I have different master layouts and multiple views.
My concerns
Including all js/css files in master layout might affect the performance of the page
Including the files in views (where it is required) are creating duplicate references (kick-off jquery/other libraries)
More the references, the more the back&forth requests between client and server - which in turn affect the performance of the output page
My Thoughts
Create a custom list of required resources and store it in ViewBag. Let the master layout refer this object to include the js/css files
Or add the link referring an action with some key (an unique value to identify the page being rendered) and dynamically generate an output with all required resources as a single response. And cache the output (inmem/staticfile) with the unique key for succeeding requests. A kind of custom resource bundling.
Please share your ideas, any thoughts and suggestions are welcome!
EDIT: Sep.17.2012
Below answers are more talking about optimization techniques in web application development world - appreciating those answers.
I would like to discuss from an architectural perspective, focusing on creating a dynamic resource collection required by the page being rendered.
For example, in specific views I would like to use jQuery UI which requires jquery-ui-1.8.11.min.js, and in certain views I would like to use MVC3 ajax which requires MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js
I don't want to include permanent reference in master layout, which will result in loading these js for all views. Rather I would like to include the js files dynamic during runtime.
Hope this might have added clarity!
Thanks for the help - Vinod
You need to think about reducing your download size first:
putting all your js and css into as few files as possible. This is because a client can only open 2 HTTP channels (most browsers now support more, info here) at any one time, all file downloads after this are queued until the previous ones finish downloading.
minify your js and css.
Once you've got this down to a reasonable size then you can think about the above. You want to download, the smallest amount of content upfront, so in the master. This will improve performance because then the client can cache it. Caching is a good thing, this stops the client having to request the js and css every time they visit a page on your site.
You might also want to think about applying HTTP expiry headers.
Yahoo do a good site on lots of these ideas: http://developer.yahoo.com/performance/rules.html
Also don't put your js in the viewbag. This is unnecessary overhead and load on the server. Just add a reference in your pages!
MVC4 now supports bundling
Is it possible to share stylesheets and javascript files between projects in the same visual studio solution. I want to create sort of a base for all my commonly used scripts and stylesheets. So that i can only reference them.
You will have to host those files on a web server in order to access them. Just putting them inside a class library that is part of the solution won't make them available to the web project. You could create a CDN in your own network where you will host common static files (js, css, images, ...) that can be reused between multiple web applications.
In order to reference them in your project you need to use their absolute url:
<script type="text/javascript" src="http://cdn.mycompany.com/js/foo.js"></script>
Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.