WebSite development using WinJS


Published on

The slides of a session at 2014 Microsoft Portugal Tech Refresh. The session was na introdution to the potential of the use of WinJS for webdevelopment.

Was also a state of the art about WinJS

Published in: Technology
  • Be the first to comment

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
  • 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, since as we had seen what has valid for WINJS stills valid for WINJS 2.0 i will give you also some references for Windows 8
  • 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 on Windows 8.1 HTML develop, still tuned with the rest of the session more nice things to see next
  • WebSite development using WinJS

    1. 1. WEB App 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 2014 Teacher @ EDIT Software Developer & Architect as Consultant Tech Writer and Revier as Self Employee Digital business & UX Consultant Contacts: / @alexmarreiros Alexandre Marreiros
    3. 3. Raise your hand if you’ve built either a Windows Store or Windows Phone App using WinJS?
    4. 4. Raise your hand if already know WinJS?
    5. 5. Raise your hand if you’ve built for the Web?
    6. 6. Agenda • WinJS FACTS • Try WinJS • Demos • References
    7. 7. WinJS Facts “WinJS is a JavaScript library that was first created for Windows 8 to enable first class, native-quality experiences in Windows Runtime apps using familiar web technologies like HTML, CSS, and JavaScript. The first version of WinJS provided high-quality infrastructure including page controls, promises, and data-binding. It also offered polished UI capabilities like virtualized collections and high performance controls such as ListView, FlipView, and semantic zoom.”
    8. 8. WinJS Facts “WinJS 2.0 was introduced with Windows 8.1 and added new UX patterns like the Hub control, and optimized performance for greater flexibility for designers and developers..”
    9. 9. WinJS Facts “WinJS was initially focused on native Windows Runtime apps, but began to focus on other platforms by debuting in the Xbox One apps, adapting to the Xbox look and feel, and allowing new inputs like voice using Kinect.”
    10. 10. WinJS Facts “Continuing in this spirit, the library has been extended to smaller and more mobile devices with the release of WinJS 2.1 for Windows Phone 8.1, which had seen this morning.”
    11. 11. WinJS Facts “HTML and WinJS is a equal technology citizen when creating Universal Apps and a good way to go.”
    12. 12. WinJS Facts
    13. 13. WinJS Facts
    14. 14. Welcome WinJS all devices
    15. 15. Why not go cross plataform? “Why go cross-platform? The top feedback from developers who use HTML/CSS/JavaScript for their app development is that they appreciate the reach it gives them across devices. Extending WinJS to other browsers and devices beyond Windows further extends their reach and allows them to bring the personality of Windows apps to the web without rewriting code or learning new skills. ”
    16. 16. WinJS references • Tool official website ( • WinJS on GITHUB ( ) • WinJS on StackOverflow ( )
    17. 17. WinJS under na opensource licence “the source code of the Windows Library for JavaScript (WinJS) was released under the Apache 2.0 license as an Open Source project by Microsoft Open Technologies (MS Open Tech). The source code is available now on GitHub where you are welcome and we encourage you to try it out, provide feedback, and submit contributions.”
    18. 18. Let’s try WinJS •
    19. 19. Demo development webapp with WinJS Demo 1: Convert from Windows Store App to Web aPP Demo 2: Bild from scratch a Chef website using Win JS and Flat design
    20. 20. Steps to use WinJS on Web Dev 1- Clone WinJS from GitHub mae sure you have git and Node.JS installed 2- Install Grunt command line Interface 3- Install WinJS on your machine
    21. 21. Future known preview
    22. 22. WinJS known Agenda
    23. 23. Insights about WinJS Inside WinJS • The WinJS is now hosted on GitHub • CSS files are now being generated with LESS CSS • Unit tests are runnable using QUnit
    24. 24. WinJS and cross Browsing
    25. 25. Time to build your Windows apps Try yourself Play with samples Contribute
    26. 26. Welcome WinJS all devices
    27. 27. • WinJS the road ahead ( ) • WinJS lock inside ( applications-with-winjs#.U6Gk-PldU4s ) • Try WinJS ( ) • GitHub ( ) • WinJS RoadMap ( ) References
    28. 28. Questions Contacts: /; @alexmarreiros; marreiros/8/4b8/a21;
    29. 29. Thanks