For my final of 3 presentations at DevConnections Orlando is about building a hugely performant web application with html5 storage.  The app we built was a simple photo viewer that let you first look at hour images on line, then view them being pulled from local storage.  Here are a couple screen shots of what we built:

And, here is the Visual Studio 2010 Project File:

To build fully-featured web applications that support complex interaction in a reasonable amount of time requires a high-end JavaScript library. Someday, maybe JQueryUI will be good for this, but for now, the choices are few and include ExtJS, Dojo, YUI and a handful of others. This session will use ExtJS as the example. We will use Microsoft’s ASP.NET MVC as the data / CRUD layer and from that, we will build a typical LOB (line of business) application using complex UI elements. Those elements include layout managers, data grids, extensive validation, spinner controls and other advanced UI features. To get an idea of what I’m talking about, spend five minutes looking at the examples on the ExtJS web site demonstrating these advanced web UI features http://www.sencha.com/products/js/. You will be convinced that spending hundreds of hours trying to build something not nearly as well done as this is a waste of time when there are such excellent libraries already built for you.

The source attached below for my demos.

Final ExtJS4 JavaScript (that didn’t quite work, but working now)

// Load dependencies
Ext.require([
    'Ext.data.*',
    'Ext.button.*',
    'Ext.form.*'
]);

Ext.onReady(function () {

    // Date renderer
    var dateConvert = function (val, record) {
        if (val.split('(').length == 2) {
            var dateObj = new Date(parseInt(val.substr(6)));
            return Ext.util.Date.format(dateObj, 'm/d/Y');
        } else {
            return val;
        }

    }

    Ext.regModel('Users', {

        fields: [
            { name: 'Id', type: 'int' },
            { name: 'Username' },
            { name: 'CreationDate' },
            { name: 'FirstName' },
            { name: 'LastName' },
            { name: 'PlanExpirationDate' }
        ],
        // Proxy
        proxy: {
            type: 'ajax',
            url: '/Users/JsonData',
            api: {
                read :    '/Users/JsonData',
                create :  '/Users/Create',
                update :    '/Users/Edit',
                destroy : '/Users/Delete'
            },
            // Json Reader
            reader: {
                type: 'json',
                idProperty: 'Id',
                totalProperty: 'total',
                root: 'data'
            },
            writer: {
                type: 'json',
                encode: false,
                listful: true,
                writeAllFields: true
            },
            headers: { 'Content-Type': 'application/json; charset=UTF-8' }                    
        }

    });

    var usersStore = new Ext.data.Store({
        model: 'Users',
        autoLoad: true,
        pageSize: 10
    });

    

    var gridForm = Ext.create('Ext.form.FormPanel', {
        id: 'userFormPanel',
        frame: true,
        title: 'Users Data',
        store: usersStore,
        bodyPadding: 5,
        width: 910,
        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },

        items: [{
            columnWidth: 0.65,
            xtype: 'gridpanel',
            id: 'usersGrid',
            store: usersStore,
            height: 410,
            title: 'Users',

            headers: [
        {
            text: 'User Name',
            flex: 1,
            sortable: true,
            dataIndex: 'Username'
        },
        {
            text: 'CreationDate',
            width: 100,
            sortable: true,
            renderer: dateConvert,
            dataIndex: 'CreationDate'
        },
        {
            text: 'First Name',
            width: 100,
            sortable: true,
            dataIndex: 'FirstName'
        },
        {
            text: 'Last Name',
            width: 100,
            sortable: true,
            dataIndex: 'LastName'
        },
        {
            text: 'Plan Expiration Date',
            width: 120,
            sortable: true,
            renderer: dateConvert,
            dataIndex: 'PlanExpirationDate'
        }
    ],

    listeners: {
        selectionchange: function (model, records) {
            if (records[0]) {
                var recordToLoad = {
                    Username: records[0].data.Username,
                    CreationDate: dateConvert(records[0].data.CreationDate),
                    FirstName: records[0].data.FirstName,
                    LastName: records[0].data.LastName,
                    PlanExpirationDate: dateConvert(records[0].data.PlanExpirationDate)
                }
                this.up('form').getForm().setValues(recordToLoad);
            }
        }
    },
    bbar: new Ext.PagingToolbar({
        store: usersStore
    })
        }, {
            columnWidth: 0.35,
            margin: '0 0 0 10',
            bodyStyle: {
                margin: '4px'
            },
            xtype: 'form',
            id: 'userForm',
            title: 'Add / Edit User Details',
            defaults: {
                width: 260,
                labelWidth: 120,
                margin: '7px'
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'User Name',
                name: 'Username'
            }, {
                xtype: 'datefield',
                fieldLabel: 'Creation Date',
                name: 'CreationDate'
            }, {
                fieldLabel: 'First Name',
                name: 'FirstName'
            }, {
                fieldLabel: 'Last Name',
                name: 'LastName'
            }, {
                xtype: 'datefield',
                fieldLabel: 'Plan Expiration Date',
                name: 'PlanExpirationDate'
            }],
            buttons: [{
                text: 'Update Record',
                scale: 'medium',
                handler: function (btn, e) {
                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();
                    if (userSelectionModel.hasSelection()) {
                        // get the form
                        var formCmp = Ext.getCmp('userForm');
                        // get the form field values
                        var formValues = formCmp.getForm().getValues();
                        // get the selected record
                        var recordSelection = userSelectionModel.getLastSelected();
                        // update the record with the form fields
                        recordSelection.set(formValues)
                        // sync store
                        usersStore.sync();
                    }
                }
            }, {
                text: 'Add As New Record',
                scale: 'medium',
                handler: function (btn, e) {
                    // get the form
                    var formCmp = Ext.getCmp('userForm');
                    // get the form field values
                    var formValues = formCmp.getForm().getValues();
                    // add to the the store
                    usersStore.add(formValues);
                    // sync with the store
                    usersStore.sync();
                }
            }, {
                text: 'Delete Record',
                scale: 'medium',
                handler: function (btn, e) {
                    // get the user grid selection model
                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();
                    // check if there's a selection
                    if (userSelectionModel.hasSelection()) {
                        // remove the selected record
                        usersStore.remove(userSelectionModel.getLastSelected());
                        usersStore.sync();
                    }
                }
            }]
        }],
        renderTo: 'extjs-grid'
    });

});

The Presentation was broken down into three parts. 

Part 1

Created a windows razor project that cached in image on a web site using best practices for threading and locking.  The code and project to do this are below:

var downloadByteArray = HttpContext.Current.Cache[cacheName] as byte[];
 if (downloadByteArray == null)
 {
     // make sure multiple requestors are not filling up the cache
     lock (LockVal)
     {
         downloadByteArray = HttpContext.Current.Cache[cacheName] as byte[];
         if (downloadByteArray == null)
         {
             Thread.Sleep(sleep * 1000);

             string imageLocation = HttpContext.Current.Server.MapPath("~") + imageUrl;

             downloadByteArray = File.ReadAllBytes(imageLocation);
             if (cacheExpiresSeconds > 0)
             {
                 HttpContext.Current.Cache.Insert(cacheName, downloadByteArray,
                                                  null,
                                                  DateTime.Now.Add(new TimeSpan(0, 0, 0, cacheExpiresSeconds)),
                                                  TimeSpan.Zero, CacheItemPriority.NotRemovable, null);
                 CacheInsertCounter = 9999; // any touch of this increments the global counter
             }
         }
     }
 }

Part 2

Tips from Steve Souders

Part 3

Sprite Library from Microsoft Example: 

Not being a browser engineer, my knowledge is not the best in that area so probably the talk was a little dry.  We did spend a bunch of time talking about the the Sprite library just released to codeplex from the Asp.Net team.  That was  a great discussion!  I plan on talking more about that at my upcoming DevConnections talks in Orlando (very soon).  One interesting note was that there was a browser compatibility slide regarding sprites from Microsoft.  One of the attendees said “Peter, are you sure that Sprites are only supported on IE 8 and above?”.  I said I was sure that is what the document that I got from Microsoft said.  Well, I had several emails today with the Asp.Net team including the author of the document and though I don’t know the final answer, I’m sure that the Microsoft document was wrong on browser compatibility.  It seems that css and sprite support would work all the back to IE6.  When I know more, I’ll post a comment below with a link.  I’m sure Microsoft plans on updating that doc.

That’s it for now.  Below are some pictures from before the meeting.  I’d say that we had about 75 people in attendance.

Register Here:  http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=480&mid=49

When: 

Wednesday, 3/16/2011 at 6:30 PM

Where: 

Microsoft San Francisco Office, 835 Market Street, Suite 700

Event Description

All web developers need to know how to write web apps that give users great experience. In this presentation, Peter Kellner will talk first about the top 15 programming tips that you can use in your web site to make sure it’s as fast as it can be. Following Peter’s general discussion of client side optimization techniques, Doris Chen will talk about JavaScript best practices in web client development.

Many client side improvements can be implemented in under 10 minute. You will come away knowing a handful of tools you can use to analyze your web site as well as know what to do to make your web site perform faster. This presentation will focus on client site performance tips, that is things like cache headers, JavaScript optimizations, CDN’s and Sprite’s. JavaScript techniques such as clean separation of concerns, De-referencing objects, and thinking asynchronous when working with objects will be discussed. Server technologies and optimizations will be discussed, but the focus will be on what it takes to make your browser deliver your web application faster.

Agenda

• 6:00 doors open (pizza and drinks)
• 6:10 – 6:25 Lightning talks
• 6:30 announcements
• 6:45 – 8:15 presentation
• 8:15 – 8:30 raffle

Presenter’s Bio

Peter Kellner, a Microsoft ASP.NET MVP since 2007, is founder and president of ConnectionRoad, and a seasoned software professional specializing in high quality, scalable and extensible .Net web applications. His experience includes building and leading engineering teams both on and off shore. When not working, Peter spends most his free time biking. He has ridden his bike across the globe. Most recently he and his wife, Tammy, rode across the U.S., from California to Georgia, in just 27 days.

Doris Chen is a Developer Evangelist at Microsoft for the Western region of the United States, specialized in web technologies (Ajax, jQuery, ASP.NET, and Java). Doris has over 13 years of experience in the software industry working in several open source web tier technologies, Java platform, .NET and distributed computing technologies. She has developed and delivered over 400 keynotes, technical sessions, code camps worldwide, published widely at numerous international conferences and user groups including Bay.Net, JavaOne, O’Reilly, SD Forum and worldwide User Groups. Doris works very closely to create and foster the community around NetBeans, Glassfish, and related technologies.

The computer steering committee took me to dinner before the presentation

Part of the group showed up on schedule, but quite a few wandered in. I actually heard people went out and got their friends. 

And finally, my slide deck

In this section, we will talk about what happens when the users presses the “Sessions” hyperlink from the speakers page.  If you remember from the last article, we used a special converter on the Speakers.xaml page and bound that to the hyperlink titled sessions as shown below.

When this link is clicked, the navigation created is as follows:

http://localhost:9951/Presentation1TestPage.aspx#/Sessions?SpeakerId=903

// Executes when the user navigates to this page.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    //Handle SpeakerId

    var qs = NavigationContext.QueryString;

    if (qs.ContainsKey("SpeakerId"))

    {

        this.sessionsOverviewDomainDataSource.FilterDescriptors =

            new FilterDescriptorCollection();

        this.sessionsOverviewDomainDataSource.FilterDescriptors.Add(

              new FilterDescriptor("AttendeeId",

                  FilterOperator.IsEqualTo, qs["SpeakerId"]));

    }

}

This simply adds a filter to the current DomainDataSource that filters the column AttendeeId with the passed in query parameter SpeakerId.

The resulting page looks as follows assuming Peter Kellner’s Session link was clicked.

The video referenced in this article goes into building this page in more details, but fundamentally, the major point is just the query parameter.

NOTE ADDED 1/25/2010 by PETER KELLNER:    Just finished 7 blog posts that each have video that basically follows was was done in the presentation.  They are linked here on this blog at:  http://peterkellner.net/category/ria-services/

I just volunteered to present at the next Bay.Net Meeting (San Francisco, at the Microsoft office) RIA Services in Silverlight 4 (Visual Studio 2010).  The original speaker couldn’t make it so this is a last minute thing.  I’m busy preparing an example of using the Silicon Valley Code Camp Session Listings as an example.  The example will hopefully including authentication (logging in and out), special admin access to certain functions, validation as well as other cool tricks.

RIA Services is an inspirational technology.  Let me show you why I think so!

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=411&mid=49

Here is the material for the first presentation:

Build Blazingly Fast ASP.NET Apps with 100% Clientside UI ExtJS

Intermediate

Need a web application that has the responsiveness and interactivity of a forms app but still looks and feels like a web? One of the best kept secrets (at least to the Microsoft community) is ExtJS. It’s a different paradigm then we are all use to, but the results are spectacular. Take a look at this url and you will see as well as learn how to do this yourself. The hardest part is shuttling the data back and forth. A lot of this session will be talking about how to do a real world app that does this. Once you go this way, you’ll be gone from serverside forms for almost ever.

Presentation Files Download

 

Building High Performance ASP.NET Web Applications

Intermediate

Topics will include appropriate use of Cache and Session State, as well as how and when to use them. Viewstate management and methods to minimize its use will be discussed. Code to pop up a warning when a threshold is met in development will be shown. When and how to take advantage of Server Farms will be discussed, as well as trouble shooting techniques to find problems. The evils of Server Affinity, as well as a common pattern for caching database queries will be shown to be wrong. Time permitting, we will talk about using Microsoft’s Ajax.asp.net with UpdatePanel and webservices and how these affect performance and scalability.

 

Presentation Files Download

My guess is we had about 50 people in the room.  I took a picture about 10 minutes before class started that I’m showing below.  I’m thinking a lot more showed up after the picture.  The guy in the second row mentioned that they should be taking a picture of me, but then, I was running out of prep time so I figured I better go with what I had.

One thing that came up often was how to interact with the ExtJS library.  I did talk a bunch about another open source project (Coolite) that has lots of asp.net stuff (custom controls) to help with that.  they wrap all the things you expect from asp.net like SqlDataSource,ObjectDataSource, etc.  Overall, it’s a great product and a huge help in learning ExtJS.

And, Here is the code:  (much of this code comes from adaptations of code I got at a ExtJS training class put on by ExtJS themselves.  BTW, it was an awesome class!)  

My Session which covers some basics of ExtJS (a rich JavaScript library) is:

Build a Rich JavaScript (with ExtJS) Applications for highly interactive Web Pages

If you’ve never seen anything done with pure JavaScript, take a look at the ExtJS demos.  Very impressive.  Just the demos got me hooked.

Looking forward to seeing lots of friends there.  BTW, nice job on the new web site!

June Meeting – Wednesday, June 25, 2008

Remember Our New Location:  835 Market Street, Suite 700.

Building High performance ASP.NET web applications – In this meeting, Peter Kellner will present on and discuss techniques and methodologies for developing highly performant and scalable web sites.

Topics will  include appropriate use of Cache and Session State, as well as how and when to use them.  Viewstate management and methods to minimize its use will be discussed.  Code to pop up a warning when a threshold is met in development will be shown.  When and how to take advantage of Server Farms will be discussed, as well as trouble shooting techniques to find problems. The evils of Server Affinity,  as well as a common pattern for caching database queries will be shown to be wrong.  Time permitting, we will talk about using Microsoft’s Ajax.asp.net with UpdatePanel and webservices and how these affect performance and scalability.

Below are pictures taken by Terry showing my solo performance.  No one got any questions right.  We were forced into a tie breaker.  The first tie breaking question (what color was Spok’s blood) was answered incorrectly.  The second question, what color was George Washington’s white horse was fortunately answered correctly.  Otherwise, I might still be there.

Seriously though, the purpose of this meeting place was to let people know about the MVP program.  Even though Microsoft heavily advertises the program in lots of technical magazines, lots of people don’t know about.  As an MVP for the past two years, I was a good person to talk about it.   It was fun for me to talk to lots of people who came by, both MVP’s as well as potential MVP’s.

Here are some fun pictures.

For those that have never been to a Silverlight Dev Camp (OK, maybe nobody has ever been to one), this is an event where people on he (b)leading edge get together and talk about how much fun they are having and share war stories.  For me, life couldn’t get any better.  Well, as one of the other moderators on asp.net forums recently pointed out to me… Get a life.

Just a week ago, it seemed there were only a couple dozen signups for this event which is being hosted by Microsoft in their nice San Francisco office in the Landmark Office Building (1 Market Street, Thanks Anand),  Somehow, now, there are over 100 people signed up.  I was talking to Kevin Marshall and Kurt Brockett (the main organizers) and I asked them how they rocketed attendance 5x in the last week.  They said things like Twitter and lots of
email.  Since most (OK all) of you know I’m organizing Silicon Valley’s second code camp at the end of October I was taking careful notes.  We currently have 260 signed up and I’m thinking… 260 x 5 = ???  Wow, I need to pay attention.  Then Joe Kleinschmidt, CTO of LeverageSoftware mentioned that he had announced about a week ago that he’d buy beer for everyone.

Where was I.  Oh yes, Sitting in a Starbucks in San Francisco waiting for day two to start, wondering why my notebook  is not charging, and of course just signed up for twitter.

So, last night was a big group presentation of Silverlight.  Today is lots of smaller discussions about Silverlight.  I’ve got one at 4PM where I’ll be talking about my latest Silverlight apps, Searchlight and DiggPopular.  It’s only 30 minutes and I could easily talk all day about it.  If you sign up for twitter, you can read about how I did!

Time to go, That’s about it for now besides some pictures.  Enjoy.

silverlightdevcamp

SilverlightDevCampSF is an upcoming gathering, inspired by BarCamp, to build Silverlight applications, It’s organized by volunteers & Silverlight enthusiasts, with attendance free to all. At this event, I will be presenting a 30 minute presentation on how to build animation into a Silverlight application. I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at

http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take
questions.

We have over 40 sessions signed up now and closing in on 700 attendees! Yee ha, this is getting fun. Please visit the site and if you have any feedback, please send it to me through the contact me page on this blog. Included in the 14 class rooms that are available to us, we plan on using 5 that are fully equipped with internet connected PC’s. Through these PC’s, I expect people to be constantly checking the schedules and adding feedback to classes they are attending. I’m currently having some trouble with printing the schedule through the sessions page, buth hopefully some one will come to my rescue soon on that.

I’ve been busy running SqlServer Tracing to Cache every database access I can possibly cache. The sessions page, which touches almost every table, does not create one database hit once the data is cached. My ISP (ultimate hosting) assures me we have a beefy server at the other end of the pipe. It’s a college campus on a weekend so the pipe from codecamp will be wide open. Hopefully all my hard work will run well when put to the test.

Wish us luck

In this session, we will build an updateable ObjectDataSource from scratch that accesses a sql database. There are many tricks to make an ObjectDataSource truly reusable. Most of the tricky attributes and how to use them will be presented.

Web Site With Full Description

http://pacwest.ms/codecamp/sea

Click
Here for Downloads to Code and Powerpoint Presentation

All Comments From Class Evaluations

Average score of 8.8 / 10.0>

Comments:

• I don’t really know how to evaluate this session. I will have to digest it for awhile. I suspect there is huge value hidden just beyond the horizon of my understanding.
• Really enjoyed this. This was the talk that I had marked on my schedule from early on. Well done. A bit soft spoken in the begining.
• I was 5 or so minutes late for this session – so my difficulties might well have been due to that. I had trouble at first following what was going on. In the end, I think Peter did a great job of limiting the material he presented, and of fleshing out and motivating the material he chose. I will definitely be able to give it a go at creating my own ODS as a result of this talk. Nice job!
• started in low key – one of the rare speaker one see how he thinks and can explain – NOT monkey see MONKEY do- MUST be pedagog in his real life – but at the end we had solid understanding of ObjectDataSource.