Universal Apps Development using HTML 5 and WINJS


Published on

Presentation about Windows 8 and Windws phone 8.1 cross development using the Universal APP concept.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • About me and feel free to contact if you have some questions
  • Windows 8 app model gives support for some of the most popular and used CSS 3 Features and make that fluid and beauthifull
  • Explain what WIN JS give us
  • WINJS sample
  • From a Windows 8 app to a universal app
  • Now it’s your turn to star using all this Knowldge to build your apps, for the new OS, and to help you i will give you some study and hands on references...
  • Here you have some references
  • Feel free to ask your questions if you don’t do it now you can always use my contacts, feel free to ask.
  • Thank you all for your time was a pleasure to spend this hour with you diging in to the Windows Universal app development using HTML
  • Universal Apps Development using HTML 5 and WINJS

    1. 1. Universal Application Development Using WinJS Alexandre Marreiros 18 – 06 – 2014 Microsoft Lisbon Experience
    2. 2. About CTO @ Innovagency Technical Trainer, Speaker & Consultant as Self Employee Microsoft DevCamp Trainer Teacher @ EDIT Software Developer & Architect as Consultant Tech Writer and Revier as Self Employee Digital business & UX Consultant Contacts: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21 www.digitalmindignition.com Alexandre Marreiros
    3. 3. Raise your hand if you’ve built either a Windows Store or Windows Phone App?
    4. 4. Raise your hand if you’ve built Windows Store App using WinJS and HTML 5?
    5. 5. Raise your hand if you’ve almost had to build 2 APPS to grant that you have a Windows Phone and Windows 8 APP?
    6. 6. Raise your hand if you’ve built “things” using JavaScript and HTML 5? Raise your hand if you’ve built WEB?
    7. 7. Agenda • Universal APPS • HTML 5 + WinJS Apps (review) • HTML 5 Universal APPS Project
    8. 8. Windows Store Projects Windows Phone Projects
    9. 9. Windows Platform Recent Past View Technologies: XAML + C# HTML5 + WINJS View Technologies: XAML + C#
    10. 10. Universal Projects
    11. 11. Windows Platform Nowadays Common Suported View Technologies HTML 5 Native Support XAML Native Support Some common Control Set
    12. 12. Universal Projects
    13. 13. Universal APPS Wins • Maintenance • Code Reuse • Productivity • User Experience cross platform
    14. 14. HTML 5 + WinJS Apps (review) Windows OS Kernel
    15. 15. HTML 5 + WinJS Apps (review) • Support the standards; • Allows the reuse of Web Knowledge; • Support for WEB Libraries (JQUERY, ANGULAR JS, and other’s); • Reuse of Web Developments
    16. 16. Some Popular CSS 3 Features
    17. 17. Some Popular HTML 5 Features
    18. 18. Universal Projects?
    19. 19. Universal app Project
    20. 20. Universal app Project
    21. 21. • Style sheets • Core (promises, class, namespace, etc.) • App model • Data binding WIN JS IS • Controls • Animations • Utilities A collection of toolkits to make building Windows Store apps fast and easy Use them when you wish to go a bit further into the OS, or reuse UX standard Windows Controls
    22. 22. Universal APPS and be responsiviness • Like when thinking the web when Thinking an APP many times there are some features that make more or less sense in some device or some layouts that had not just be adjusted but also need to be rethink. The Universal APP Microsoft model allows you to write once and run universal, but also to make some things special for some device based on patterns or user expectations.
    23. 23. • Show how to use WinJS Controls in a declarative manner and a imperative manner Review Demo <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.
    24. 24. • Show how to use WinJS Controls in a declarative manner and a imperative manner Review Demo  Imperative Way In the HTML File <div id="calendarDiv" ></div> In th JS file var calendarDiv = document.getElementById("calendar"); var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);
    25. 25. Universal Projects?
    26. 26. Universal app Project • List of WINJS Controls http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx
    27. 27. WINJS Universal app Project • The HTML platform on Windows Phone does not support a few HTML elements that are supported on Windows. These are the context menu, message dialog, and simple tooltip. Similarly, the file upload and progress ring controls work, but are not officially supported. • Adopting WinJS 2.1 in a Windows Phone app should feel seamless and familiar as previous work done in a Windows Store app with WinJS 2.0. The primary differences between versions are all about the controls, as befits the deltas between the Windows Phone and Windows user interfaces. Beyond that, the core capabilities and utilities of WinJS are identical, streamlining the development of universal apps for Windows to reach customers across devices.
    28. 28. WINJS Universal app Project • Unsuported WINJS components in WinJS 2.1 http://msdn.microsoft.com/en- us/library/windows/apps/dn632432.aspx#unsupported_apis
    29. 29. Universal app Project • List of WINJS Controls http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx
    30. 30. Universal Projects?
    31. 31. Porting store app to Univ aPP • Plan well your migration it can be very easy but have to be planed for that http://msdn.microsoft.com/en-us/library/windows/apps/dn636144.aspx
    32. 32. Recap • Universal APPS have a simple development model in the case of HTML 5 ntive apps • Building HTML APPS can be made with the reuse of assets we already have at ou development • Media Queries can be helpful to build shared UI • We have Javascript debugging • We are going universal but the possibility to minimize visual inconsistency but with the choice to turn some kind of assets unique for the Phone or the Store app
    33. 33. Conclusions • Universal apps are a primary way to build apps for all of our platforms in the future • We Love standards and KB/Code reuse so resuse your web KB/code • We can gain a lot going cross platform • HTML app development is a equal citizen in the native development approach in Windows Phone 8.1 and Windows 8.1 • You can still use specific development for a device in a universal app
    34. 34. Time to build your Windows apps
    35. 35. KB • http://typedmvvm.codeplex.com/ Sample application for hands on lab study • http://code.msdn.microsoft.com/wpapps/Universal-Windows-app-cb3248c3 Build session • http://typedmvvm.codeplex.com/ Sample application for hands on lab study • http://channel9.msdn.com/Events/Build/2014/2-506 Whats new the road ahead • http://channel9.msdn.com/Events/Build/2014/3-508 HTML 5 from web to apps • http://channel9.msdn.com/Events/Build/2014/2-540 Universal apps HTML 5 References
    36. 36. Questions Contacts: amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexandre- marreiros/8/4b8/a21; www.digitalmindignition.com
    37. 37. Thanks