1. Extreme DNN Development
Techniques
Brad Schafer

2. The Schafer Group
 Interactive Agency / Digital Solutions
 Independent Specialists (DNN)
 “Hollywood Model” Project Teams
 Since 2003

3. Ground Rules
 Ask Questions
 Raise Hand
 No Cross Talk
 Make it to end…

4. Dotnetnuke Series
Extreme RIA Development
Techniques Using DNN
THE SCHAFER GROUP

5. What you will learn today
• How web delivery methods have changed
• Why the ‘client’ is so important (again)
• Why javaScript is a first class citizen
• Our Progression of RIA using DNN
• How to deploy scripted modules quickly
• Where is script based RIA headed

6. Delivery methods have changed
• Faster Speeds - ( Computers / Bandwidth /Browsers)
• AJAX - (parts are better than the whole)
• CSS - (as visual and programmatic indicators)
• JavaScript – (where does it fit in the model now?)

7. Delivery Methods - Cycles
• Typical Cycles Consumed
3 cycles for L1
14 cycles for L2
250 cycles for RAM
41M cycles for disk
240M cycles for network
Ryan Dahl – (node.js inventor)

8. Delivery Methods - Server
• The fastest website in the world
– 1 HTML file (L1 cache), no links, no media, no style
– Delivered once.. Lives in L1 cache on client

9. Delivery Methods - Request
Client DNN
3 cycles for L1 3 cycles for L1
14 cycles for L2 14 cycles for L2
250 cycles for RAM 250 cycles for RAM
41M cycles for disk 41M cycles for disk
240M cycles for network 240M cycles for network
Files X Size X Layout (n-modules) X Transfer X Render = ????

10. Server – DNN Stack
Final Payload
Rendering Engine
DNN CORE
.net Framework (3.5, 4.0)
IIS (6.0 / 7.0)
App Pools (RAM)
File System Network Layer SQL
OS – (Windows 2003/2008)

11. Delivery Methods - HTML
Client
Client DNN
Client
Client

12. Delivery Methods – Client Stack
JS Events Hardware Event (mouse,touch,keypad,button)
Rendering Engine
JS Scripts Plugin (flash) CSS HTML
JS Engine DOM (Document Object)
Local Storage File Cache Add-on (firebug)
Browser ( IE, Chrome, Firefox, Safari)
Transport Layer (http,https,pop,smtp)
OS – (Windows / iOS / Linux …)

13. Delivery Methods – Get HTML

14. Delivery Methods – Get HTML ?
Row based

15. Delivery Methods – Get HTML !
• The Old GET Method -
Photo : Wolfe House & Building Movers

16. Delivery Methods - AJAX
• Using Ajax –
YEAH!
CONS:
• ~4 max simultaneous requests at a time
• Async (race conditions / out of order)
• ‘chatty’

17. Delivery Methods – Client RIA
• Modern RIA - (BHAG)
– 1 Document / Template / Canvas / Desktop
– 1 Style Sheet
– 1 Common Graphic (sprite)
– 1 Instruction Set (javaScript)
– Data Proxy to many sources
– CDN to all media (Amazon Cloudfront)

18. Delivery Methods - Sprites
http://www.x-cult.org/games/286/Knuckles%27_Chaotix/787/Sonic_becomes_Mighty/ http://oliverhine.com/DotNetNuke/Administration/AdvancedControlPanel.aspx
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
http://demo.tutorialzine.com/2010/11/better-select-jquery-css3/select-jquery.html

19. Delivery Methods –JSON / XML
Client DNN

20. Delivery Methods –JSON
Client
Client DNN
Client
Client

21. Delivery Methods – AJAX / JSON
Client
DNN
{success: 1, id: 212344}
or XML
<root>
<success>1</success>
<id>212344</id>
</root>

22. Delivery Methods – Ajax
Row based

23. Delivery Methods – AJAX / JSON
Client
DNN
Client
Client
Client
{success: 1, id: 212344}

24. The Client – Form Factor
Bill Gates & Steve Jobs at D5 Conference 2007

25. The Client – Browsers
Javascript Engines
Trident Gecko WebKit Presto
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28ECMAScript%29

26. The Client – UI Libraries

27. The Client – Spectrum
Structured
Ad-Hoc
Layout Mixed Code

28. The Client – Library Usage DNN

29. The Client – Library Usage DNN

30. The Client – Library Usage DNN

31. The Client – Library Usage DNN – Deep Embeding

32. The Client – Library Usage DNN

33. The Client – Library Usage DNN

34. The Client – Mix/Match

35. DNN RIA - Progression

36. DNN RIA - Progression

37. DNN RIA - Progression

38. DNN RIA - Progression
United States
Facebook Ashburn, VA
Dallas/Fort Worth, TX
LinkedIn Amazon S3 Jacksonville, FL
Twitter Los Angeles, CA
Miami, FL
ZOHO New York, NY
Basecamp
MS CRM
DNN PayPal
Newark, NJ
Palo Alto, CA
Cloud Front
Seattle, WA
Salesforce Google Checkout St. Louis, MO
Constant Contact Authorize.net
Europe
Client Amsterdam
Dublin
Frankfurt
London
Paris
Asia
Cloud Front Hong Kong
Tokyo
West Coast Cloud Front
Singapore
Client Client
Client
Ireland
East Coast

39. Script modules for RIA - hints
• Keep context on the client
• Use querystring appropriately & standardly
– provider / interface / method / {params}
– path / mode / action / id
• Control your mime-type
• Only return what is needed
• Build it on the client

40. Quick DNN Module Deployment
• Install Open Web Studio
• Add OWS Module to Page
• Click Administration
• Create New Configuration
• Publish
• Set New Configuration in OWS Settings
• Done!
Note : Handles Version Control, rollback and debugging
No recompile, no server restart

41. Open Web Studio - middleware

42. The Template - Sencha
The Template
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/js/ext-3.3.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-3.3.0/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-3.3.0/examples/ux/gridfilters/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-3.3.0/examples/ux/gridfilters/css/RangeMenu.css" />
<script type="text/javascript" src="/js/ext-3.3.0/ext-all.js"></script>
<script type="text/javascript" src="/Default.aspx?tabid=3138&mode=ordersgrid&action=js"></script>
</head>
<body>
<center>
<div id="example-grid"></div>
</center>
</body>
</html>

43. Sencha – Component Overview
The Instruction Set
Window
Panel
DataGrid Data Store Proxy DNN - XML
TabPanel
General
Listing IFRAME - Craigslist
Tracking

44. Sencha – Components…
The Instructions
App.gridpanel = new Ext.Panel({
frame: true,
title: 'Listings',
width: 960,
height: 400,
layout: 'border',
items: [
App.grid,
App.tabpanel
]
})
App.win = new Ext.Window({
title: 'National Lead Generator',
height: 800,
width: 1024,
layout: 'fit',
itemId: 'winLeads',
items: App.gridpanel,
renderto : 'winLeads'
}).show();
App.store.load();

45. Sencha – Components…
The Instructions
App.tabpanel = new Ext.TabPanel({
region : 'center',
activeTab: 0,
height:350,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'General',
id: 'detailPanel',
listeners: {activate: handleActivate},
html: "Please select a listing."
},{
title: 'Listing',
listeners: {activate: handleActivate},
html: "Please select a listing."
},{
title: 'Tracking',
listeners: {activate: handleActivate},
html: "Please select a listing."
}
]
});

46. Sencha – Event Handlers
The Instructions
var detailTplMarkup = [
'Title: <a href="{link}" target="_blank">{title}</a><br/>',
'Label: {label}<br/>',
'Location: {location}<br/>',
'Description: ' + Ext.util.Format.htmlDecode('{description}') + '<br/>'
];
App.detailTpl = new Ext.Template(detailTplMarkup);
function handleActivate(tab){
var selRow = App.grid.selModel.last;
if (selRow !== 'undefined' && parseInt(selRow) >= 0 ){
var row = App.store.data.items[App.grid.selModel.last]
var rowurl = App.store.data.items[App.grid.selModel.last].data.link ;
if(tab.title == 'General'){
var detailPanel = Ext.getCmp('detailPanel');
App.detailTpl.overwrite(detailPanel.body, row.data);
};
if(tab.title == 'Listing'){
tab.load('/tabid/3138/default.aspx?mode=proxy&url= ' + rowurl);
}
}
}

47. Sencha – Event Handlers
The Instructions
App.grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
if (rowIdx >= 0 ) {
handleActivate(App.tabpanel.getActiveTab() );
}
});

48. Sencha – Data Store
The Instructions
App.store = new Ext.data.GroupingStore({
url: '/tabid/3138/default.aspx?mode=ordersgrid&action=XML',
groupField:'region',
sortInfo:{field: 'publishdate', direction: "DESC"},
reader: new Ext.data.XmlReader({
record: 'order',
id: 'uniqueid',
totalRecords: '@total'
}, [
'uniqueid'
, 'title'
, 'label'
, 'region'
, 'name'
, 'link'
, {name: 'publishdate',type: 'date', dateFormat: 'Y-m-dTH:i:s'}
, 'status'
, 'leadid'
, 'description'
])
});

49. Sencha – Components
The Instructions
App.grid = new Ext.grid.GridPanel({
store: App.store,
plugins: [filters],
loadMask: true,
split: true,
region: 'north',
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
columns: [
{header: "Title", width: 360, sortable: true, dataIndex: 'title' },
{header: "Published", width: 120, sortable: true, dataIndex: 'publishdate', renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "State", width: 60, sortable: true, dataIndex: 'region'},
{header: "Location", width: 200, sortable: true, dataIndex: 'name'},
{header: "link", width: 200, sortable: true, dataIndex: 'link'},
{header: "Description", width: 200, sortable: true, dataIndex: 'description'},
]
},
bbar: new Ext.PagingToolbar({
store: App.store,
pageSize: 500,
plugins: [filters]
})
,
view: new Ext.grid.GroupingView({
forceFit:false,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});

50. Sencha – Grid Filters
The Instructions
var filters = new Ext.ux.grid.GridFilters({
encode: false,
local: true,
filters: [
{type: 'numeric', dataIndex: 'leadid' }
, {type: 'string', dataIndex: 'title', disabled: false }
, {type: 'string', dataIndex: 'region', disabled: false }
, {type: 'string', dataIndex: 'name', disabled: false }
, {type: 'date', dataIndex: 'publishdate'}
, {type: 'date', dataIndex: 'createddate'}
, {type: 'string', dataIndex: 'description', disabled: false }
]
});

51. DNN – Data Pump
The Data
<?xml version="1.0" encoding="UTF-8"?>
<root>
<success>true</success>
<total>22526</total>
<message>Loaded Data</message>
<orders>
<order>
<uniqueid>12171780</uniqueid>
<title>WEB SIGHT SEARCH ENGINE (PALM SPRINGS)</title>
<label>WEB SIGHT SEARCH ENGINE (PALM SPRINGS)</label>
<region>California</region>
<regionabbr>CA</regionabbr>
<name>Palm Springs</name>
<link>http://palmsprings.craigslist.org/web/2205876734.html</link>
<publishdate>2011-02-21T10:43:35.560</publishdate>
<leadid>-1</leadid>
<description>
Company in Palm Springs is looking for someone who knows how to put our web sight on top of
search engine.&#x0D;&lt;br&gt; n Our web and shopping kart is already designed but want
someone who knows how to put it on top of the list.&#x0D;&lt;br&gt; n Please call Peter Ruiz at
760-864-1320 Ext 212
</description>
</order>
….
….
</orders>
</root>

52. DNN – Data Pump
The Output

53. The Results!

54. Where are DNN RIA headed ?
Support for native
platform features ???
Camera
Contacts
Phone
Notifications
Calendar
Gyro
Compass
http://dev.sencha.com/deploy/ChartsDemo/examples/chart/ScatterRenderer.html
http://senchalabs.github.com/philogl/PhiloGL/examples/histogram/
http://senchalabs.github.com/philogl/PhiloGL/examples/temperatureAnomalies/
http://dev.sencha.com/animator/demos/cogs/
http://www.apple.com/ipad/features/
http://dojotoolkit.org/

55. Where does DNN fit in?
Facebook
LinkedIn Amazon S3
Twitter
ZOHO
Basecamp
MS CRM
DNN PayPal
Salesforce Google Checkout
Constant Contact Authorize.net
Client
Cloud Front
Client Client
Client

56. Thank You
Brad Schafer
The Schafer Group
http://www.theschafergroup.com
brad@theschafergroup.com

57. Brad Schafer