I am trying to refactor my code by migrating a "Web User Control" which has become quite complex into a separate standalone "Server Control" project. Moreover, the control also has some javascript logic inside it.
So, I would like to get some advice on :
How and where to put (migrate) the existing javascript logic from the Web User Control?
How to logically and cleanly separate existing javascript for ASP.net pages? Any directory structure suggestion will be highly appreciated.
Please bear with me because I am a very beginner.
Kind Regrads
The answer to this question is long, complicated, and varies from case to case. Still, having worked on codebases like this, here are a few things I learned:
write tests: essential to any legacy codebase. you must write tests before changing your code. If it's as tightly coupled as you say then not writing tests will give you hell 2 months into the project when small side effects of your changes begin to creep into production.
make javascript Unobtrusive: put all javascript into .js files, away from the server and away from the structure. this way you'll have one less thing to worry about when writing your server side code.
divide and conquer: this is probably the best tip anyone can give you. I once worked on a project that had 5000 code line files, with html, javascript and visual basic all mixed in one ugly mess. There I learned that by extracting these mega classes into 100-line files, I could better understand the intent of each block and easily find dupes.
have a BA handy: sometimes a whole web page / class is so mangled that rewriting portions of it is the only way to bring it back to a maintainable state. Having someone who can explain the business logic is really important especially under these circumstances since they can tell you what a class is supposed to do, why it does it, and what parts are obsolete. In this same project I was talking about, we started rewriting certain pages. Having a BA there with us allowed us to remove around 30% of the code, since it was obsolete. having 30% work to do on a 250 thousand line codebase is really useful, especially when a deadline is looming.
don't use web controls, use html / jquery and handlers: asp.net web controls don't play nice with web standards. They don't play nice with ajax and the don't play nice with SPA oriented approaches. If you're refactoring towards this, replace web controls with their html input equivalents, then use javascript (jQuery, ext/sencha, dojo, etc) to add the desired behaviour. on the server you can then write handlers that can be called with AJAX.
you shouldn't do it alone: you should be part of a team that has an architect that sets the roadmap and patterns to use; a frontend developer that knows javascript, html, and some .Net; a backend developer that knows c# and .Net, aswell as SQL Server or the database technology and a designer that knows html5 and css, so he can propose better ways of structuring the documents.
you probably shouldn't be doing this at all: if you're a beginner like you say you are you should be working on properly made web projects and learning how to write correct code. I certainly don't mean to insult you, but this is a monumental task, with lots of complexities and tons of pitfalls. These projects are normally apps developed by VB6 programmers getting onto the web bandwagon as quickly as possible in the beginning of the past decade, and as a result have lots of procedural code copied and pasted into multiple classes and quirky ways to do things, as if the coder knew not much about OOP (and let's face it, most VB devs don't or didn't at least when ASP.net first came around). The person in charge should be a seasoned ASP.Net developer with solid understanding of modern web technologies and desirably experience in bringing a legacy project up to speed with the latest industry standards.
Related
Probably sounds a bit stupid but I'm getting confused moving from Classic ASP to ASP.net.
After looking at the two different variants of the language, VB or C#, I have decided to go with C#. I was reading another StackOverflow answer that explained moving from VBScript to C# was easier to learn coming from VBScript.
So, I thought I'd hit W3schools to learn some basics on C# but got confused when I was given the options; Web Pages, MVC or Web Forms. Would somebody please explain the differences and which one would suit me best?
I have been coding in classic ASP/VBScript for many years, building all kinds of web application, some big, some small, and I do not want to use any software like Visual Studio, I just want to write code. I currently use Dreamweaver just for coding.
For a move from classic ASP to a .NET web platform, I would suggest going with ASP.NET/MVC.
WebForms are an abstraction that was created to make VB6 programmers comfortable with working on the web and it is a very leaky abstraction. It uses an event model and an idea of PostBacks that simply is not part of how the web really works. It has limitations that will not be familiar or make much sense at first (you can only have one form on a page, for example). As such MVC will be much more familiar.
I suggest that you watch this video by asp.net official developers as well as other relevant videos at the migrating section
Here's another good video produced to help programmers to choose the programming model (webforms, webpages or mvc, tools, etc)
Although w3schools has several good examples, it has several inconsistencies as well as incorrect information. Good alternatives for w3schools include MDN and IE Reference API (as the name implies, it's aimed to IE, and it's a good reference for when something works in other browsers but not in IE)
I have been asked to build a small web application for one of our clients and think it might be a good opportunity to try out a different framework for building web applications. Most of the applications we build are based on asp.net web forms and we have no yet done anything in an MVC architecture but I am eager to start building web applications in a more structured manner with the right tools.
I have been researching things like asp.net MVC and the likes which look quite good but I am wondering is there anything to be said for using something like the Google AngularJS Framework.
If possible I would still like to be able to write my server side code using c# and I have not researched AngularJS enough to know if this is even possible, although I assume I could use web services.
Has anyone had any experience with developing an app using AngularJS and if so, how was it and can you point me in the right direction for some tutorials?
We have been developing a port of a Swing fat-client application in AngularJS for the last couple of months and I think it is worth recommending. As far as learning resources go, check out the official project site (and be sure to read the tutorial) and the mailing list (the authors are very helpful).
The good stuff:
great testability
the two-way data binding is a very powerful feature, and it can be extremely helpful once you "get it"
IMO the AngularJS templates are much less brittle than using data- attributes or "special" CSS classes to mark elements that do something
it greatly reduces the need for using jquery plugins, because implementing that functionality in AngularJS is very easy (stuff like trees, tabs, accordions, etc.)
The bad stuff:
the learning curve seems pretty steep (I didn't have much of a problem, but I've seen some people struggle with it)
validations in AngularJS suck for the time being (a new implementation is on the way)
not all libraries/jquery plugins play nicely with Angular and usually you have to wrap them
the API is still being polished, so expect breaking changes (not a big problem with frequent releases and very good changelog, though)
performance is OK up until several thousand bindings on a page - most of the time this is not a limitation, but there are cases when this could be a problem.
Some pointers (if you ever decide to learn AngularJS):
some people really overuse widgets. In my experience, it's much better to use HTML "partials" + services, and only use widgets sporadically.
read source code of the library - it's the best place to learn stuff about angular
no DOM manipulation in services/controllers
if you use css classes to bind to events, you are doing it wrong
+1 #psycho's answer
AngularJS is client-side framework, so you can use any language on the server. It's designed to work well together with jQuery, with big emphasis on testing...
Here are some resources you might find useful:
TUTORIAL: http://docs.angularjs.org/#!/tutorial
API DOCS: http://docs.angularjs.org/#!/api
Developer Guide: http://docs.angularjs.org/#!/guide
Some example apps:
http://cburgdorf.github.com/angular-todo-app
http://www.fluid.ie/angular/calculate/
http://hookercookerman.github.com/angularjs-todos/
http://paul-hammant.github.com/StoryNavigator/navigator.html
Adapter for SenchaTouch: https://github.com/tigbro/sencha-touch-angular-adapter
Adapter for jQ Mobile: https://github.com/tigbro/jquery-mobile-angular-adapter
Feel free to ask any question on mailing list !
We are still in beta, but there are already several internal apps at Google, powered by AngularJS.
UPDATE (26th July 2012):
AngularJS v1.0 has been released.
For some public AngularJS-powered apps, check out http://builtwith.angularjs.org
IMHO developing something for a client which they may have difficulty supporting is unprofessional. You have to bear in mind that it will be difficult for your client to hire experienced Angular professionals, or train their own people to climb that "steep learning curve". Also, so far the documentation is not that great. Can you easily, in a few moments, answer the question, "How can I connect my shiny Angular app to my client's database?" Can your client sometime in the future easily grab some existing code and adapt it to their potential future needs? Be honest.
Compare plain old reliable LAMP development to Angular. For a "small web application" I really believe that a professional should give his client something maintainable and simple.
It's not to say that Angular isn't cool and sexy etc etc. But you have your client's future maintainability to think about in addition to the latest framework fad. Tread lightly would be my recommendation. Build your own website with Angular first and see what you think before you bestow your fabulous new skills on some trusting client.
I remember reading this SO thread couple of months back with same question in my mind, and we decided to go ahead with AngularJS, and the best decision we made on this project yet.
We are using AngularJS + ASP.NET MVC4 REST WebAPI.
Most probalbly after such a nice client side Javascript MVC framework, you would only need REST API layer interacting with Business Logic Layer at server side, and no MVC at server Side (ASP.NET MVC/Spring/Structs would feel like old memories).
You will find Angular-UI good add-on (esp ng-grid)
Soon after our project finishes, we might put some of our directive we wrote for open source world.
I have been researching the merits of AngularJS for many months to utilize as a core framework for product I am creating.
There are many aspects of AJS that make it worth while to learn. Yes there is a bit of a learning curve but its well worth it, especially if you wish to have more control on client side capability.
JQuery manipulates the DOM at run time, whereas AJS situates itself within the JS rendering lifecycle. This allows you to teach the DOM new tricks by creating your HTML Elements and Attributes. This is very, very powerful. As what you are able to do is introduce new Element behaviors for whatever your purpose and need. In AJS these custom HTML Attributes/Elements are called Directives. With the ability to craft your own Directives, you are able to build functionality that the current HTML doesn't have, pushing out capabilities that will run on all modern browsers now and into the future. Of the many approaches to inducing new behavior, AJS appears to be the safest direction one could take due to how they have chosen to implement it.
There is a huge performance gain over JQuery in AJS.
I love the simplicity of the two-way data binding, and the separation of concerns in their client side MVC pattern, which as pointed out above provide great testability. There scope object is the glue between the View (HTML), the Model (your Data) and your custom Controllers. The scope provides access to parent attributes and can be isolated at the sibling level, which is important for some reusable templates.
Templates can created and reused across your application which can contain 0 or more custom directives.
I have been using frameworks such as PRISM and MEF but I am finding that AJS has most of the same features that exist in these .NET frameworks but in a 29K footprint. There is rumors that they are working on lazy-loading which if provided will provide for some very interesting LOB type capabilities.
There are a number of UI frameworks that are being built for AJS but you can wrap any 3rd party control lib as needed, given a bit of effort. The trick is to ensure that when these 3rd party controls have changes induced, that you ensure AJS is properly notified using their apply method.
If you combine AJS with MS TypeScript within VS 2012, it provides the ability to manage and build some very impressive projects which will work well for those who are more comfortable with projects within VS.
There are a ton of other reasons to look at AJS, but if you are considering frameworks such as KnockOut I'd highly recommend AJS instead, regardless of it's perceived learning curve. Knockout is a library, AJS is a framework.
So far i think Google's Angular is great. Particular like the databinding and dependency injection.
For other js framework, there are knockout.js , backbone.js etc.
here are some posts:
angular.js example in backbone.js and/or knockout.js
I realise this post is old and you haven't gone with Angular, but I have a similar background to you, and I'm at the same point as you when asking the question.
So for the benefit of future visitors, some of the "risks" and links to resources I've found useful...
As many have already mentioned, Angular can have a very steep learning curve "Not only me, but co-workers that I consider highly smart developers, have struggled with some of the basic concepts" AngularJS is amazing... and hard as hell (link also has some good tutorial links which you asked for), and the version 2 stuff is looking more like java, which wouldn't have been a problem with your C# background, in my opinion Directives are hard enough to understand without verbose annotations and so on.
Angular performance can be poor in some cases, especially when using ng-repeat on a large number of elements Considering Speed and Slowness in AngularJS and Scaylr's experience. Other's have mentioned that performance really degrades over ~2000 bound elements, but that's usually met with arguments about how any app with more than that many elements probably isn't a good app. Keep it in mind though if you have legitimate use cases which call for many bound objects.
Angular is popular in terms of contributors, but ranks way way behind, say, jQuery in terms of production usage. Finding Angular developers might be tough, and jQuery or other developers converting have that "steep learning curve" to deal with.
Because Angular is young, you have no guarantee that it'll gain enough traction for your new Angular skills to be employable, and your new application not to quickly become legacy code
In v1.2 Angular doesn't support IE7 and below and v1.3 will drop IE8. For >=IE9, you need to follow some special coding practices.
The many javascript widgets, plugins and libraries which you might be used to using can't be used properly with Angular without heavy modification and people often suggest to re-write your component in Angular anyway.
UPDATE March 2014: after 2 months attempting to build a non-trivial densely functional one page app: There are many versions of Angular, and it's hard to say which is the best or most stable. It will depend on what you're coding with it. I'm finding some bugs Angular that are fixed by upgrading to a later version and others fixed by regressing to an earlier one. I've never had to go version shopping like this with jQuery.
UPDATE May 2014: Young, broken tools. Batarang is great until it doesn't work. I can't trust it until they fix this one.
And finally, the three best resources I've found for learning this stuff
Todd Motto's ultimate guide, and
UPDATE April 2014: this eBook chapter is quite amazing. I didn't buy the rest of the book yet, but the concept is fantastic
A full non-trivial app written in Angular (the accompanying book is OK, but doesn't really talk about the non-trivial app enough, as they appear to be saying advertised on their site)
I would say yes to this and check out John Papa's hottowel implementation as a way to do it.
I have inherited a really awful webforms application that is all kinds of bad--an untestable hairy mess of datasets and Page_Load events. Object oriented? N-tier? Unit tests? source control? All academic niceties to the team that built this mess.
It started life as an asp classic app, got mostly ported to VB.NET. Management denied my request to "nuke the entire site from orbit" and start over.
[Insert discourse on how ASP.NET MVC is absolutely, positively the only sane way to to .net websites anymore]
I know we might be able to interoperate between the legacy webforms and mvc. The question is, can we leave the legacy code in VB and build the new stuff in C#? I want to force the conversion to C# so the team doesn't fall back into bad habits.
Is there an MVC 2 Areas strategy that we could use here?
I'm not surprised the idea of a total rewrite was shot down. In general that is a recipe for delay and more bugs, regardless of how buggy the current project.
As far as I know it depends on the kind of project. If the existing project is a web application then no you can not. You could reference external libraries built in C# due to the CLR, however, you will not be able to bake C# code right into the project. This is done all the time and is mostly acceptable.
If the existing project is a web site project then I would have to say yes you can. However, you should not willingly do this unless there is an absolute need to do so. This is just asking for a difficult to maintain project and essentially requires you to do a lot of management in the web.config. I would strongly advise against doing this.
site reference: http://timheuer.com/blog/archive/2007/02/28/14002.aspx
I think you should be able to put this method together with those from the Google search mentioned by an earlier poster. Its going to take a bit of work though.
Additionally, coding practices are pretty much entirely unrelated to the language and from my experience working with mostly web forms and a little MVC, both have their time and place. I would look at laying down a set of practices that must be followed and enforce them using code reviews. Any new code you write would be kept clean and tight while you can also update old code to use standards.
I'm intrigued by your implication that the team's bad habits are caused by use of VB. There are plenty of bad habits in any language: the trick is not to switch language, but to learn good habits.
Anyone's post about this kind of thing is going to be opinion - and in my opinion you'd be better off teaching them to program properly in VB than making them learn a new language that they may struggle with. I've seen great, stable, maintainable VB code and I've seen horrendous, messy C# code. Try not associate a programming language with the quality of output of a team that happens to be using it.
(For the record, I develop in both VB and C# and would always choose C# given the choice - but not because I think I write better code in C#.)
It is possible, essentially by making all the views, etc. in the MVC project embeddable, adding it as a reference to the VB.Net project and then registering the routes.
It's a bit more complicated that that, Matt Honeycutt has a series of posts roughly outlining how he did it here:
http://trycatchfail.com/blog/post/ASPNET-MVC-3-Razor-C-and-VBNET-WebForms-A-Tale-of-Black-Magic-Voodoo.aspx
I'm done some WinForms work in C# but now moving to have to develop a web application front end in .NET (C#). I have experience developing web apps in Ruby on Rails (& a little with Java with JSP pages & struts mvc).
Should I jump straight to MVC framework? (as opposed to going ASP.net) That is from the point of view of future direction for Microsoft & as well ease in ramping up from myself.
Or if you like, given my experience to date, what would the pros/cons for me re MVC versus ASP.net?
thanks
Have look here it will help you Choosing the Right Programming Model
If you need to work really close to the wire then MVC is a great choice. By this I mean, if you need to have very tight controls over markup then; while acheivable with WebForms; it is much easier with MVC. This would be common for applications that are targeting a public (e.g. internet) audience which might have a richer graphical experience. In contrast, if you're developing an internal (e.g. intranet) business application where graphical presentation is not as critical, then WebForms has a lot of really nice enabling capabilities that will allow you to move more quickly.
Don't get me wrong, you can make WebForm applications look really really nice, but you give up some control over the markup.
Very often ViewState comes into this kind of discussion. MVC will not have any ViewState so the on-the-wire footprint will be much smaller which translates to speed and bandwidth cost savings at some point. On the downside, making stateful applications with MVC can be more painful. In contrast, WebForms will carry ViewState by default and are inherently more stateful. This is typically fine for internal applications. Keep in mind that ViewState does not have to be sent over the wire... there are extensions that allow you to offload that to a local cache. I'm not favoring one over the other, but you should be aware of what each can do in this regard.
If unit testing is important to you then MVC is also a much better choice, as this is easier as well. This is totally acheivable in WebForms but requires you pattern your code behind correctly.
Security is not a major factor since much of setting up the IPrinciple and IIdentity occure in the HTTP pipeline via HttpModules, so either will do in that regard.
Another major factor in making your choice relates to your skills relative to the time you have to deliver... If you're not used to working in a stateless manner or coding standard web technologies (e.g. html, css, jquery, etc...) MVC will take you longer to do very basic things. With that said, once in place it will likely be cleaner, smaller, more testable, and faster. If you need to move very quickly there is a lot you can do faster in WebForms. WebForms also does a lot of heavy lifting with respect to markup so there are a number of details you can leave to ASP.NET.
I actually use both for a variety of reasons, and MS has stated they plan to continue support and development for both.
MVC is part of ASP.NET. You must mean MVC vs Webform to which the answer would be: coming from a Winform background, you will find webform easier to use. For the future, go MVC.
I used to work on desktop applications too, and never really got into web stuff. I didnt even (gasp!) knew HTML (yeah, that was my programmers shame). In my new job we were going to start a new application using ASP.NET MVC and I gotta tell you, I love it. HOWEVER I think you should only go with MVC if you are or you count with someone with good html/css design skills.
Html is easy I know (I've learned it know!) but I think its kind of hard to make nice designs with html and css, specially if you suck at designing and you could probably do prettier stuff using webforms, which is a little bit easier/similar to winforms.
Also, if you go the MVC way make sure you have enough time to learn it, since you are going to go a little bit more low level, gonna have to learn more of the little details, like the actual difference between post/get and all that stuff that is pretty much completely hidden in webforms. I would really recommend getting a book, I used this one Pro Asp.net MVC and really liked it.
Finally, if your page is gonna have interactive bits, or ajax-y things, if you go the MVC way you are more likely gonna have to learn javascript/jQuery too. If you go the webforms you can use the included drag'n drop ajax controls.
Coming from Ruby on Rails or other MVC based frameworks ASP.NET MVC is almost the best choice. (ASP.NET MVC is actually only the "VC" part, so you have to add an ORM of your choice. EF and Linq to Sql is the Microsoft way, NHibernate or other ORM's are the other way. One good quick start project is S#arp Architecture which uses NHibernate as the "M" part, or you can check out WHCM, which is a project built on S#arp Architecture and other good frameworks (it is considered an ASP.NET MVC best-practices demo project) ). ASP.NET MVC uses almost nothing from the WebForms package (the only exception I found is the AntiForgeryToken), so you'll loose nothing if you're unfamiliar with ASP.NET WebForms.
But as you said you have also made console applications, which ASP.NET WebForms resemble more.
If your project is new, I advise you to use ASP.NET MVC. If your project clearly separates the M-V-C part (like in S#arp Architecture, where they reside in different assemblies), creating a console application that uses the same business logic shouldn't be too hard. If your current project is to port a WinForms application to the web, then it might be easier to use WebForms.
I should get familiar with the language before using "fancy" stuff like MVC, because it's just way easier to learn when you could almost think in the language (but it's not necessary).
Horses for courses. If you're slapping together a quick app for someone, web forms is probably quicker and easier.
If you're building a long running enterprise app MVC gives you better testability a SoC.
I am building a prototype for a web-based application and was considering building the front-end in HTML, which can then be reused later for the actual application. I had done a Flash-based prototype earlier, which embedded the .swf into a C# executable. Flash made for rapid turnaround time while the Windows application provided unlimited access to fancy API's for DB access and sound.
I want to consider something similar for this one too. Does this approach make sense? I am particularly concerned about the way the HTML would communicate with the container app. From what I understand out of preliminary research, it would be only through JavaScript, which might quickly get unwieldy. This is especially so because unlike the Flash-based prototype which implemented a lot of its functionality in the .swf, the HTML UI will depend entirely upon the shell to maintain state. Also, I don't need anything more than access to a database. So a desktop application might be overkill.
Another alternative that comes to mind is to build the prototype using PHP and deploy it with a portable server stack such as Server2Go or XAMPP. But I've never done something like this before. Anybody here shed some light on drawbacks of this approach?
The key requirement is rapid iterations of the UI, reusable front-end code and simplified deployment without any installations or configuration.
Some of the best programming advice I've seen came from Code Complete, and was along the lines of, "evolutionary prototypes are fine things, and throwaway prototypes are fine things, but you run into trouble when you try to make one from the other." That is, know which type of prototype you're developing, and respect it. If you're developing a throwaway prototype, don't permit yourself to use any of it, however tempting it may be, in the production system. And if you're developing an evolutionary prototype - one intended to become the production system - don't compromise quality in any way.
It sounds like you're trying to get both, the rapid development of a throwaway and the reusability of an evolutionary prototype - and you can't. Make up your mind, and stand by it. You can't have your cake and eat it, too.
I think you off to the wrong start, here. Why would you want your prototype to be fully functional? A prototype is intended to be throw-away and to help flesh out requirements and UI. If you need full functionality, why not just skip to the final product? If prototyping is really something you want to do, I suggest looking into a specialized prototyping tool.
Are you prototyping the user interface for a customer? If you are, consider something less unwieldy like paper prototypes or presentation software (like PowerPoint) until you get the UI nailed down. If you can establish the UI and are clear about the customer's requirements, you can then develop the application in whatever the actual platform is going to be with a clear model in mind.
In my current project, I prototyped the UI in PowerPoint first. In a subsequent iteration, I used static web pages and some jQuery plugins to simulate actual user interaction. That proved to be very effective in demonstrating the interface, and I didn't have to build the application first.
I would join in on folks suggesting paper prototyping as the "idea", but not necessarily the implementation. The biggest point here is that tools such as HTML or Flash let you get "bogged down" in the details - what does this color look like? What's the text on this thing? Lots of time can pass by that way. Instead, what you should be focusing on is user flows.
One tool that keeps the spirit of paper prototyping without all the "paper" drawbacks is Balsamiq: http://www.balsamiq.com/demos/mockups/Mockups.html. It was covered by Jeff and Joel in one of the Stack Overflow podcasts; I've been using it for my own projects for a while. It's freeware, and it does its job magnificently.
If you know C# then another option you can look at is Silverlight. You can then leverage your knowledge of C# and/or JavaScript and interact with a rich object model.
Would that do what you are looking for? The installation would be minimal on the part of the client - download and install the Silverlight plugin
If prototyping is something you truly wish to accomplish here, paper and pencil will be your best friends. You can draw out as many iterations as necessary. While none of this is ultimately useful later on once you begin coding, it is as quick and rapid is it goes.
As mentioned previously, there are many prototyping tools which have a bit of a learning curve, but an alternative to consider would be using a framework such as CakePHP or Ruby on Rails which make for fast application logic and leave customizing the front end being the primary hard work left. And plus, you're left with a mostly functional application when you're done with your prototyping which can be tweaked as needed.
In either scenario, you're paying with your time either upfront (in the case with learning a new framework), of over time in payments (with the case of prototyping on paper or coding by hand).