Scripts management in ASP.NET MVC - javascript

I'm building the ASP.NET MVC application containing widgets - user can define in the administration panel which widgets (which are being in fact partial views) will be used on page. Each widget has references to jquery library which is common for all widgets but also to jsquery plugin file which contains the logic specified for particular widget.
The problem which I found is to load efficiently only the scripts needed on the page (based on the user defined set of widgets) and minify them in one scripts.min.js file.
The build in MVC bundling allows me to define some sets of scripts, by the problem is that I don't know the exact set of widgets and I don't like to list all possible combination, I need to do it dynamically (on server side - from the perspective of performance), based on user choice.
There are Require.js library, but it will do everything on user side, and there will be many requests for each one jquery file and an the end the combination of everything into one file.
Do you have any ideas, how to make this working in efficient way?

Related

Grabbing HTML from another page

I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.

Is Single page application just one page using for entire web application?

I'm learning about single page application and after read document itself
I wonder that single page application pattern is just one page(e.g: html page) in web application using knockout with external template?
I mean ( i'm using MVC ):
-mywebsite
+ some js files
+ some css files
+ index.html
+ controllers
+ models
I hope someone can explain for me more about this pattern.Thanks.
Yes, you generally have a single HTML page that acts as a "shell" that has views of information loaded into that "shell". The JavaScript files act as the medium to call out to get this data, parse the data and apply templates to the data. Models, controllers, etc. allow for a module approach to the JavaScript structure, as opposed to spaghetti JavaScript code. CSS serves the same purpose as usual.
In my opinion, it is what pure AJAX applications were intended to be about 10 years ago, where a single page would load and then only requests to the server or services would load data, only performing partial page updates instead of posting back to the server to render (or re-render) the page (like WebForms does).
UPDATE:
The Single Page Application: KnockoutJS template incorporates KnockoutJS, but there are other options as detailed in Know a library other than Knockout?, which enumerates the features of each template in a grid for easy viewing.
Actually you can separate your application in to set of html files and java script files. What Single page application supposed to have is do all the application stuff without refreshing the browser. You can lazy load your views (html) and JavaScript whenever you need . I think you can start with a template or sample to get the idea of it.
you can get more details from John Papa
Here are some frmameworks which supports SPA
http://durandaljs.com/
http://www.asp.net/single-page-application/overview/introduction/knockoutjs-template
A single page application typically provides a shell in the form of a single page that invokes ajax calls to provide functionality. The key idea is that the shell doesn't refresh as a full page, but rather the content is refreshed through ajax calls that target sub sections of the shell.
One benefit of this model is that users don't have to deal with the disruptive user experience of refreshing the entire page and losing client side state.
Knockout can certainly be used as part of your design, but it's not directly part of the pattern.

Merging HTML files in a SinglePage application

I'm developing pure JS + HTML application. To keep the code clean I would like to separate my application into the several html files (i.e. ClientView.html, HistoryView.html etc). Based on user actions one or another view (or several views) would be displayed. Each view is supposed to have an underlying code in a separate JS file.
What I really want to achieve is following:
Develop view as HTML page (do not use any kind of javascript templating)
Views and viewmodels are loaded on the fly (only loaded when needed)
Some way to control dependencies.
I would be very thankful if you advice me a good start for that, as I'm quite new to modern html applications development. I myself is from WPF world, and I've been working with MVVM applications for a very long time, probably I'm wrong trying to bring same experience to javascript development.
I've found several posts about "compiling" html - (HTML "compiler" / merging application), but I don't think that it is what I need.
p.s. In my project I'm very dependent from several features from Twitter Bootsrap (first of all from grid systems)
Use a master page which contains some div to make the layout. Use JQuery to dynamically load various pages and insert into the div in the master page as required.

Dynamically Created SPA using Durandal

For our single page app, instead of having a set of defined views and viewmodels that live on the server as .html and .js files, we need to build a system where the views and viewmodels are created in “real-time.”
This will be an intranet app and we want end-users to be able to define what they see and use in the app as they are using the app. For example, end-user A creates view1, view2, and view3, while end-user B chooses to create view4 and view5, and so forth. These views are then created in the browser session and saved somehow for the user for the next time they use the app.
They can name these views whatever they want (e.g., dashboard 1, plant view 2, etc.), and then they can select one or more “widgets” to be on each view. A “widget” would be a contain set of JavaScript/HTML/CSS code, similar to user controls in the web forms world, and would perform its specific function and be able to be draggable and resizable. Of course, all the widgets that the user has added to each view will be saved for subsequent uses.
So, each time end-user A opens the app, they’ll see their 3 views as tabs across the top (named whatever they named them when the views were configured) and they’ll be able to navigate to the view and see and interact with the widgets they chose on each view.
Our app will sort of be like Trello in which the views can be added, updated, deleted, etc. by the end-user and “widgets” can be added to the views dynamically, moved around, deleted, updated, etc., all in a dynamically created way.
In studying SPAs, the views and viewmodels are developed as actual physical files that live on the production web server and provide the functionality intended to all users. But, our SPA needs to be more dynamic in terms of what views/pages are available.
Can Durandal be used is this sort of scenario? If so, any guidance on how to do build such a thing?
Or, is this not possible with Durandal? If so, what’s a better path for us?
As a last resort, would we need to create some sort of html and JavaScript generator that will output files after the user has selected the configured options?
Or?????
Thanks for your help!
durandal is a framework for aiding in creating single page applications (SPAs). SPAs are essentially just a website that feels like a desktop application.
Your only limitations on what you can create are the limitations of the browser.
Anything you can build that runs in a browser.. can be used in durandal.
You can have multiple spas inside of 1 spa.
You can dynamically download css/html/js if you need too.
There are lots of options on how you can structure you application.
There's nothing stopping you doing this I think.
You can have flexible routing as you define the routes on Durandal start-up so you could use the saved view data to help construct this. But I have a feeling you basically want a shell that other mini applications sit in? Are your views/widgets completely separate to the main application? If so, you might not really need custom routing.
I was working on something similar. I was using iframes to host the applications and the user was able to move them around. I didn't get as far as persisting what the user had laid out though.

Managing view page scripts in ASP.NET MVC

I wanted to get your opinion about managing scripts in ASP .NET MVC. There are 2 problems I am particularly curious about:
Tracking script include dependencies of views
Managing and minifying view scripts
Just like in many projects my views are composed of several partial views and editor templates. I like to keep the scripting relating to these views in the same code entity e.g.
SigningKeysForm partial view should have its own JQuery/JQueryUI scripts.
Which means any view which renders this partial view should include JQuery/JQueryUI script files.
Also another issue is when a view is composed of several such partial views, it means the javascipt in the partial views will be in several locations in the generated html.
My current approach to these problems is exploiting the top down parsing of views in ASP .Net MVC.
For tackling first problem I define a HtmlHelper extension to include a script e.g.
<% Html.RequireScript(Scripts.JQuery); %>
This way in each partial view and view I explicitly call out which scripts are required. The implementation of this method is to create a HashSet on current HttpContext and add the required script there.
In my master page I have another HtmlHelper extension which checks the HttpContext and renders the script include tags e.g:
<%=Html.RenderScriptIncludeTags()%>
This way I can track the requirements of views and render only the required script includes.
For the view scripts I am employing a similar approach. I use a custom Asp .Net user control which instead of rendering its content stores the script content into a buffer on HttpContext e.g:
<mvc:script runat="server">
$(function(){
alert("Hello " + "<%=Model.Name%>");
});
</mvc:script>
Again in the Master view I have a HtmlHelper extension which minifies (if needed) the stored scripts and renders them e.g:
<%=Html.RenderScripts()%>
</body>
I think this works as a solution, but it requires the script includes and scripts to be in the bottom of the master page. This means the script includes are not in the head section.
I want to know if there are better ways to manage the script requirements and in view page scripts with ASP .NET MVC.
Have you thought about using an existing tool that does this sort of thing, like Cassette (previously called Knapsack)?
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
I haven't personally used it (yet), but it looks pretty good, and seems like it should do exactly what you need (and more). Worth noting there is a small cost for commercial use.
EDIT: Now released under MIT licence :)
Telerik has a script registrar utility that does exactly what you are doing.
http://www.telerik.com/help/aspnet-mvc/web-assets-working-with-javascript-web-assets.html
As a bonus, it also does compression.
Yes it renders the scripts at the bottom.
Personally I usually include a few important scripts on the top the usual way and the rest with the scriptregistrar. That way I can have some scripts available during the loading of the page.
The telerik script registrar is part of their MVC suite.
http://www.telerik.com/products/aspnet-mvc.aspx

Categories