Jay Kimble

Better JavaScript class generation

For years, I have been espousing how great Script# is. I often do an advanced MS ASP.NET Ajax client talk and end it with a Script# talk. Mainly because I think that the idea of learning the nuances of JavaScript OO techniques can be a little confusing. It’s really the challenge (All you need to do is search the archives of my blog and you’ll see my own confusion on this topic).

I think many web developers can wrap their heads around building the functionality, but making something private/public/static can get a little confusing. Especially if you are used to using something like C# or VB to do it.

Kevin “ByteMaster” Wolf and I have been talking about this. As a result of those talks I started playing with an idea of allowing developers create something that feels more like OO… Anyway, I have come up with a very alpha version.

A Better OO For JavaScript??

        1: compileClasses({    

       2:     testClass: {        

       3:         ctor: function() {            

       4:             // this is a test        

       5:         },        

       6:         private: {            

       7:             privateVar:1,            

       8:             privateMethd:function() {                

       9:                 // test method            

            }        

        },        

        public:{            

            // public stuff here            

            publicVar:"2"        

        },        

        static:{            

            //public statics            

            staticVar:"test"        

        }    

    },    

    testClass2: {        

        ctor: testFunc,        

        private: {            

            privateVar2:"2"        

        },        

        public:{            

            publicMethod:function() {                

                return true;            

            },            

            myVar:"this is a test",            

            dispose:function() {            

            }        

        },        

        implements:["Sys.IDisposable"]    

    }

});

Two classes are defined here.. the first one is the testClass. you will see that I’m creating a JSON object that has members called “ctor” (constructor), “private” (private members are contained within this object), “public” (public members are contained within this object),”static” (static public members are contained within this object), and “implements” (“array of interfaces that are implemented). I also will handle single inheritance using a member called “inherits.”

I think this makes class definition a little more straightforward for those of us who aren’t closure gurus, and it just might replace the pull of Script# on my life.

Right now this all works with a simple function that uses the MS Ajax Client framework. I’m considering doing this for other frameworks (so if you love some other framework, never fear I’m considering your framework as well).

I created a codeplex project which contains a single release that contains a simple ASP.NET project (could have been a simple html page too).. Don’t fret I expect the code to be a ton cleaner in the next version (I’m reading the MEAP version of John Resig’s Secrets of the JavaScript Ninja (and am learning a ton!)

Here’s the link: JsClassDef Project

Let me know what you think.. does it stink? is it cool? I know it ain’t Resig-like, but both Kevin and I think the simplified structure is nice and not un-JavaScript-like

posted @ Wednesday, June 24, 2009 5:15 PM | Feedback (2)

Using the Ajax control toolbox with jQuery (and ASP.NET MVC)

[Here’s a preview of something I’m going to show Thursday night at the Tampa MVC group.]

You may have thought that by jumping on ASP.NET MVC that you have to leave behind all the cool Ajax Control Toolbox controls.. or more than likely you realize that it’s possible to use them, but one has to be a “JavaScript Rocket Scientist” to use them..

It’s really not, but you do need a couple things to use them.. First of all go here (Bertrand Le Roy’s blog) and pick up the jQuery plugin that let’s you instantiate MS Ajax Behaviors. Next go here to the Ajax Control Toolbox project and get both the ScriptFilesOnly project and the Source code as with MVC you won’t need anything but the JS files since the source/DLLs are for WebForms-related controls, but the Source code contains the debug version of the JS files which we’ll need (By the way, 6 months from now that link to the Ajax Control Toolbox will be old so you’ll probably want to get the latest release, and not the release I pointed at).

Now let’s look at how you would wire up the DropShadow behavior (aka the DropShadow Extender). First of all, we need to figure out the references. Thanks to Visual Studio 2008, this is easy. Using the text editor/view of your choice, open up the DropShadowBehavior.Debug.js from the Source project (not the ScriptOnly zip); this is located under the zip file at .\AjaxControlToolkitSource\AjaxControlToolkit\DropShadow. When you open up the file you will see the following at the top of the file:

        1: /// <reference name="MicrosoftAjax.debug.js" />

       2: /// <reference name="MicrosoftAjaxTimer.debug.js" />

       3: /// <reference name="MicrosoftAjaxWebForms.debug.js" />

       4: /// <reference path="../ExtenderBase/BaseScripts.js" />

       5: /// <reference path="../Common/Common.js" />

       6: /// <reference path="../RoundedCorners/RoundedCornersBehavior.js" />

       7: /// <reference path="../Compat/Timer/Timer.js" />

The first 3 items are all the standard MS Ajax client library, so we’ll need to reference those. Now we need to look at the last 4 items. If you open up the files from the ScriptOnly zip file, you aren’t going to find these exact named files; to find the right file look at the end of the file name to find the actual file you need to reference. You’ll also need to reference jQuery and Bertrand Le Roy plugins. Here’s what the references look like:

       1: <script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>

       2: <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

       3: <script src="Scripts/JqueryPlugin/jquery.MicrosoftAjax.js" type="text/javascript"></script>

       4:  

       5: <script src="Scripts/MicrosoftAjaxTimer.js" type="text/javascript"></script>    

       6: <script src="Scripts/MicrosoftAjaxWebForms.js" type="text/javascript"></script>    

       7: <script src="Scripts/AjaxCT/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>

       8: <script src="Scripts/AjaxCT/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>

       9: <script src="Scripts/AjaxCT/AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" type="text/javascript"></script>

      10: <script src="Scripts/AjaxCT/AjaxControlToolkit.Compat.Timer.Timer.js" type="text/javascript"></script>

      11: <script src="Scripts/AjaxCT/AjaxControlToolkit.DropShadow.DropShadowBehavior.js" type="text/javascript"></script>

Here’s how we can then make every div with a “box” class to have a drop shadow:

       1: $().ready(function() {

       2:     $(".box").create(AjaxControlToolkit.DropShadowBehavior,

       3:             { 

       4:                 Opacity: 0.3,

       5:                 Rounded: false,

       6:                 TrackPosition: true,

       7:                 Width: 5

       8:             });

       9: });

See that JSON string (lines 3-8). If you look at those settings closely and compare them to the Ajax Control Toolbox documentation web site, you’ll see that these are the same settings that the extender uses which should make everything easy.

posted @ Tuesday, June 09, 2009 10:19 PM | Feedback (5)

Tampa ux… Meeting tomorrow night (Wed. June 10th, 2009).. 7:30pm

We are meeting at Buffalo Wild Wings across the street from our normal location tomorrow night. If you have had any complaints or suggestions about how we run Tampa UX, you need to be there. It’s an important meeting. We have some ideas that we want to run by you guys and see what you guys think.. We can’t do this without you!

posted @ Tuesday, June 09, 2009 9:20 AM | Feedback (0)

clientscript as the view controller

I’m finalizing my demos for next week’s talk at the Tampa ASP.NET MVC user group. I’m also in the midst of a deploy to our test servers of among other things a page that is an experimental architecture for me and my team. I was talking with my boss (Perry for those of you who attend Tampa UX). He had to do a little touch up on my quickly thrown together UI. He told me after playing with it that he really liked how it performs and even how it works. He thinks it’s a pretty good UX.

It’s actually very similar to DT Mini Mint (the app I’ll show at Tampa ASP.NET MVC user group next week).

The idea behind it is that the initial page is pushed out by the server and then additional data is retrieved on the fly via services (or JSON views in MVC) using JavaScript; additional functions like updates, deletes, adds, and more complex operations use the same mechanism.. so the page never refreshes once it has been rendered the first time (no, I’m not using any kind of partial view in any of my examples.. not that I couldn’t, but I don’t have that much to render in either app).

I jokingly referred to “Jay’s Dream Architecture” on Twitter, but was never really able to fully quantify what I was talking about. I likened it to MVC where the model was the service, and the controller was the JavaScript code..

After Christopher Bennage came to Tampa UX last month, we came up with a term (that I’m sure already existed): JavaScript View Controller (or JC). I loved annoying Christopher by saying I was going to attribute the MVCJC pattern to him (it seems he really loves the over use of letters in Pattern names <smile />). So remember he came up with the name for this pattern…

I’m finding more and more that I am building key pages (not all pages) that have everything they need to get started but then user interactions that would normally cause a Postback or a Ajax Postback (for an UpdatePanel), etc. I’m replacing with a client-side Ajax call to a service (for WebForms) or a client-side Ajax call to a controller action (for ASP.NET MVC). The end result is a fairly responsive UI that gives me options.

Back to my discussion with my boss today.. One of the things we realized is that side effect of this is there is an occasion where I have in memory the all the data in memory for render a client side paged grid (we’re talking at most 1000 rows of data… more like no more than 700 rows.. probably much smaller than that). We realized with this architecture and the rows in memory we could easily let the user filter the results client-side via textbox that updates the grid after filtering by the value in the test box.. without any hops back to the server)..

A similar thing for my ASP.NET MVC talk in 2 weeks is that I’m going to be replacing a standard select with an autocomplete text box that uses the original select’s options array as the source for the autocomplete suggestions text (you’ll be able to type something new and that new item will be dynamically added to the DB on save). The idea is that the client browser has pieces of data already and doesn’t need to retrieve it. There are also Jquery cache plugins that can help with this (something I won’t be showing)..

Bottom line is that the client is a for real place where we can write code and make the user’s experience better (I know I’ve not been one to totally go gaga in this arena in the past, but I’m starting to warm to it.. I think Jquery is the big reason why, too.. it’s very mature and really makes it easy to write complex interactions without writing tons of code..)

posted @ Monday, June 01, 2009 2:34 PM | Feedback (2)

TUX: Wednesday May 13th, 2009 with Christopher Bennage

Just a quick reminder that at Tampa UX tomorrow night we’ll have Christopher Bennage presenting. Shawn Cady will also be continuing his What is UX series. Doors open at 6:30pm with the speaking starting at 7pm.

Check out the web site for more detail.

posted @ Tuesday, May 12, 2009 9:50 AM | Feedback (0)

.NET’s Most Influential People in 2009

[5/7/09 Small update to add a requested link]

My family subscribes to Time Magazine ©. This past week we received their annual 100 “The World’s Top Influential People” issue. One of the things I like is that there are always people in these lists that you never heard of. Some are kind of lame in my opinions and then there are those exceptions who you look at the article and say “cool!” The on thing I noticed was there weren’t any developers on the list…

I have been thinking about who I would throw in a list of DotNet influentials. Now the catch is that I’m avoiding any of the very visible MS employees. So in other words no Phill Haack (he’d be on my big list though), no ScottGu, no Scott Hanselman, no Nikhil Kothari (although that one hurts), and no Brad Abrams… I’m also not putting folks like Jesse Liberty or Tim Heuer (again very painful… I met Jesse and he would definitely be in my top tier list..) Ok, so you get the picture.. .NET Influentials that aren’t known for the their MS contributions..

Here’s my 5 (I’m trying to pick less common guys for my list)

1) Miguel de Icaza
If you know who ScottGu is and you don’t know Miguel then shame on you! Seriously! Miguel is the guy who heads the mono project at Novell (that would be .NET on Linux, Mac, Sun Solaris, etc…) He’s more than important and wicked smart. I sat next to him at Mix and I swear my IQ jumps 5 points just from being near him (and keeping my mouth shut).. <grin /> Again, seriously very smart guy who does stuff that validates your choices as a VB/C# developers. (I suspect that Miguel might have been a bit obvious, but I can’t not mention him.. too important.. if you see him at a conference you should know who he is on sight… and I know that is not something that is not always true)

2) Bill Reiss, Chris Bennage, and Rob Eisenberg
If you want Silverlight to succeed as a platform then IMO the next installation point is games.. I installed WIndows XP on my son’s (crappy) PC because he wanted to play games and SL doesn’t run on Windows 98 (his old OS).. People install runtimes to play games.. Bill, Chris, and Rob set up a web site for Silverlight Games (silverlightarcade.com).. Bill is also the lead developer behind SilverSprite an XNA to Silverlight compatibility library for 2d XNA games.. (Rob and Chris are members of the team).

3) John Resig – JQuery Lead and JavaScript Guru
You may think this is a bit of a cheat, since John isn’t a .NET developer, but trust me his contribution to Ajax/Web 2.0 is HUGE. If you code in this space I really don’t need to say much more than this. JQuery is a deceptively simple solution to the problem of developing fancy ClientScript solutions. It is LINQ for JavaScript/DOM Scripting..

4) Rob Conery – the SubSonic guy
Ok, I know Rob is a bit of a cheat, but I’m not really interested in his ASP.NET MVC Contributions. I’ve recently reconnected with the SubSonic3 project. And let me tell you, it’s going to be huge. I think it’s better than both Entity Framework and Linq To SQL.. RIGHT NOW. All those years at CodeBetter.com I heard the ALT.NET guys talking about using the Repository pattern and I thought dang another layer… what’s wrong with these guys.. they overcomplicate everything (being transparent here…) So SubSonic has that pattern basically built in, and IT ROCKS! I love it.. I get it.. SubSonic was the project that converted me to ORM (I am a classic Stored Proc lover), and now to the repository pattern. Those wanted to improve the general quality of software should look at Rob’s example.. he’s projects make it easy to do.. AND then there’s his ASP/NET MVC contributions (did you hear Hanselman in his Nerd Dinner takl at MIX09 refer to the repository as a “Rob Conery Repository.” Rob’s the guy who built the html helper (whether you like or hate them).

5) Daniel Cazzulino – Moq and T4 Editor
Ok, I’m not entirely sure of Daniel’s involvement on the last one. I know he is huge in the Moq space. I know that Moq is my mocking library of choice (although I have that license of TypeMock I need to play with some more… and, yes, I do test and I do mock/double/isolate/etc.) Daniel always seems to have his head around something new (several years ago I saw him demo a project that he wrote while XML was alive that did XML Schema Validation… he’s definitely a mover and a shaker)..

Honorable mentions
I had trouble picking that last one.. Here’s the list of others that I thought about for that last spot.. Rory Becker (DxCore Community Plugins project.. I use CodeRush, so his work greatly affects me), Chad Myers (mainly for his work in the ALT.NET space and his ability to hold back his own zeal and be a really reasonable/truly evangelistic voice… he’s also involved with the BUFU MVC project), Billy Hollis (‘cause we like Billy around here at the runtime… ), Dave Hayden (of CodeBetter and numerous other fames), and Sean Chambers (whose blog and projects really do a good job of helping the recreational agilist).

The obvious ones not mentioned
There are a couple obvious names that didn’t get mentioned mainly because I don’t use their projects or just because the individual aren’t any less known than the MS guys I mentioned at the top of the article. Names like Ayende, Roy Osherove, Karl Franklin, Richard Campbell, Dino Esposito, Juval Loewy, and Rocky Lhotka just to name a few..

Did I miss anyone?
This was my list. you got your own you want to contribute.. Fire up your blog software and create a reply to this post on your blog.. we’ll compile a big list later on.. make sure there is a link back… if we get enough responses I’ll create a new post with links back to everyone’s blog (if someone with more readers than me posts then we’ll post the follow up on their blog)

So who do you think are the top 5 .NET Influencers for you, personally..

posted @ Wednesday, May 06, 2009 2:09 PM | Feedback (9)

The two ways one writes JavaScript code..

I think sometimes in the past I have been guilty in my presentation on JavaScript (JS) of not defining for myself who my audience is. Actually I know that I’ve done a poor job of this. You see there are 2 ways to write JavaScript code. Something that I knew, but recently realized the importance of.

OO Baby
If you are building your own controls then you are all about building things in an OO manner because it helps you in the areas on manageability. You may or may not be testing your components with automated/unit test tools and quality is everything.. as well as browser compatibility. When doing this one of the major struggles in your world will probably be in the area of memory leaks (I’ve joined the coalition to kill IE6).

To be honest this is probably not you, but if you’ve come to one of my deep JS talks… this is my target (and my cardinal sin… sorry)

The way you probably use JS
Ok, the most common use of JS and the way that I think most people use it is to do minimal coding to wire up some validation or to wire up some interaction or even to include some Web 2.0 control (aka “Ajax Control”). Your mantra is “I want to get in and out quickly so that I don’t have to touch JS more than I need to…" We usually don’t take the time to test this stuff because it feels more declarative and that seems trustworthy (although you could test it)

This is exactly why jQuery is so popular. Not only does encourage this type of thinking (and even embraces it), but the re-usable plugins take on this same sort of thinking (the show/hide methods come to mind). That and the sheer fluency of the library makes it easy to use. The selectors are really a variation of the same selectors that CSS uses so you are re-using knowledge that should already be in your head as a web-developer/designer..

Anyway, while JS OO is cool.. most of us work the other way (and even those of us who use JS OO do most of our JS coding using the latter method)

posted @ Tuesday, April 21, 2009 11:44 AM | Feedback (4)

What is UX (User Experience)?

(and should I be afraid to talk at a user group that has UX as its focus)..

UX or User Experience or User Experience Design is a pretty hot topic right now… well in some circles. In other circles its a feared topic. Oftentimes when I ask someone to speak at my group Tampa UX, I get a response like “Isn’t that just for designers? I’m a developer, you don’t really want me there.” I usually end up coaching the speaker on what they should and should not do. Along the way I find that I have to explain what I’m about to explain here.

There are 7 pieces to the puzzle that we think of at Tampa UX as the foundations of what we are about: Usable, Useful, Desirable, Valuable, Findable, Accessible, and Credible.

We felt that it was pretty important which is why we have an ongoing series by Shawn Cady covering each of these topics.

Some things to notice on that list.. Do you see the word “UI” there? Do you see the word “Design?” “Desirable” is actually the concept that heads in the direction of what we think of as classic design. One could also argue that there are facets of “Usable” could be described as “Design” as well, but be careful there, developers can make things “Usable” as well. Something else that can make something “Usable” is good training manuals or trainers.. it’s not always IT that makes our systems have good UX.

To me there are also some terms there that scream classic developer mindsets: “Useful” is the one that jumps at me. In fact at Hydrogen Media (you can search for them yourself) we had the classic Designers vs. Developers mindset (and I’m ashamed to have taken part in those debates). Designers will say “if its ugly no one will be drawn to it and use it in the first place".” Developers always say “if it’s just pretty pictures with no substance, no one will use it more than once.” As I look back on those times (10 years ago), I can now see that the answer lies in the fact that both are equally important, and there are these other things that just jump out at us.

For instance, “Accessible” talks about how easily it is to access features and it also has implications in the new accessibility Laws for handicap impaired persons using applications on the Internet. “Credible” talks about whether someone believes your product is something they can trust. “Valuable” talks about the fact that your system gives a value that is not easily attainable elsewhere (it has a “value” for the user… and they can weigh that value in their minds in terms of money). The difference “Valuable” and “Desirable” is that desirable talks about features or a system that is something that the user wants.. (it’s not about needs.. “the system does more than I need…” “it goes over the top in what it offers..”)

Giving a UX Talk
“So what kind of developer talks do you have at Tampa UX? I mean could I speak on forwarding WCF requests over SMTP?” The short answer to that is “NOOO!!” At Tampa UX we try to balance everything. We are actually in a rhythm where we have a light developer talk and a light designer talk. Ultimately our goal is to not bore one half of the audience during each talk. We would like to get to a place where we view every topic in light of the above list, but that’s just not always possible. In our group the technologies we seem to be focused on are Ajax With ASP.NET and Silverlight (although we have had the occasional XNA talk as well as we are looking at bringing in some WPF speakers as well). Believe it or not Silverlight and WPF (and Blend) are extremely hot with some designers right now..

posted @ Thursday, April 09, 2009 12:54 PM | Feedback (1)

TAMPA UX: Re-MIX this Wednesday (April 8th)

The flurry of activity from last month is over (March Madness??). Those of us who went to MIX09 have finally recovered, but we’re all still taking in the information that was presented. Look for MIX09 to have a deep impact on TUX.

Anyway, this week we’re going to go over the highlights of MIX. Shawn Cady, Jay Kimble, Nikita Polyakov, Bill Reiss, and Diane Leeper will each present a piece of it.

Here’s the hot topics of MIX09: Windows Mobile 6.5, Blend3, SketchView, Silverlight3, Super Preview, IE8. We’ll try to cover them all in one form or another.

As usual, we’ll have pizza and giveaways. The doors open at 6:30pm and things get started at 7:00pm.

posted @ Monday, April 06, 2009 1:49 PM | Feedback (0)

Theruntime.com is no more… Hello ALT.NET… NOT!

At MIX09, i got an opportunity to really sit down with a number of the folks in the ALT.NET community, most notably Christopher Bennage and Rob Eisenberg of Bluespire Consulting. They walked me through a few scenarios and showed me some code and how they do things.

It all is started to making sense. i have been quietly plugging/pushing ALT.NET methodologies/tools over the last 2 weeks at work… The final straw happened yesterday where i was espousing refactoring our current architecture to a new architecture using SOLID principles and BDD to help us get there when a blog entry from this very site was used against my arguments. After a careful re-read I decided that something had to be done about the content. The ideas herein are dangerous (especially in my own blog), and could mislead a young programmer away from certain forms of architecture that are absolutely essential. Since i control TRT, i’ll be shutting it down in the next week (i’ll give everyone over here a chance to relocate). As for me, i’ll possibly go back to CodeBetter.com since i am now a much better match for them (and i still have an account over there i think… will have to ask Brendan if it’s ok) if not i have friends at Los Techies, so i’m sure i’ll find a blog home for my new improved ALT.NET blog).

[Wow, I managed to fool both Dana and Dave… No worries, TRT crew.. we’re still here (and will continue to be who we are); this was all just a joke…]

posted @ Wednesday, April 01, 2009 7:35 AM | Feedback (4)

Jay Kimble

The Dev Theologian

Tag Cloud

Post Categories

Archives

Links

Friends of TRT