Busy Developer's Guide to Windows 8 HTML/JavaScript Apps


Published on

With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.

  • Be the first to comment

  • Be the first to like this

Busy Developer's Guide to Windows 8 HTML/JavaScript Apps

  1. 1. Busy Developers Guide to Windows 8 HTML/JavaScript Apps Ted Neward Neward & Associateshttp://www.tedneward.com | ted@tedneward.com
  2. 2. CredentialsWho is this guy? – Architectural Consultant, Neudesic Software – Principal, Architect, Consultant and Mentor ask me how I can help your project or your team – Microsoft MVP (F#, C#, Architect) – JSR 175, 277 Expert Group Member – Author Professional F# 2.0 (w/Erickson, et al; Wrox, 2010) Effective Enterprise Java (Addison-Wesley, 2004) C# In a Nutshell (w/Drayton, et all; OReilly, 2003) SSCLI Essentials (w/Stutz, et al; OReilly, 2003) Server-Based Java Programming (Manning, 2000) – Blog: http://blogs.tedneward.com – Papers: http://www.tedneward.com/writings
  3. 3. ObjectivesOur goals... – to understand how to build a Windows 8 app in HTML/JavaScript – to understand why you want to do this – to understand why Microsoft wants you to do this – to understand where this fits in relation to .NET/C++/Web – to begin the path of deeper understanding
  4. 4. DisclaimerNote that... – attending this talk will NOT make you an expert – I am also NOT an expert – Windows 8 hasnt shipped yet (technically)This talk will get you started, try to debunk some of the popular conspiracy theories, and put some strategic overview on the whole thing thats it
  5. 5. Getting StartedWriting an app for Windows 8 in HTML/JavaScript requires – Windows 8 (seriously) – Visual Studio 2012 (either Express or full-blown) http://msdn.microsoft.com/en-us/windows/apps/br229516 – Optionally, Microsoft samples and/or hands-on labs (HOL) – There are no (known) command-line tools to do this
  6. 6. Hello WorldOnce Win 8 and VS 2012 are installed – fire up the Hello World of Win8HTMLJS apps – File->New Project->JavaScript->Windows Store->Blank App •creates a single-page Metro HTML/JS App •first time, a "Developer License" dialog pops up; this is to obtain a crypto key for signing the app – hit "F5" and it will build and run on the local box (LocalMachine) you can also run it in the Simulator, which simulates tablets if youre not on one
  7. 7. ConceptsBig picture kinds of things
  8. 8. ConceptsWhat just happened? – VS built a project out of HTML and CSS and JavaScript – the app was bundled up into a "package" (a zip file) – the app contains a "package.appxmanifest" file that contains app metadata – the app was signed with a crypto key and deployed to the local machine C:Program FilesWindowsApps (which is protected up the wazoo!)
  9. 9. ConceptsWhat just happened? – when executed, a host process (WWAHost.exe) fired up – the IE 10 "Trident" HTML/CSS engine displayed the HTML – the IE 10 "Chakra" JS engine executed the JS – the application runs in a sandbox with no user privileges
  10. 10. ConceptsYour "executable" application essentially isnt – its a Web app running entirely on the local machine – its a native app with access to the underlying machine – its Frankensteins monster! maybe we should call it "Ballmersteins Monster"?
  11. 11. ConceptsMetro apps arent quite like traditional desktop apps – think more of a "fusion" of web and desktop – with some mobile ideas thrown inAs a result, UI approaches will need/want to be different – "Tiles" (shortcuts into your apps data or tasks) – "Live tiles" (representations of data easily seen) – "Chromelessness" (absence of window decorations) – "Charms" (toolbar off to the right of the screen) – "App Bars" (sort of like toolbars, but simpler/cleaner)
  12. 12. ConceptsWinRT – Windows Runtime API not to be confused with "Windows RT" (Windows on ARM) – essentially an API layer on top of the Windows kernel – provides O-O metadata similar to JVM/CLR runtimes – provides "projections" into different languages C#, VB, C++, and JavaScript (WinJS)
  13. 13. ConceptsContracts – this is the new COM (sort of) programs advertise and consume contracts – essentially an IPC declaration mechanism – used for Search, drag and drop, app targets, and so on
  14. 14. CodeShow me the code!
  15. 15. CodeUI elements are defined in HTML – or can be added/manipulated later by DOM magic – all "basic" HTML controls are supported button, checkbox, drop-down list, email, file upload, hyperlink, listbox, text, password, progress, radiobutton, rich text, slider, uri, ... – WinJS also offers a few "custom" controls unique to Metro DatePicker, TimePicker, Rating, ToggleSwitch, Tooltip
  16. 16. Code<body>• <h1 class="headerClass">Hello, world!</h1>• <div class="mainContent">• <p>Whats your name?</p>• <input id="nameInput" type="text" />• <button id="helloButton">Say "Hello"</button>• <div id="greetingOutput"></div>• <label for="ratingControlDiv">• Rate this greeting:• </label>• <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>• <div id="ratingOutput"></div>• </div>•</body>
  17. 17. CodeUI styles are defined in CSS – Metro defines two parallel stylesheets for your use ui-light.css and ui-dark.css – of course, custom styling is always possible but until Metro gains widespread acceptance, resistMuch of the intent is to do styling and UI theming in Blend – ... and frankly, thats not a programmer tool
  18. 18. Codebody {•}••.headerClass {• margin-top: 45px;• margin-left: 120px;•}••.mainContent {• margin-top: 31px;• margin-left: 120px;• margin-bottom: 50px;•}••#greetingOutput {• height: 20px;• margin-bottom: 40px;•}
  19. 19. CodeUI events are handled in JavaScript – just as with Web, register a JS function with the event in question typically do this on app startup – and, of course, events can be registered/unregistered dynamically
  20. 20. Code(function () {• "use strict";•• // ...•• function buttonClickHandler(eventInfo) {• var userName = document.getElementById("nameInput").value;• var greetingString = "Hello, " + userName + "!";• document.getElementById("greetingOutput").innerText =greetingString;• }• function ratingChanged(eventInfo) {• var ratingOutput = document.getElementById("ratingOutput");• ratingOutput.innerText = eventInfo.detail.tentativeRating;• }•}
  21. 21. Code(function () {• "use strict";•• // ...•• app.onactivated = function (args) {• if (args.detail.kind === activation.ActivationKind.launch) {• // ...• args.setPromise(WinJS.UI.processAll().then(functioncompleted() {• var ratingControlDiv =document.getElementById("ratingControlDiv");• var ratingControl = ratingControlDiv.winControl;• ratingControl.addEventListener("change", ratingChanged,false);• var helloButton = document.getElementById("helloButton");• helloButton.addEventListener("click", buttonClickHandler,false);• }));• }• };•• // ...•}
  22. 22. AnalysisWhy did they do this?
  23. 23. AnalysisWeb applications have dominated the industry for a decade – HTML/CSS/Javascript skills are ubiquitous – Web concepts are emerging into desktop applications – some users cant tell the difference between the two – more and more data is living in "the cloud" Dropbox, SkyDrive, Evernote, iTunes, Amazon, ...
  24. 24. AnalysisConspiracies! Everywhere! – Is this Microsofts attempt to kill the Web? – Is this Microsofts attempt to kill HTML 5? – Is this Microsoft trying to "embrace, extend, extinguish"? – Is this the beginning of the end of the world as we know it?
  25. 25. AnalysisMicrosoft wants people to write apps for their platform – this is hardly surprising, new, or unacceptable – part of this means making the platform easy to program for – part of this means making it "easy" for people to port code frankly I dont see this as being a big playMicrosoft wants people to buy apps on their platform – this means reducing the barrier to entry (AppStore) – this means making them easier to obtain (Internet) – this means putting some "borders" around apps (security, safety, etc), and this is easier with interpreted code than
  26. 26. SummaryWindows 8 apps are interesting to a certain crowd – this doesnt mean everybody will want to build one – in fact, if youre not a historic Microsoft developer, you probably wont – the concept of using HTML+Javascript to build a "native" app is interesting