Here is the design diagram:
Pure Javascript and HTML stuff wrapped in a SharePoint CEWP. The core component here is MyXslt transformer, a small Javascript library I released to transform the search service result (XML) into HTML elements. Below is a list of libraries I used:
jQuery | 1.5+ |
MyXslt | XSLT transformer that transforms the search service result XML directly into HTML elements |
jQuery UI | UI for dialogs |
QTip | jQuery plugin for tip style people's details |
Highlight | jQuery plugin for keyword highlighting |
MyImgScale | jQuery plugin for Image scaling |
The solution layout (for commercial reasons, the full source code is not published at this stage):
PeopleSearch
+---.hg
+---clientSideSolution
| +---cewp
| +---release
| +---standalone
| +---unitTest
| \---_layouts
| \---1033
| +---images
| +---js
| +---styles
| \---xslt
+---PeopleSearchWebpart
+---data
+---script
+---UnitTest
+---UserControlTest
+---WebTest
+---LoadTest
\---TestResults
+---.hg
+---clientSideSolution
| +---cewp
| +---release
| +---standalone
| +---unitTest
| \---_layouts
| \---1033
| +---images
| +---js
| +---styles
| \---xslt
+---PeopleSearchWebpart
+---data
+---script
+---UnitTest
+---UserControlTest
+---WebTest
+---LoadTest
\---TestResults
Another thing worth mention is that the load testing results (see above, using Visual Studio 2010's built-in load testing tool) showed the application was very responsive too.