David Pallmann GM Custom App Dev, Neudesic

Size: px

Start display at page:

Download "David Pallmann GM Custom App Dev, Neudesic"

Wilfred Simon
5 years ago
Views:

1 David Pallmann GM Custom App Dev, Neudesic

2 2 Revolutions The HTML5 revolution The Cloud revolution Interactions & Synergies Walkthrough: Creating a Mobile & Global App

3 Front-End Back-End

4 HTML5 Lingua franca for desktop & mobile web applications Front-End Mobility Tablets and phones Power More capable devices & browser h/w acceleration Experiences Compelling, touch-oriented experiences

5 Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our lifestyle

6 Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our your customers & employees lifestyle

8 HTML5 CSS3 JavaScript SVG 100+!

9 Video & Audio without plugins Scalable Vector Graphics w/o plugins New semantic tags Geolocation CSS3, including custom fonts, rounded corners Drag and drop Canvas 2D drawing, WebGL 3D graphics New form elements, input types & validation HTML manifest (app caching) & offline storage Hardware acceleration in modern browsers

10 Advanced Shading Video WebGL Water CSS public online HTML5 sites

11 Joy Defines the Future (BMW) Angry Birds Canvas Mol Tron Legacy public online HTML5 sites

12 Source: Shutterstock.com # Source: Shutterstock.com #

14 Unified mobile development accounts for much of the HTML5 momentum 327M wireless devices in US CTIA Wireless Association 1 billion wireless devices worldwide isuppli IDC: wireless web will outpace desktop web by 2015 Computerworld Responsive web design: adaptive, fluid layout Mobile-first design, progressive enhancement

15 A Compelling Experience compelling immersive multimedia animated interactive responsive Relevant to Your Life integrates with social networks uses location Ubiquitous runs on PC browser, tablet, phone adaptive layout touch, mouse or keyboard Maintains Continuity use multiple devices identity state data Constant Availability disconnected operation sync

16 works on phones works on tablets

17 Cloud Computing Elastic scale, consumptionbased pricing Back-End Social Social network content, interactions & web identity CDNs Content Delivery Networks Marketplaces App stores, data marketplaces

18 App Clouds Media Clouds Data Clouds Social Clouds

19 vs.

20 Elastic Scale Consumption-based Pricing Commitment-free / Easy-in, Easy-out Self-serve / On-demand Managed / Platform-as-a-Service Application & Data Protected through Redundancy 3 9 s SLA (99.9%)

21 AWARENESS INTEREST DESIRE ACTION ACKNOWLEDGE DIALOG INCENTIVIZATION ACTIVATION

22 Elastic Scale scale larger/smaller as needed Universal worldwide presence universal access can run in multiple data centers CDN Highly Available redundancy resilient failover Decentralized distributed combine multiple services lessened emphasis on locking / transactions

24 Service Windows Azure Compute Windows Azure Blob Storage Windows Azure Table Storage SQL Azure Database Windows Azure Traffic Manager Content Delivery Network Cache Service SQL Azure Data Sync Access Control Service Service Bus Windows Azure Connect Role in a Modern Web Solution Hosting of web servers Media (images, video) & other file storage Server-side storage of data / session state Server-side storage of relational data Traffic routing across multiple deployments Use of edge cache network to serve content Server-side performance improvements Data sync across multiple deployments Identity federation Back end processing / integration Cloud-Enterprise connectivity

25 Front-End Back-End

26 I can use a traditional or HTML5 front-end here I can use a traditional or cloud back-end here

27 HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application DESKTOP BROWSER Web Services SQL Server IIS Windows Server

28 HETEROGENEOUS FRONT END DECENTRALIZED BACK END DESKTOP BROWSER Application Business Services Platform Services Data Stores CLOUD TABLET Identity Services Directories IP PHONE Partner Services Data Stores PARTNER

29 Client-Server Coordination Data Storage Identity State Management Synchronization Caching Location Social

30 Elasticity Location Social

31 VM VM VM VM VM

34 Mobility gives us location independence: take the web with you Mobile web apps can use your current location Map integration

35 Content Delivery Network serves content efficiently based on locale Traffic Manager routes users to a deployment based on locate

37 Content Integration with Existing Network Create your own Social network Notification & Coordination Collaboration & Sharing Marketing & Brand Management Games Gamification

38 Front-end social network integration Search Content View Content Post Content

39 Sign-in with web provider Identity federation (Access Control Service) Back-end social network integration

40 Outside-the-box-Pizza: client-side social Responsive Tours: server-side social identity

41 Front End HTML5, CSS3, JS Mobile Devices Responsive Web Design Social (Twitter) Back End Windows Azure Compute Windows Azure Storage SQL Azure Database Service Bus

42 Front End HTML5, CSS3, JS Mobile Devices Responsive Web Design Bing Maps Back End Windows Azure Compute Windows Azure Storage Content Delivery Network SQL Azure Database Access Control Service Windows Azure Traffic Manager

1 Design Comps Adobe Creative Suite HTML5,

Platform Neudesic Web Template Client: Open

Dynamic Content DB / Storage Data Binding Map

Multiple Data Centers Traffic Management 6

Cloud-Ready Windows Azure Web Role / Instances

44 1 Design Comps Adobe Creative Suite HTML5, CSS, Media Responsive Web Design 2 Web Platform Neudesic Web Template Client: Open Standards Server: MS Web Platform 3 Integrate Dynamic Content DB / Storage Data Binding Map Integration 7 Global Worldwide Deployment Multiple Data Centers Traffic Management 6 Deployed Elastic Scale Azure Data Center 4 Cloud-Ready Windows Azure Web Role / Instances Local Dev/Test 5 Secured Single Sign-on Web / Domain ID AZURE WEB ROLE

45 1 Design Design Web Site Front-end & Create Assets 1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design

46 1 Design Design Web Site Front-end & Create Assets 1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design

47 1 Design Design Web Site Front-end & Create Assets 1B. Customize Content in Dreamweaver Page Title, Logo, Marquee Text,

48 1 Design Design Web Site Front-end & Create Assets 1B. Customize Content in Dreamweaver Page Title, Logo, Marquee Text,

49 1 Design Design Web Site Front-end & Create Assets 1C. Hand-off to developer assets are HTML5, CSS, JavaScript, image files

50 2 Adapt Template-based Web Project 2A. Create Project from Neudesic Web Template

51 2 Adapt Template-based Web Project 2B. Insert front-end markup/styling/code/images from designer Move where some files are to match the templates organization Change paths in the HTML and CSS to match file relocation and use ASP.NET ~ path convention Segment HTML and insert into appropriate areas of the home view (Index.cshtml)

52 2 Adapt Template-based Web Project 2B. Insert front-end markup/styling/code/images from Optional : Include additional stylesheets StylesTop { <link rel="stylesheet" type="text/css" href="~/../css/stylesheet.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (maxwidth:550px)" href="~/../css/screen_small.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:551px) and (maxwidth:800px)" href="~/../css/screen_medium.css">  }

53 2 Adapt Template-based Web Project 2C. Final result is a web project we can run out of VS2010 with F5 looks no diff from Step 1

54 3A. Create a Database for Promotional Data 3 Integrate Add Dynamic Content

55 3 Integrate Add Dynamic Content 3B. Retrieve Content in the MVC Project public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { LoadPromos(); return View(); } public class Promo { public string Title; public string Text; public string ImageURL; } private void LoadPromos() { Dictionary<string, Promo> Promos = new Dictionary<string, Promo>(); try { using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Tours"].ConnectionString)) {...get the data, add to Promos collection... } } catch (SqlException ex) { // TODO: log exception } } } ViewBag.Promos = Promos;

56 3 Integrate Add Dynamic Content 3C. Embed Content with Razor  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["1"].imageurl));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["2"].imageurl));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["3"].imageurl));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">learn more»</a> </div> </div> </div>

57 3 Integrate Add Dynamic Content 3C. Data Bind with Knockout  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="backgroundimage:url(images/@(viewbag.promos["1"].imageurl));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="backgroundimage:url(images/@(viewbag.promos["2"].imageurl));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="backgroundimage:url(images/@(viewbag.promos["3"].imageurl));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">learn more»</a> </div> </div> </div>

58 3 Integrate Add Dynamic Content 3C. Data Bind with Knockout  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["1"].imageurl));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["2"].imageurl));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">learn more»</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(viewbag.promos["3"].imageurl));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">learn more»</a> </div> </div> </div>

59 3D. Site with Data Binding 3 Integrate Add Dynamic Content

60 4A. Add Windows Azure Project 4 Cloud-Ready Set up for Windows Azure Local Test/Dev in Simulator

61 4 Cloud-Ready Set up for Windows Azure Local Test/Dev in Simulator 4B. Set Instance Counts <?xml version="1.0" encoding="utf-8"?> <ServiceConfiguration servicename="responsivesiteazure" xmlns=" econfiguration" osfamily="1" osversion="*"> <Role name="responsivesite"> <Instances count="4" /> <ConfigurationSettings> <Setting name="microsoft.windowsazure.plugins.diagnostics.connectionstring " value="usedevelopmentstorage=true" /> </ConfigurationSettings> </Role> </ServiceConfiguration>

62 4 Cloud-Ready Set up for Windows Azure Local Test/Dev in Simulator 4C. Run locally in Windows Azure Simulation Environment

63 5 Secured Sign-in with web Identities 5A. Configure Access Control Service in Windows Azure

64 5 Secured Sign-in with web Identities 5B. Instrument for identity with Windows Identity Foundation

65 5 Secured Sign-in with web Identities 5B. Instrument for identity with Windows Identity Foundation

66 5 Secured Sign-in with web Identities 5C. Retrieve Claims private void LoadClaims() { ViewBag.Welcome = "Welcome Back!"; var principal = Thread.CurrentPrincipal; var identity = principal.identity as IClaimsIdentity; var claims = identity.claims; ViewBag.Claims = claims; string displayname = null; } if (claims!= null) { string claimtype; foreach (Claim claim in claims) { claimtype = claim.claimtype; if (claimtype.endswith("/nameidentifier")) { displayname = claim.subject.name; break; } } if (!String.IsNullOrEmpty(displayName)) { ViewBag.Welcome = "Welcome back, " + displayname; } }

6 Deployed Deployed to Windows Azure Data Center 6A. Move Promotional Item Images to Blob Storage http://responsive.blob.core.windows.

67 6 Deployed Deployed to Windows Azure Data Center 6A. Move Promotional Item Images to Blob Storage

68 6 Deployed Deployed to Windows Azure Data Center 6B. Change Promotional Image URLs to use Blob Storage <div class="home_promo_content" style="background-image:url( );">

69 6C. Package and Publish 6 Deployed Deployed to Windows Azure Data Center

70 6 Deployed Deployed to Windows Azure Data Center 6D. Access in the Cloud at

71 7A. Turn on CDN 7 Global Deployed Globally to US and Hong Kong with Traffic Management

72 7 Global Deployed Globally to US and Hong Kong with Traffic Management 7B. Change Promotion Item Image URLs to use CDN URL Prefix <div class="home_promo_content" style="background-image:url( );">

73 7C. Deploy to Multiple Data Centers 7 Global Deployed Globally to US and Hong Kong with Traffic Management

74 7D. Manage Traffic 7 Global Deployed Globally to US and Hong Kong with Traffic Management

75 7 Global Deployed Globally to US and Hong Kong with Traffic Management 7E. Access at ( Friendly Domain Windows Azure Traffic Manager South Central US Western Europe East Asia responsive-asia.cloudapp.net Windows Azure Access Control Service Web Identity Sign-in

76 7 Global Deployed Globally to US and Hong Kong with Traffic Management

77 1 Design Comps Adobe Creative Suite HTML5, CSS, Media Responsive Web Design 2 Web Platform Neudesic Web Template Client: Open Standards Server: MS Web Platform 3 Integrate Dynamic Content DB / Storage Data Binding Map Integration 7 Global Worldwide Deployment Multiple Data Centers Traffic Management 6 Deployed Elastic Scale Azure Data Center 4 Cloud-Ready Windows Azure Web Role / Instances Local Dev/Test 5 Secured Single Sign-on Web / Domain ID AZURE WEB ROLE

78 8-Part Tutorial obile-global-in-7-steps-with-html5-mvc.html Source Code on CodePlex Online Demo

80 David Pallmann GM Custom App Dev, Neudesic Thanks!

Programming Fundamentals of Web Applications

Programming Fundamentals of Web Applications Course 10958B; 5 days, Instructor-led Course Description This five-day instructor-led course provides the knowledge and skills to develop web applications by