So here is my scenario.
Im using ASP.NET MVC 3 along with HTML, CSS, JavaScript/JQuery to make a web application.
Im using Visual Studio 2010
We have already released the product (its in 1.0), however now that we are in "maintenance" mode for the project, I have a feeling that as the project has new features added, that it will be harder to maintain the set of constants between both the C# (ASP.NET MVC) and the JavaScript.
For example, in the JavaScript I would create a $.post and have it link to the MVC url Controller/Action and then I would pass in parameters { key1: value1, key2: value2}
The issue is that if the C# parameter names change or if the position of parameters in the signature change, I will only know at run-time that the JavaScript needs to be updated (im assuming that im a programmer that doesn't know the architecture well enough to do this before run time).
So my question is, how do you manage the JavaScript side more easily so that i can stay "in-sync" with changes made on the C# side. Can the compiler do this for me in some way, or is there a plug-in that can help me out?
Thanks.
Your question asks about syncing C# constants and JavaScript constants, but then also talks about parameter names and positions.
The positions of parameters matter less in the MVC world than the names, and I've not found a good way of keep those in sync short of extensive unit and integration testing. You are doing those tests, right? ;)
As far as actual constants and enums, I've taken to using T4 templates to generate both a .cs and a (namespaced) .js file for the constants/enums I need (in my case, out of a database, but could just as easily be anything else).
I can't think of any easy way, but here is something that may help. when I usually develop some website , first of all I try to write as least possible javascript code in views and have them all in .js file, this way you can be sure that you can reuse many codes and since all codes are pure javascript there won't be any problem you mentioned. I also keep the record of all actions with their controller and area name in database and use them for manage permissions and security issues. for your problem you can add all this method to database and later with a piece of code check if this method exist anymore.
adding to DB:(in base controller, so you don't need to do anything manually )
protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
var area = filterContext.RouteData.DataTokens["area"];
string areaName = area != null ? area.ToString() : "";
var controllerName = filterContext.ActionDescriptor.ControllerDescriptor.ControllerName;
string actionName = filterContext.ActionDescriptor.ActionName;
//Add to DB
base.OnActionExecuting(filterContext);
}
check if that exist:
bool exist = false;
try
{
HttpWebRequest request = (HttpWebRequest)System.Net.WebRequest.Create("http://www.example.com/image.jpg");
using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
{
exist = response.StatusCode == HttpStatusCode.OK;
}
}
catch
{
}
Your best option is integration tests. You'll be able to test exactly the actions your users would do. Seleno is a good option (it wraps Selenium) for writing integration tests.
It's worth doing. If you have good integration test coverage you'll run into fewer bugs in production.
Related
I need all your wisdom today.
So I work on a big legacy project at my company and I have to come up with a solution to share constantes between our back-end in PHP 5 (MVC architecture, no framework) and our front-end with JS (angularJS).
In our backend, we have classes that manage our entities, in which we define constantes we work with. These are constantes like char that we use to refer to different possible values of a field.
class Task {
const STATUS_TODO = 'T';
const STATUS_DONE = 'D';
}
So when we need to make a condition on these constants, we do like so :
if ( $variable === Entity::STATUS_TODO ) { //do something }
But we don't have such management in our front-end, so you often find conditions like :
if ( variable === 'T' ) { //do something }
Which is a terrible thing to do, we all know it.
The point would be to share constantes between the back and the front, so that if we need to change something or add a new constantes, we just have to do it in one place.
I know this is a pretty common problem in web development, and I was wondering how you guys would advise to solve it.
Thanks for your time, have a great day
If possible, collect your constants within special (abstract) classes within a central directory like app/Constants in PHP and src/constants in JS. It is then possible (though I never did that on my own) to create an update-script that will parse the constants from one project and sync them to the other. Both languages can be generated pretty easy so you can even approach a bi-directional solution.
Finally you could set up CI/GitHooks to execute the sync on every commit/push/merge.
In the past I ended up with copying the constants from the PHP project to the JS-Client and then re-format them for JS via RegEx.
our current project is in ASP.Net MVC with Razor.
We use ResX Files for a few thousend translations.
In C# and Asp.net Razor this is pretty easy with HTML:
<div>#Ressources.Local.Test</div>
Now when I wrote JavaScript I normaly did this within the cshtml files with razor like this:
<script>alert('#Ressources.Local.Test');</script>
Which works but seems a bit ugly...
A few weeks ago we starded with Typescript, and, of course excluding (nearly) all javascript code to ts-files.
The only solution we found here, to get the ressources from C# to Typescript is through a "hack":
We made a ressources.cshtml file in which we just include javascript variables:
var ressourceTest = "#Ressource.Local.Test";
We load this ressource.cshtml at first in our _layout.cshtml.
Additional, we have a self need a selfmade declarion for this variable to jump from javascript to typescript in our projectDeclarions.d.ts:
var ressourceTest:string;
And now we can use the ressource in our typescript file test.ts:
alert(ressourceTest);
As you can see it is a working "hack" or "workaround" but it seems to likly kill us for a few thousend ressources... It's handmade, the maintain duration and work is high...
Any better ideas?
I have seen a few good ideas around this.
You could supply an JSON endpoint in your MVC application to give you chunks of translations. You would decide how granular you want to make it, but you would essentially JSON serialize a translation, or set of translations and send it back. This would avoid stuffing a big view with hundreds of the things.
Another alternative is to place translations in the view to make them available, but contextually. So if you had a button that you are using to trigger some AJAX call to the server and you need to say "Update Worked" or "Update Failed" you could put the attributes inline...
<button ... data-msg-success="Saved OK" data-msg-failed="A problem occurred" />
And you could populate these attributes with your resources.
We use DNN and often need to pass a few context specific values (like page id or module-on-page-id) into an AngularJS app. We've developed our own conventions how to do this, but would like to hear from others how they approach this to find a best practice.
So basically the situation is that the server-page has information needed by the JS. Using WebAPI is not an option, as these values are known in the page, but not in a separate request. Things I've seen so far have been:
Use in-view-razor like href="#Tab.TabId/{{...}}" (I don't like this)
Place the values in the ng-init like ng-init="config = { prop1: '#Tab.TabId' }"
Create a separate <script> tag where we generate a module on the fly containing these values so angular.module("config", []).constant('prop1', '#Tab.TabId')
Create a json with razor in the page somewhere and inject all of it as a module into the app using a generic code which does the same as #3, just with cleaner code re-use.
I've seen all these and have also used all. Currently we avoid #1 as we believe it's not good to mix templating languages and because it doesn't allow externalizing parts of the view. So basically we use #2 as for quick-and-simple (and a bit dirty) + #3/#4 for larger projects.
Do you have a better way, or which way would you prefer?
We are using variant #4.
This has the advantage that the JSON defines the exact interface for the config needed by the JS module. And Razor is great to generate URLs using #Url.Action.
we use NewtonSoft and do JSONConvert.SerializeObject(ObjectName) and then pass it over as a Session from the controller and then use #Html.Raw(ObjectName) and its a JSON Object that can be utilized easily in javascript...
I have an ISAPI DLL, an add-on to IIS. I build the installer for it using WIX 3.0.
In the installer project, I have a number of custom actions implemented in Javascript. One of them, run at the initiation of the install, stops any IIS websites that are running. Another starts the IIS websites at the end of the install.
This stuff works, the CA's get invoked at the right times and under the right conditions. but the logic is naive. It stops all websites in the beginning (even if they are already stopped) and starts all websites at the end (even if they were previously stopped). This is obviously wrong.
What I'd like to do is keep track in the session of which websites required a stop at the beginning, and then, at the end, only try to restart those websites. Getting the state of a website is easy using the ServerState property on the CIM object. The question I have is, how should I store this information in the MSI session?
It's easy to stuff a single piece of information into a session Property, but what's the best way to store a set of N pieces of information, one for each website? In some cases there can be 1 website, in some cases, 51 websites.
I suppose I could use each distinct website name to create a distinct property name. Just not sure that is the best, most-efficient, most efficacious way to do things. Also, is it legal to use slashes in the name of an MSI Session property? (the website names will have slashes in them)
Suggestions?
You might want to check out:
VBScript (and Jscript) MSI CustomActions suck
C++ or C# is a much better choice. If your application already has dependencies on the framework then adding dependencies in your installer is a good logical choice. WiX has Deployment Tools Foundation ( DTF ) that has a custom action pattern that feels a lot jscript. You could then create a dictionary of websites and their run state and serialize it out to a single property. On the back side you could reconsitute that collection and then act upon it.
Not to mention the debugging story is MUCH better in DTF.
There's a simple solution. I was having a brain cramp.
All of the items I needed to store were strings - actually the names of websites that had been stopped during the installation. I just used the Javascript String.join method to create a single string, and the stuffed that into the session variable. Like this:
Session.Property("CA_STOPPEDSITES") = sitesThatWereStopped.join(",");
Then to retrieve that information later in another custom action, I do
var stoppedSites = Session.Property("CA_STOPPEDSITES");
if (stoppedSites != null) {
var sitesToStart = stoppedSites.split(",");
....
Simple, easy.
I have some experience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.
Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.
I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?
Thanks in advance.
My one big tip would modularize
In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.
var myProject = {};
myProject.form = function(p_name, p_method, p_action)
{
var name = p_name,
method = p_method,
action = p_action;
var addInput = function(p_input)
{
// etc...
}
return {
addInput: addInput,
name: name
};
}
myProject.input = function(p_name, p_type, p_value)
{
var name, method, value;
var setValue = function(p_value)
{
value = p_value;
return true;
}
return {
setValue: setValue,
name: name
};
}
// etc...
If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.
In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').
You may want to check out Backbone.js
Backbone supplies structure to
JavaScript-heavy applications by
providing models with key-value
binding and custom events, collections
with a rich API of enumerable
functions, views with declarative
event handling, and connects it all to
your existing application over a
RESTful JSON interface.
Grigory ,
Even i moved from a backend to UI few months back only follow this approach
read all the concepts of jquery
either from google or through some
book or through jquery
documentation.
follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
keep getting your code reviewed by experienced person who can guide you
post to stackoverflow if you get stuck anywhere.
as it is big project divide into mutiple files and use proper naming convintion.
please let me know if you need anything else
jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.
The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.
Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler
Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.
Have you consider checking out MooTools?
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.