Advice about the creation of a Windows 8 app using Javascript. We created a content-based application template for the Joshfire Factory (http://factory.joshfire.com/)

1. Windows 8 Metro
Application Template
How we built it.
How it will help you.
Steren Giannini Meetup Windows 8
2012-10-01

2. Windows 8 Metro
Application Template
How we built it.
How it will help you.
Steren Giannini Meetup Windows 8
2012-10-01

3. Windows Store
Application Template
How we built it.
How it will help you.
Steren Giannini Meetup Windows 8
2012-10-01

4. @Steren
Product manager at Joshfire

5. Windows Store app Template
to easily create content-based applications
in Windows Store app style
supports articles, videos and pictures
fully integrated with Windows 8

6. Generated App Demo
http://vimeo.com/46828771

7. How we built it.
(advice on building JS Windows Store apps)

8. You know what the funniest
thing about Windows 8 is?
What?
It's the little differences. I mean, they
got the same shit over there that we
got here, but it's just...it's just, it's a
little different.

9. Use JS, but...
not your favorite JS libraries

10. "Little" differences.
AJAX calls: only using WinJS
$.ajax() WinJS.xhr()
HTML insertion: nope, use DOM manipulation
var logo = document.createElement('img');
$().prepend() element.querySelector("header").appendChild(logo);
Back to the roots!
WinJS.Binding.
EJS templates
Template()

11. Use WinJS API
You will have to learn a new framework
well structured (Object Oriented, asynchronous)
well documented
but a little too much -like
use for Views, Data and Navigation
(WinJS view widgets do all the work for you)

12. Start from samples, not from scratch

13. For every feature,
look for examples and doc
http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

14. Visual Studio
Great:
● auto-completion
● code check
● simulator

15. Visual Studio
Horrible:
● DOM inspector
● JS errors
○ Stacktrace is here but very often unreadable
● CSS
○ change & reload, no live editing
-> use Blend

16. Blend
Live CSS editing but...
● heavy tool, too many buttons
● generated CSS not very smart
(use the UI only for tweaks)
● still need to reload the app very often

17. Checklist
for a great Windows Store app
● Design Read about Windows 8 design
Use SDK UI widgets
● Touch, mouse, keyboard
● Offline
● Snapview mode
See examples in SDK
● Share sharm
● Semantic Zoom
● Search

18. Think about Offline mode
Handle connection lost
if(Windows.Networking.Connectivity.NetworkInformation
.getInternetConnectionProfile().getNetworkConnectivityLevel()
===
Windows.Networking.Connectivity.NetworkConnectivityLevel.internetAccess) {
Data.update();
}
Windows.Networking.Connectivity.NetworkInformation
.addEventListener("networkstatuschanged", checkInternet);
Do not assume images load
use placeholders
Do not assume your data loads
display a network warning message

19. IE10 vs Webkit or Gecko http://jsbin.com/oyajog/5
p { http://www.quirksmode.org/css/multicolumn.html#link5
width: 100%;
height: 500px;
-webkit-column-width:100px;
column-width:100px;
}

20. How it will help you.

21. For content-based apps, no need to
reinvent the wheel.
You use to create
blogs and simple websites.
Use the and this
template to create content-based apps for you
or your clients.

22. Joshfire Factory Demo
http://factory.joshfire.com

24. Questions?

25. we'
re h
iring
!