website development using winjs
DESCRIPTION
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 WinJSTRANSCRIPT
![Page 1: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/1.jpg)
WEB App DevelopmentUsing WinJSAlexandre Marreiros18 – 06 – 2014 Microsoft Lisbon Experience
![Page 2: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/2.jpg)
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 ConsultantContacts:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com
Alexandre Marreiros
![Page 3: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/3.jpg)
Raise your hand if you’ve built either a Windows Store or
Windows Phone App using WinJS?
![Page 4: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/4.jpg)
Raise your hand if already know WinJS?
![Page 5: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/5.jpg)
Raise your hand if you’ve built for the Web?
![Page 6: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/6.jpg)
Agenda
• WinJS FACTS
• Try WinJS
• Demos
• References
![Page 7: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/7.jpg)
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.”
![Page 8: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/8.jpg)
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..”
![Page 9: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/9.jpg)
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.”
![Page 10: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/10.jpg)
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.”
![Page 11: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/11.jpg)
WinJS Facts
“HTML and WinJS is a equal technology citizen when creating Universal Apps and a good way to go.”
![Page 12: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/12.jpg)
WinJS Facts
![Page 13: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/13.jpg)
WinJS Facts
![Page 14: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/14.jpg)
Welcome WinJS all devices
![Page 15: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/15.jpg)
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.”
![Page 16: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/16.jpg)
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 )
![Page 17: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/17.jpg)
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.”
![Page 19: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/19.jpg)
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
![Page 20: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/20.jpg)
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
![Page 21: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/21.jpg)
Future known preview
![Page 22: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/22.jpg)
WinJS known Agenda
![Page 23: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/23.jpg)
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
![Page 24: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/24.jpg)
WinJS and cross Browsing
Today State of the Art
![Page 25: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/25.jpg)
Time to build your Windows apps
Try yourself
Play with samples
Contribute
![Page 26: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/26.jpg)
Welcome WinJS all devices
![Page 27: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/27.jpg)
• 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
![Page 28: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/28.jpg)
Questions
Contacts:[email protected] / [email protected]; @alexmarreiros; http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21; www.digitalmindignition.com
![Page 29: WebSite development using WinJS](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548578ddb47959190d8b4e50/html5/thumbnails/29.jpg)
Thanks