Your SlideShare is downloading. ×
0
http://netponto.org

Windows 8.1 with HTML5/JS
Alexandre Marreiros

44ª Reunião Presencial @ LISBOA
DateTime.Parse(“18-01-...
About / Contact
Alexandre Marreiros
Who
–
–
–
–
–
–

CTO @ Innovagency
Software Dev/Arch as Independent
Technical Trainer ...
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...
Windows 8.1 Store Apps
Windows 8.1 APIS
Windows 8.1 APIS

http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx
Windows 8.1 Store Apps Platform
Windows 8.1 & Windows Phone 8

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

MSDN Magazine
Windows 8.1 & Windows Phone 8
Windows 8.1 & Windows Phone 8
Sharing technique

Separate UI and app logic using the Model-ViewViewModel pattern
Share fun...
Windows 8.1 & Windows Phone 8
Windows 8.1 & Windows Phone 8
Windows Phone 8

View technologies

Windows 8.1
Windows 8.1 & Windows Phone 8

WP 8 APP

W 8 APP based on
HTML 5
Windows 8.1 & Windows Phone 8
Windows 8.1 & Windows Phone 8

But today we will not talk about responsive or cross device development or pattern’s, just ...
Windows 8.1 With HTML
“It also means that you’ll be able to leverage existing investments in JavaScript libraries and CSS
...
Windows 8.1 With HTML
- Reuse already tested front end code ( Forms, animations);
- Explore CSS, HTML & JS flexibility
- R...
Windows 8.1 With HTML
Other platforms that run HTML and JavaScript
native:
• FirefoxOS
• WebOS
Windows 8.1 With HTML
Windows 8.1 With HTML
Popular features of CSS 3 are well supported in Windows 8.1
Windows 8.1 With HTML
Popular features of HTML 5 are well supported in Windows 8.1
Windows 8.1 With HTML

Windows
Windows 8.1 With HTML
HTML 5 based Windows
Store Apps Container
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 With HTML
WinJS controls declaration
<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div>

 Decla...
Windows 8.1 With HTML
We can use any javascript framework once she
run on Internet Explorer 11
Windows 8.1 With HTML
Tools
Windows 8.1 With HTML
Visual Studio offers a set of template to make easy to start a project
Windows 8.1 With HTML
Visual Studio project struture
WINRT library instaciated directly by
the app
Windows 8.1 With HTML
CSS Libraries for the Windows store
app
Windows Store App Images

JavaScript
Windows 8.1 With HTML
App certify
App Manifest
Windows 8.1 With HTML
WinJS 2.0 what’s new

Improved Controls

Infrastructure

• List view

• Scheduler

• App bar

• Disp...
Windows 8.1 With HTML
Windows 8.1 With HTML
Windows 8.1 With HTML
Windows 8.1 With HTML
Windows 8.1 With HTML
Windows 8.1 With HTML

Conider the declaration of a list
Windows 8.1 With HTML

Define the list Template
Windows 8.1 With HTML
Windows 8.1 With HTML
• ListView Changes
• Hub Control

• WebView Control
Are 3 controls that worth also a view let’s see ...
Windows 8.1 With HTML
Windows 8.1 With HTML

Prior to Windows 8.1 you only had Iframes as a way to embeb external sites
Full reference about Web...
Windows 8.1 With HTML
Windows 8.1 With HTML
Windows 8.1 With HTML
Recomended

Article for the ones starting to debug Windows 8 .1 HTMl store APPs with visual Studio 2...
Windows 8.1 With HTML
Windows 8.1 With HTML
Beware
Windows 8.1 With HTML
Beware
Recap
References
- Programming Windows Store Apps With HTML, CSS and Javascript Second Edition, Microsoft Press
- Windows 8.1 Co...
Contacts
– amarreiros@gmail.com
– @alexmarreiros
– Digitalmindignition.com

http://www.sprintfeed.com/2011/10/introducing-...
Próximas reuniões presenciais
23/11/2013 – Novembro (Lisboa)
30/11/2013 – Novembro (Porto)
14/12/2013 – Dezembro (Lisboa)
...
Patrocinadores “GOLD”

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

Twitter: @nokia

http://www.nokia.com
Patrocinadores “Silver”
Patrocinadores “Bronze”
Próximas reuniões presenciais
18/01/2014 – Janeiro (Lisboa)
01/02/2014 – Hackathon! (Lisboa)
22/02/2014 – Fevereiro (Lisbo...
Windows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netponto
Windows8.1 html5 dev paradigm discussion netponto
Upcoming SlideShare
Loading in...5
×

Windows8.1 html5 dev paradigm discussion netponto

4,462

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,462
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Explain: APP BAR NAV BARBackButton HUB controlListViewControlRepeaterWebview in thepastweonlyhaveiframe (independentnavigationstacklike a browser runing in theapp sport a stringsourcegood to readbadwebservices)
  • Transcript of "Windows8.1 html5 dev paradigm discussion netponto"

    1. 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. 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. 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. 4. Windows 8.1 Store Apps
    5. 5. Windows 8.1 APIS
    6. 6. Windows 8.1 APIS http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx
    7. 7. Windows 8.1 Store Apps Platform
    8. 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. 9. Windows 8.1 & Windows Phone 8 MSDN Magazine
    10. 10. Windows 8.1 & Windows Phone 8
    11. 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. 12. Windows 8.1 & Windows Phone 8
    13. 13. Windows 8.1 & Windows Phone 8 Windows Phone 8 View technologies Windows 8.1
    14. 14. Windows 8.1 & Windows Phone 8 WP 8 APP W 8 APP based on HTML 5
    15. 15. Windows 8.1 & Windows Phone 8
    16. 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. 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. 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. 19. Windows 8.1 With HTML Other platforms that run HTML and JavaScript native: • FirefoxOS • WebOS
    20. 20. Windows 8.1 With HTML
    21. 21. Windows 8.1 With HTML Popular features of CSS 3 are well supported in Windows 8.1
    22. 22. Windows 8.1 With HTML Popular features of HTML 5 are well supported in Windows 8.1
    23. 23. Windows 8.1 With HTML Windows
    24. 24. Windows 8.1 With HTML HTML 5 based Windows Store Apps Container
    25. 25. 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
    26. 26. 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
    27. 27. Windows 8.1 With HTML We can use any javascript framework once she run on Internet Explorer 11
    28. 28. Windows 8.1 With HTML Tools
    29. 29. Windows 8.1 With HTML Visual Studio offers a set of template to make easy to start a project
    30. 30. Windows 8.1 With HTML Visual Studio project struture WINRT library instaciated directly by the app
    31. 31. Windows 8.1 With HTML CSS Libraries for the Windows store app Windows Store App Images JavaScript
    32. 32. Windows 8.1 With HTML App certify App Manifest
    33. 33. 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
    34. 34. Windows 8.1 With HTML
    35. 35. Windows 8.1 With HTML
    36. 36. Windows 8.1 With HTML
    37. 37. Windows 8.1 With HTML
    38. 38. Windows 8.1 With HTML
    39. 39. Windows 8.1 With HTML Conider the declaration of a list
    40. 40. Windows 8.1 With HTML Define the list Template
    41. 41. Windows 8.1 With HTML
    42. 42. 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
    43. 43. Windows 8.1 With HTML
    44. 44. 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
    45. 45. Windows 8.1 With HTML
    46. 46. Windows 8.1 With HTML
    47. 47. 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
    48. 48. Windows 8.1 With HTML
    49. 49. Windows 8.1 With HTML Beware
    50. 50. Windows 8.1 With HTML Beware
    51. 51. Recap
    52. 52. 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)
    53. 53. Contacts – amarreiros@gmail.com – @alexmarreiros – Digitalmindignition.com http://www.sprintfeed.com/2011/10/introducing-its-your-turn/ Questions
    54. 54. 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! :)
    55. 55. Patrocinadores “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal
    56. 56. Patrocinadores “GOLD” Twitter: @nokia http://www.nokia.com
    57. 57. Patrocinadores “Silver”
    58. 58. Patrocinadores “Bronze”
    59. 59. 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! :)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×