Embed Size (px)
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 WinJS
Citation preview
WEB App DevelopmentUsing WinJSAlexandre Marreiros18 – 06 – 2014 Microsoft Lisbon Experience
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
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 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.”
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..”
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.”
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.”
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 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.”
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 )
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.”
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
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
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
• Unit tests are runnable using QUnit
WinJS and cross Browsing
Today State of the Art
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.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
Questions
Contacts:[email protected] / [email protected]; @alexmarreiros; http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21; www.digitalmindignition.com
Thanks
