1. Building an End-to-End HTML5 App with ASP.NET MVC, EF and jQuery Dan Wahlin

2. Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin

3. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Processing Data Canvas, SVG, and Video

4. The Account at a Glance Application

5. Quick Glance View

6. Key Application Features Multiple data views Drag and drop tiles Context-aware tiles AJAX-enabled

7. Application Technologies Client-Side Technologies HTML5 Modernizr Handlebars HTML5 Boilerplate jQuery Canvas SVG CSS3 JavaScript Patterns Server-Side Technologies JSON and Ajax ASP.NET MVC ASP.NET Web API Entity Framework Code First Repository Pattern C# Unity IoC Container SQL Server Nuget

8. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

9. Web Project Structure Server-side and Client-side

10. Model/Repository Project Structure Data Repository Classes Model Classes

11. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

12. Data Retrieval Financial data retrieved from Google REST service Data processed and stored in SQL Server Data operations performed using EF Code First –Model classes used to hold account and financial data –Repository pattern used for data retrieval classes

13. Data Patterns are Key!

14. Model Classes  Plain Old CLR Objects (POCOs) used to hold data: public class Stock : Security { public decimal DayHigh { get; set; } public decimal DayLow { get; set; } public decimal Dividend { get; set; } public decimal Open { get; set; } public decimal Volume { get; set; } //Code removed for brevity }

15. Repository Pattern  Repository classes created to handle CRUD operations: public class SecurityRepository : RepositoryBase, ISecurityRepository { public Security GetSecurity(string symbol) {...} public List GetSecurityTickerQuotes() {...} public OperationStatus UpdateSecurities() {...} public OperationStatus InsertSecurityData() {...} }

16. Repository Class Example public class AccountRepository : RepositoryBase, IAccountRepository { public Customer GetCustomer(string custId) { using (var context = DataContext) { return context.Customers.Include("BrokerageAccounts").Where(c => c.CustomerCode == custId).SingleOrDefault(); }

17. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

18. Serving Up JSON Data Data served to client using ASP.NET Web API Web API actions call repository objects Model objects converted to JSON and returned to client

19. How is ASP.NET Web API Used? ASP.NET MVC ASP.NET Web API SQL Server Entity Framework HTML (Razor) JSON

20. JSON Action Example public class DataServiceController : ApiController { [HttpGet] public BrokerageAccount Account(string acctNumber) { } [HttpGet] public Security Quote(string symbol) { } [HttpGet] public MarketQuotes MarketIndices() { } [HttpGet] public MarketsAndNews TickerQuotes() { } }

21. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

22. JavaScript Patterns are Key!

23. Client-Side Scripts Script Purpose scene.layoutservice.js Defines tile "scenes" scene.statemanager.js Creates tiles dynamically at runtime scene.dataservice.js Handles performing AJAX calls to the server scene.tile.binder.js Handles converting JSON data into HTML for each tile’s size (small, medium and large) scene.tile.renderer.js Renders different tile sizes based on position scene.tile.formatter.js Custom formatting functionality for tiles

24. Account at a Glance Templates Application templates are stored on the server in the Templates folder Templates are downloaded dynamically to the client by scene.tile.binder.js Handlebars.js used to convert JSON to HTML

25. Tile Template Example ACCOUNT TOTAL {{Total}}

26. Converting JSON to HTML tmpl = function (tileName, data) { var templateHtml = $('#' + tileName).html(); if (data != null) { var compiledTemplate = Handlebars.compile(templateHtml); return compiledTemplate(data); } else { return templateHtml; }

27. Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

28. HTML5 Canvas HTML5 canvas provides a way to render pixels using JavaScript functions Plugins can simplify working with the canvas: –EaselJS –Fabric –Flot –Gury –JCanvaScript

29. Canvas in Account at a Glance  Account at a Glance uses Flot to render stock quote graphs using the canvas: $.plot(canvasDiv, [{ color: color, shadowSize: 4, label: 'Simulated Data', data: quoteData }], chartOptions);

30. Scalable Vector Graphics  SVG provides a way to render vector graphics using script or elements  Application uses the Raphael SVG plugin: raphael('AccountPositionsSVG', 500, 420).pieChart(scene.width / 2, scene.height / 4 + 10, 66, values, labels, "#fff");

31. Displaying Video

32. Multiple Video Sources  Video element supports multiple sources  Free conversion tool: http://www.mirovideoconverter.com

33. Summary Account at a Glance demonstrates integrating several HTML5 technologies Plugins used to convert JSON to HTML, generate canvas charts, SVG, and more Lessons learned: –Pick a pattern for structuring JavaScript code to keep it organized! –Leverage plugins for productivity – but test, test, test!

34. Thank you! @DanWahlin weblogs.asp.net/dwahlin www.linkedin.com/pub/dan-wahlin/1/547/46b Code: http://tinyurl.com/AAG2013

35. This presentation is based on an online training course available at http://www.pluralsight.com