Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEB App Development
Using WinJS
Alexandre Marreiros
18 – 06 – 2014 Microsoft Lisbon Experience
About
CTO @ Innovagency
Technical Trainer, Speaker & Consultant as Self Employee
Microsoft DevCamp Trainer 2014
Teacher @ ...
Raise your hand if you’ve built either a
Windows Store or Windows Phone App
using WinJS?
Raise your hand if already know WinJS?
Raise your hand if you’ve built for the
Web?
Agenda
• WinJS FACTS
• Try WinJS
• Demos
• References
WinJS Facts
“WinJS is a JavaScript library that was first created for
Windows 8 to enable first class, native-quality
expe...
WinJS Facts
“WinJS 2.0 was introduced with Windows 8.1 and added
new UX patterns like the Hub control, and optimized
perfo...
WinJS Facts
“WinJS was initially focused on native Windows Runtime
apps, but began to focus on other platforms by debuting...
WinJS Facts
“Continuing in this spirit, the library has been extended to
smaller and more mobile devices with the release ...
WinJS Facts
“HTML and WinJS is a equal technology citizen when
creating Universal Apps and a good way to go.”
WinJS Facts
WinJS Facts
Welcome WinJS all devices
Why not go cross plataform?
“Why go cross-platform?
The top feedback from developers who use HTML/CSS/JavaScript for their...
WinJS references
• Tool official website (http://msdn.microsoft.com/en-us/windows/dn632015.aspx)
• WinJS on GITHUB (https:...
WinJS under na opensource
licence
“the source code of the Windows Library for JavaScript (WinJS) was released
under the Ap...
Let’s try WinJS
• http://try.buildwinjs.com/
Demo development webapp with
WinJS
Demo 1: Convert from Windows Store App to Web aPP
Demo 2: Bild from scratch a Chef webs...
Steps to use WinJS on Web Dev
1- Clone WinJS from GitHub mae sure you have git and Node.JS installed
2- Install Grunt comm...
Future known preview
WinJS known Agenda
Insights about WinJS
Inside WinJS
• The WinJS is now hosted on GitHub
• CSS files are now being generated with LESS CSS
• ...
WinJS and cross Browsing
Time to build your Windows apps
Try yourself
Play with samples
Contribute
Welcome WinJS all devices
• WinJS the road ahead (http://channel9.msdn.com/Events/Build/2014/2-506 )
• WinJS lock inside (http://www.juliencorioland...
Questions
Contacts:
amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexand...
Thanks
Upcoming SlideShare
Loading in …5
×

WebSite development using WinJS

2,291 views

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

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: 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 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 (http://msdn.microsoft.com/en-us/windows/dn632015.aspx) • WinJS on GITHUB (https://github.com/winjs/winjs/ ) • WinJS on StackOverflow (http://stackoverflow.com/questions/tagged/winjs )
  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 • http://try.buildwinjs.com/
  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 http://readwrite.com/2014/04/04/winjs-how-to-build-app-html5-10-steps
  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 (http://channel9.msdn.com/Events/Build/2014/2-506 ) • WinJS lock inside (http://www.juliencorioland.net/archives/developping-web- applications-with-winjs#.U6Gk-PldU4s ) • Try WinJS (http://try.buildwinjs.com/ ) • GitHub (https://github.com/winjs/winjs#build-winjs ) • WinJS RoadMap (https://github.com/winjs/winjs/wiki/Roadmap ) References
  28. 28. Questions Contacts: amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexandre- marreiros/8/4b8/a21; www.digitalmindignition.com
  29. 29. Thanks

×