My presentation discussing why use HTML aproach in the Windows Store apps development. This presentation was the base of my talk at the 44 Meting of portuguese netponto Development Community

1. http://netponto.org
Windows 8.1 with HTML5/JS
Alexandre Marreiros
44ª Reunião Presencial @ LISBOA
DateTime.Parse(“18-01-2014", new CultureInfo("pt-PT"));
hashtag #netponto

2. About / Contact
Alexandre Marreiros
Who
–
–
–
–
–
–
CTO @ Innovagency
Software Dev/Arch as Independent
Technical Trainer and Speaker as Independent
Technical Writer
UX Consultant
Lecturer@ EDIT
Contact
– amarreiros@gmail.com
– @alexmarreiros
– Digitalmindignition.com

3. Agenda
– Windows 8.1 Platform / API
– Windows 8.1 Tech view HTML 5 vs XAML
– Windows 8.1 And Windows Phone 8
– Windows 8.1 Tech view HTML

4. Windows 8.1 Store Apps

5. Windows 8.1 APIS

6. Windows 8.1 APIS
http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx

7. Windows 8.1 Store Apps Platform

8. Windows 8.1 & Windows Phone 8
http://www.bubblews.com/news/1730683-microsoft-to-combine-their-windows-8-and-windows-phone-app-stores

9. Windows 8.1 & Windows Phone 8
MSDN Magazine

10. Windows 8.1 & Windows Phone 8

11. Windows 8.1 & Windows Phone 8
Sharing technique
Separate UI and app logic using the Model-ViewViewModel pattern
Share functionality using Portable Class Libraries
Share code with Add as Link
Share using Windows Runtime Components
Sharing XAML UI
Conditional compilation with preprocessor directives
When to use
This guidance is applicable to many app types, but particularly to apps that have a XAML UI.
Separation allows you to write the app logic and to concentrate on user experience design
separately. An added benefit is that your app logic is more likely to be common for your app on
both platforms, and therefore is a great candidate for code sharing using the rest of the
techniques described here. Model-View-ViewModel (MVVM) is a great way to achieve this
separation.
Windows Phone 8 and Windows 8 share the same .NET Framework engine. In a XAML app, most
of your app logic will be written in managed code. If you are using the MVVM design pattern, you
have the potential to share your viewmodel and potentially your model. Note that Portable Class
Libraries are a .NET Framework concept and don’t support C++.
Use this technique for code that is non-portable and therefore can’t be implemented in a
Portable Class Library. For example, Windows Phone 8 and Windows 8 can use the common
Windows Runtime API surface to harness the power of each platform for networking, proximity,
in-app purchase, and many other features. Portable Class Libraries don’t support Windows
Runtime API. Instead, you can abstract this non-portable code, which is common to both
platforms, into a class that can be shared using Add as Link in Visual Studio. In C++ projects files
are added to projects as linked files by default.
In addition to consuming the common Windows Runtime API available on both platforms, you
can write your own Windows Runtime Component to make your functionality available in all
supported languages. This can be written in C++ and consumed by C# or VB. This is a very useful
technique for language interoperability or for when you want to write compute-intensive code in
C++ and use it in all languages.
The UI in Windows Phone 8 and Windows 8 is written in XAML. However, the XAML
implementations are not portable between the platforms. But you can isolate some of your
custom basic UI building blocks into UserControls and share those classes as linked files that will
be compiled for each platform. This technique is limited and should be used only for simple,
reusable parts of your UI. The core of your UI should be built and tailored separately for each
platform.
If you have functionality that’s implemented differently for Windows Phone 8 and Windows 8,
you can use conditional compilation to compile the code suitably for each platform. You can’t use
conditional compilation in a Portable Class Library.

12. Windows 8.1 & Windows Phone 8

13. Windows 8.1 & Windows Phone 8
Windows Phone 8
View technologies
Windows 8.1

14. Windows 8.1 & Windows Phone 8
WP 8 APP
W 8 APP based on
HTML 5

15. Windows 8.1 & Windows Phone 8

16. Windows 8.1 & Windows Phone 8
But today we will not talk about responsive or cross device development or pattern’s, just want that you
keep in mind that there are diferences and even if we want a ap for wp and windowa we can still use HTML
5 in Windows. Becouse even using xaml we may not have/want a total app reuse.

17. Windows 8.1 With HTML
“It also means that you’ll be able to leverage existing investments in JavaScript libraries and CSS
template repositories: writing a native app doesn’t force you to switch frameworks or engage in
expensive porting work. That said, it is also possible to use multiple languages to write an app,
leveraging the dynamic nature of JavaScript for app logic while leveraging languages like C# and
C++ for more computationally intensive tasks”
Kraig Brockschmidt

18. Windows 8.1 With HTML
- Reuse already tested front end code ( Forms, animations);
- Explore CSS, HTML & JS flexibility
- Reuse KB from the past
- Adoption in app development of Professionals with a estetical, UX and
ergonomic sense

19. Windows 8.1 With HTML
Other platforms that run HTML and JavaScript
native:
• FirefoxOS
• WebOS

20. Windows 8.1 With HTML

24. Windows 8.1 With HTML
Popular features of CSS 3 are well supported in Windows 8.1

25. Windows 8.1 With HTML
Popular features of HTML 5 are well supported in Windows 8.1

26. Windows 8.1 With HTML
Windows

27. Windows 8.1 With HTML
HTML 5 based Windows
Store Apps Container

28. Windows 8.1 With HTML
WINJS is a collection of toolkits to make building Windows Store apps fast and
easy
Windows 8 app
Windows 8.1 app
WinJS 1.0
WinJS 2.0

29. Windows 8.1 With HTML
WinJS controls declaration
<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div>
 Declarative Way
WinJS controls are divs with
atributtes that are processed
when the processall method
runs.
In the HTML File
<div id="calendarDiv" ></div>
In th JS file
var calendarDiv = document.getElementById("calendar");
var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);
 Imperative Way

30. Windows 8.1 With HTML
We can use any javascript framework once she
run on Internet Explorer 11

31. Windows 8.1 With HTML
Tools

32. Windows 8.1 With HTML
Visual Studio offers a set of template to make easy to start a project

33. Windows 8.1 With HTML
Visual Studio project struture
WINRT library instaciated directly by
the app

34. Windows 8.1 With HTML
CSS Libraries for the Windows store
app
Windows Store App Images
JavaScript

35. Windows 8.1 With HTML
App certify
App Manifest

36. Windows 8.1 With HTML
WinJS 2.0 what’s new
Improved Controls
Infrastructure
• List view
• Scheduler
• App bar
• Dispose model
• Async debugging
New Controls
Building Blocks
• Hub
• Binding template
• Navigation bar
• Repeater
• Search box
• Item Container
• Back button

37. Windows 8.1 With HTML

38. Windows 8.1 With HTML

39. Windows 8.1 With HTML

40. Windows 8.1 With HTML

41. Windows 8.1 With HTML

42. Windows 8.1 With HTML
Conider the declaration of a list

43. Windows 8.1 With HTML
Define the list Template

44. Windows 8.1 With HTML

45. Windows 8.1 With HTML
• ListView Changes
• Hub Control
• WebView Control
Are 3 controls that worth also a view let’s see this 3 in
action

46. Windows 8.1 With HTML

47. Windows 8.1 With HTML
Prior to Windows 8.1 you only had Iframes as a way to embeb external sites
Full reference about WebView http://blogs.windows.com/windows/b/appbuilder/archive/2013/07/17/what-snew-in-webview-in-windows-8-1.aspx

48. Windows 8.1 With HTML

49. Windows 8.1 With HTML

50. Windows 8.1 With HTML
Recomended
Article for the ones starting to debug Windows 8 .1 HTMl store APPs with visual Studio 2013
http://msdn.microsoft.com/en-us/library/windows/apps/hh441474(v=vs.120).aspx

51. Windows 8.1 With HTML

52. Windows 8.1 With HTML
Beware

53. Windows 8.1 With HTML
Beware

54. Recap

55. References
- Programming Windows Store Apps With HTML, CSS and Javascript Second Edition, Microsoft Press
- Windows 8.1 Controls - Windows Store Apps with HTML5 Refresh (http://www.youtube.com/watch?v=Drkh8Pb2li4)
- HTML Controls for Windows Store APPS (http://msdn.microsoft.com/en-us/library/windows/apps/bg182879.aspx)
- API changes for Windows 8.1 (http://msdn.microsoft.com/en-us/library/windows/apps/dn263112.aspx)
- Windows Dsev Center (http://msdn.microsoft.com/en-US/windows/apps/br211386)
- Windows 8.1 Store apps starter pack with canonical samples (http://code.msdn.microsoft.com/windowsapps/Windows-8Modern-Style-App-Samples)
- Building Windows Store 8.1 apps using HTML, CSS and JavaScript @Channel 9
(http://channel9.msdn.com/Events/TechDays/TechDays-13-Basel/Building-Windows-Store-8-1-apps-using-HTML-CSS-andJavaScript)
Onlne Live event : Windows 8.1 Developer Training: Geek Edition @ Microsoft Academy
(http://www.microsoftvirtualacademy.com/liveevents/windows-8-1-developer-training-geek-edition#?fbid=E0I-ctThA1I)

56. Contacts
– amarreiros@gmail.com
– @alexmarreiros
– Digitalmindignition.com
http://www.sprintfeed.com/2011/10/introducing-its-your-turn/
Questions

57. Próximas reuniões presenciais
23/11/2013 – Novembro (Lisboa)
30/11/2013 – Novembro (Porto)
14/12/2013 – Dezembro (Lisboa)
18/01/2014 – Janeiro (Lisboa)
Reserva estes dias na agenda! :)

58. Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal

59. Patrocinadores “GOLD”
Twitter: @nokia
http://www.nokia.com

60. Patrocinadores “Silver”

61. Patrocinadores “Bronze”

62. Próximas reuniões presenciais
18/01/2014 – Janeiro (Lisboa)
01/02/2014 – Hackathon! (Lisboa)
22/02/2014 – Fevereiro (Lisboa)
22/03/2014 – Março (Lisboa)
12/04/2014 – SQL Saturday! (Lisboa)
19/04/2014 – Abril (Lisboa)
Reserva estes dias na agenda! :)