A while ago I was using TypeScript with these to help with intellisense and typing issues across the libraries and sites I worked on. I often find myself introducing whatever team I’m on to these technologies in one way or another. I’ve been working with the combination of ASP.NET Core, formerly ASP.NET 5, and Aurelia with TypeScript and Web Components.
I start with the yoeman generator for ASP.NET and add the pieces as I go. I use ASP.NET MVC for the API and plain old HTML and TypeScript for the UI. The client tool chain consists of the usual npm, jspm, and gulp. When the new ASP.NET bits are done I’ll make a template for all this and post it to github. In the meantime I’m considering doing a short video or slide deck walking through the setup if anyone is interested.
There are a lot of tools out there and others have posted lists that are handy. I’m going to put my list of common tools here and try to keep it updated every now and then for my own use as well as anyone else who may like to reference it. Feel free to send me more to add to the list.
Code & Text Editors
Visual Studio Extensions
- Web front end (static HTML)
- UI views, scripts, and related image files
- Localized strings as JSON files
- Middle tier (WebAPI/SignalR)
- Back end (database/web services)
So, to explain a little about this layout… The front end is all static. The files may be generated by a compiler or parser but upon publish they are static and require no server processing. This allows one to put these files into a CDN whether it is Azure or Amazon for massive scale and economy. Having the localization files as static JSON allows them to be packaged up with the front end and sent along with it. Depending on the configuration and build process these files could even be combined and minified further.
The middle tier is your standard WebAPI and/or SignalR server side code layer hosted on a standard ASP.NET server, usually Azure Web Sites in my case. This tier is basically an API that provides the site with any dynamic actions and information it needs.
Finally, the back end consists of a database used by the middle tier, usually a SQL server of some kind, and any external web services needed by the middle tier. You could lump the external web services into the middle tier but I prefer to think of them as something separate for the sake of organization.
There are some interesting issues you run into when implementing this pattern, including how to handle authorization and security trimming. I generally move the navigation page list into a JSON object that can be generated by the API. In this manner you avoid exposing all your pages to the client even though the templates for those pages may exist in your CDN as public files. All of the security should be enforced on the middle tier so that users cannot perform actions they are not supposed to be allowed to do.
I've found that this model is fast and performs well under load when done properly. The trick is keeping it simple while utilizing all the tooling available to generate the published result. If anyone is interested I could go into more detail about that.
I use ELMAH for error handling on a lot of my projects and recently started using FogBugz again after a brief hiatus. The only problem was that to use FogBugz with BugzScout I had to put code in my applications when I already had ELMAH running. I thought that wasn’t very elegant so I grabbed the ELMAH source and the BugzScout source and hacked together a module for ELMAH that will submit to FogBugz. Please note that the formatting needs work as it submits a bunch of HTML at the moment, which FogBugz is interpreting as plain text. Once I get that fixed I’ll post an update or feel free to send me one if you’re ambitious.
I’ve linked the sample files above if you care to look. Just add these to the ELMAH project and use the custom configuration section…
6: userName="John Doe"
And you have to add the config section to the top…
1: <section name="errorFogBugz" requirePermission="false" type="Elmah.ErrorFogBugzSectionHandler, Elmah"/>
Finally you add the module to your modules sections…
2: <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah"/>
3: <add name="ErrorLog" type="Elmah.ErrorLogModule, Elmah"/>
4: <add name="MsAjaxDeltaErrorLog" type="Elmah.MsAjaxDeltaErrorLogModule, Elmah"/>
5: <add name="ErrorTweet" type="Elmah.ErrorTweetModule, Elmah"/>
6: <add name="ErrorFilter" type="Elmah.ErrorFilterModule, Elmah"/>
7: <add name="ErrorFogBugz" type="Elmah.ErrorFogBugzModule, Elmah"/>
8: <!--<add name="FixIIS5xWildcardMapping" type="Elmah.FixIIS5xWildcardMappingModule, Elmah"/>-->
or for IIS7 use this one…
2: <validation validateIntegratedModeConfiguration="false"/>
3: <modules runAllManagedModulesForAllRequests="true">
4: <add name="ErrorMail" preCondition="managedHandler" type="Elmah.ErrorMailModule, Elmah"/>
5: <add name="ErrorLog" preCondition="managedHandler" type="Elmah.ErrorLogModule, Elmah"/>
6: <add name="MsAjaxDeltaErrorLog" preCondition="managedHandler" type="Elmah.MsAjaxDeltaErrorLogModule, Elmah"/>
7: <add name="ErrorTweet" preCondition="managedHandler" type="Elmah.ErrorTweetModule, Elmah"/>
8: <add name="ErrorFilter" preCondition="managedHandler" type="Elmah.ErrorFilterModule, Elmah"/>
9: <add name="ErrorFogBugz" preCondition="managedHandler" type="Elmah.ErrorFogBugzModule, Elmah"/>
12: <add name="Elmah" preCondition="integratedMode" verb="POST,GET,HEAD" path="elmah.axd" type="Elmah.ErrorLogPageFactory, Elmah"/>
I hope that someone finds this useful. If there is interest I may package these as a companion library for ELMAH or contribute them to the project.