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.

1. Busy Developer's Guide
to Windows 8 HTML/JavaScript Apps
Ted Neward
Neward & Associates
http://www.tedneward.com | ted@tedneward.com

2. Credentials
Who 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. Objectives
Our 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. Disclaimer
Note that...
– attending this talk will NOT make you an expert
– I am also NOT an expert
– Windows 8 hasn't 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
that's it

5. Getting Started
Writing 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. Hello World
Once 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
you're not on one

7. Concepts
'Big picture' kinds of things

8. Concepts
What 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. Concepts
What 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. Concepts
Your "executable" application essentially isn't
– it's a Web app running entirely on the local machine
– it's a native app with access to the underlying machine
– it's Frankenstein's monster!
maybe we should call it "Ballmerstein's Monster"?

11. Concepts
Metro apps aren't quite like traditional desktop apps
– think more of a "fusion" of web and desktop
– with some mobile ideas thrown in
As a result, UI approaches will need/want to be
different
– "Tiles" (shortcuts into your app's 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. Concepts
WinRT
– 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. Concepts
Contracts
– 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. Code
Show me the code!

15. Code
UI 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. Code
<body>
• <h1 class="headerClass">Hello, world!</h1>
• <div class="mainContent">
• <p>What's 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. Code
UI 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, resist
Much of the intent is to do styling and UI theming in
Blend
– ... and frankly, that's not a programmer tool

18. Code
body {
•}
•
•.headerClass {
• margin-top: 45px;
• margin-left: 120px;
•}
•
•.mainContent {
• margin-top: 31px;
• margin-left: 120px;
• margin-bottom: 50px;
•}
•
•#greetingOutput {
• height: 20px;
• margin-bottom: 40px;
•}

19. Code
UI 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. 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. Code
(function () {
• "use strict";
•
• // ...
•
• app.onactivated = function (args) {
• if (args.detail.kind === activation.ActivationKind.launch) {
• // ...
• args.setPromise(WinJS.UI.processAll().then(function
completed() {
• 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. Analysis
Why did they do this?

23. Analysis
Web applications have dominated the industry for a
decade
– HTML/CSS/Javascript skills are ubiquitous
– Web concepts are emerging into desktop applications
– some users can't tell the difference between the two
– more and more data is living in "the cloud"
Dropbox, SkyDrive, Evernote, iTunes, Amazon, ...

24. Analysis
Conspiracies! Everywhere!
– Is this Microsoft's attempt to kill the Web?
– Is this Microsoft's 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. Analysis
Microsoft 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 don't see this as being a big play
Microsoft 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. Summary
Windows 8 apps are interesting to a certain crowd
– this doesn't mean everybody will want to build one
– in fact, if you're not a historic Microsoft developer, you
probably won't
– the concept of using HTML+Javascript to build a "native"
app is interesting