Windows 8 Metro      Application Template                    How we built it.                  How it will help you.Steren...
Windows 8 Metro      Application Template                    How we built it.                  How it will help you.Steren...
Windows Store      Application Template                    How we built it.                  How it will help you.Steren G...
@SterenProduct manager at Joshfire
Windows Store app Templateto easily create content-based applicationsin Windows Store app stylesupports articles, videos a...
Generated App Demo           http://vimeo.com/46828771
How we built it.(advice on building JS Windows Store apps)
You know what the funniest   thing about Windows 8 is?                                                What?Its the little ...
Use JS, but...not your favorite JS libraries
"Little" differences.AJAX calls: only using WinJS         $.ajax()          WinJS.xhr()HTML insertion: nope, use DOM manip...
Use WinJS APIYou will have to learn a new frameworkwell structured (Object Oriented, asynchronous)well documentedbut a lit...
Start from samples, not from scratch
For every feature,look for examples and doc            http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-A...
Visual StudioGreat:● auto-completion● code check● simulator
Visual StudioHorrible:● DOM inspector● JS errors  ○ Stacktrace is here but very often unreadable● CSS  ○ change & reload, ...
BlendLive CSS editing but...● heavy tool, too many buttons● generated CSS not very smart  (use the UI only for tweaks)● st...
Checklistfor a great Windows Store app● Design                                  Read about Windows 8 design               ...
Think about Offline mode Handle connection lostif(Windows.Networking.Connectivity.NetworkInformation    .getInternetConnec...
IE10 vs Webkit or Gecko                                   http://jsbin.com/oyajog/5          p {                   http://...
How it will help you.
For content-based apps, no need toreinvent the wheel.You use                         to createblogs and simple websites.Us...
Joshfire Factory Demo         http://factory.joshfire.com
Questions?
we   re h       iring            !
Windows 8 app template feedback
Upcoming SlideShare
Loading in …5
×

Windows 8 app template feedback

1,489 views

Published on

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/)

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,489
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
6
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Windows 8 app template feedback

  1. 1. Windows 8 Metro Application Template How we built it. How it will help you.Steren Giannini Meetup Windows 8 2012-10-01
  2. 2. Windows 8 Metro Application Template How we built it. How it will help you.Steren Giannini Meetup Windows 8 2012-10-01
  3. 3. Windows Store Application Template How we built it. How it will help you.Steren Giannini Meetup Windows 8 2012-10-01
  4. 4. @SterenProduct manager at Joshfire
  5. 5. Windows Store app Templateto easily create content-based applicationsin Windows Store app stylesupports articles, videos and picturesfully integrated with Windows 8
  6. 6. Generated App Demo http://vimeo.com/46828771
  7. 7. How we built it.(advice on building JS Windows Store apps)
  8. 8. You know what the funniest thing about Windows 8 is? What?Its the little differences. I mean, they got the same shit over there that we got here, but its just...its just, its a little different.
  9. 9. Use JS, but...not your favorite JS libraries
  10. 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. 11. Use WinJS APIYou will have to learn a new frameworkwell structured (Object Oriented, asynchronous)well documentedbut a little too much -likeuse for Views, Data and Navigation(WinJS view widgets do all the work for you)
  12. 12. Start from samples, not from scratch
  13. 13. For every feature,look for examples and doc http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
  14. 14. Visual StudioGreat:● auto-completion● code check● simulator
  15. 15. Visual StudioHorrible:● DOM inspector● JS errors ○ Stacktrace is here but very often unreadable● CSS ○ change & reload, no live editing -> use Blend
  16. 16. BlendLive 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. 17. Checklistfor 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. 18. Think about Offline mode Handle connection lostif(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 placeholdersDo not assume your data loads display a network warning message
  19. 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. 20. How it will help you.
  21. 21. For content-based apps, no need toreinvent the wheel.You use to createblogs and simple websites.Use the and thistemplate to create content-based apps for youor your clients.
  22. 22. Joshfire Factory Demo http://factory.joshfire.com
  23. 23. Questions?
  24. 24. we re h iring !

×