Extreme Ria Using Dnn

1,160 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,160
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extreme Ria Using Dnn

  1. 1. Extreme DNN Development Techniques Brad Schafer
  2. 2. The Schafer Group Interactive Agency / Digital Solutions Independent Specialists (DNN) “Hollywood Model” Project Teams Since 2003
  3. 3. Ground Rules Ask Questions Raise Hand No Cross Talk Make it to end…
  4. 4. Dotnetnuke SeriesExtreme RIA DevelopmentTechniques Using DNN THE SCHAFER GROUP
  5. 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. 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. 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. 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. 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 networkFiles X Size X Layout (n-modules) X Transfer X Render = ????
  10. 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. 11. Delivery Methods - HTML Client Client DNNClient Client
  12. 12. Delivery Methods – Client StackJS Events Hardware Event (mouse,touch,keypad,button) Rendering Engine JS Scripts Plugin (flash) CSS HTMLJS 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. 13. Delivery Methods – Get HTML
  14. 14. Delivery Methods – Get HTML ? Row based
  15. 15. Delivery Methods – Get HTML !• The Old GET Method - Photo : Wolfe House & Building Movers
  16. 16. Delivery Methods - AJAX• Using Ajax – YEAH! CONS: • ~4 max simultaneous requests at a time • Async (race conditions / out of order) • ‘chatty’
  17. 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. 18. Delivery Methods - Spriteshttp://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. 19. Delivery Methods –JSON / XMLClient DNN
  20. 20. Delivery Methods –JSONClient Client DNNClient Client
  21. 21. Delivery Methods – AJAX / JSONClient DNN {success: 1, id: 212344} or XML <root> <success>1</success> <id>212344</id> </root>
  22. 22. Delivery Methods – Ajax Row based
  23. 23. Delivery Methods – AJAX / JSONClient DNN Client Client Client {success: 1, id: 212344}
  24. 24. The Client – Form Factor Bill Gates & Steve Jobs at D5 Conference 2007
  25. 25. The Client – Browsers Javascript Engines Trident Gecko WebKit Presto http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28ECMAScript%29
  26. 26. The Client – UI Libraries
  27. 27. The Client – SpectrumStructured Ad-Hoc Layout Mixed Code
  28. 28. The Client – Library Usage DNN
  29. 29. The Client – Library Usage DNN
  30. 30. The Client – Library Usage DNN
  31. 31. The Client – Library Usage DNN – Deep Embeding
  32. 32. The Client – Library Usage DNN
  33. 33. The Client – Library Usage DNN
  34. 34. The Client – Mix/Match
  35. 35. DNN RIA - Progression
  36. 36. DNN RIA - Progression
  37. 37. DNN RIA - Progression
  38. 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 TokyoWest Coast Cloud Front Singapore Client Client Client Ireland East Coast
  39. 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. 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. 41. Open Web Studio - middleware
  42. 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. 43. Sencha – Component Overview The Instruction SetWindow Panel DataGrid Data Store Proxy DNN - XML TabPanel General Listing IFRAME - Craigslist Tracking
  44. 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. 45. Sencha – Components… The InstructionsApp.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. 46. Sencha – Event Handlers The Instructionsvar 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. 47. Sencha – Event Handlers The InstructionsApp.grid.getSelectionModel().on(rowselect, function(sm, rowIdx, r){ if (rowIdx >= 0 ) { handleActivate(App.tabpanel.getActiveTab() ); }});
  48. 48. Sencha – Data Store The InstructionsApp.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. 49. Sencha – Components The InstructionsApp.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. 50. Sencha – Grid Filters The Instructionsvar 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. 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. &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. &lt;br&gt; n Please call Peter Ruiz at 760-864-1320 Ext 212 </description> </order> …. …. </orders></root>
  52. 52. DNN – Data Pump The Output
  53. 53. The Results!
  54. 54. Where are DNN RIA headed ? Support for native platform features ??? Camera Contacts Phone Notifications Calendar Gyro Compasshttp://dev.sencha.com/deploy/ChartsDemo/examples/chart/ScatterRenderer.htmlhttp://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. 55. Where does DNN fit in? Facebook LinkedIn Amazon S3 Twitter ZOHO Basecamp MS CRM DNN PayPal Salesforce Google Checkout Constant Contact Authorize.netClient Cloud Front Client Client Client
  56. 56. Thank YouBrad SchaferThe Schafer Grouphttp://www.theschafergroup.combrad@theschafergroup.com
  57. 57. Brad Schafer

×