Transitioning from Web Developer to Windows Store Developer: A Comprehensive Guide
This guide explores the journey of transitioning from a web developer to a Windows Store developer, focusing on WinJS—a JavaScript library for creating modern apps for Windows. We’ll cover the key concepts of WinRT architecture, lifecycle management, and program patterns. Discover the advantages of using WinJS, including out-of-the-box support for Microsoft design guidelines and a rich library of controls. We’ll provide demos and practical examples of data bindings and app management, highlighting why learning WinJS is beneficial for modern app development across various devices.
Transitioning from Web Developer to Windows Store Developer: A Comprehensive Guide
E N D
Presentation Transcript
Leap from Web-developer to Windows Store developer Angelo Chan Kamran Bilgrami
Agenda • WinJS - What and Why • Modern Apps • WinRT Architecture • Demos • Controls • Data Bindings • Program LifeCycle Management (PLM)
What is WinJS? • Windows Library for JavaScript • Used for creating Windows Store Apps • Rapidly Evolving • Universal Windows Apps (UWAs) • Can target Tablet, Desktop, Phone, XBox • Open Source (in Beta). Can be used across Browsers. • http://try.buildwinjs.com/
What does WinJS offer • Coding Patterns • Promises, Mixins, Modules • Navigation Framework • Utilities • Animations, DOM Selector • Rich Library of Controls • XHR API (Ajax)
Why bother to learn WinJS? • Two primary advantages • Optimized for Microsoft Design Guidelines • Available out of box • You can use other JS frameworks for creating Windows store Apps • Will require more work to comply Modern Apps Design guidelines
Why bother to learn WinJS? • Microsoft putting lot of weight behind it • Not many 3rd party Apps built using WinJS yet • A separate MCSD track for JS developers
Requirements • Windows 8.1 • Download built-in VMs for various OS http://goo.gl/hhxz0V • Visual Studio 2013 • Express Edition is a free download • You need Update 2 RC for UWAs
What are Modern Apps • Previously known as “Metro style apps” • Focus is Content consumption • Content before Chrome • Follows Modern Design Guidelines • Use new Windows Runtime (WinRT) • Follows Program Life Cycle Management (PLM)
Visual Studio Templates Introduction to Simulator
WinJS Controls • Consists of a container element • Typically a div element • Set type of control using data-win-control • Set any options using data-win-options • WinJS.UI.processAll() to instantiate controls • Two ways of creation • Declarative • Programmatic
WinJS Data Bindings • Mechanism to connect JS data source to HTML elements • Allows separation of view and model • data-win-bind attribute is used to connect source to target • WinJS.Binding.processAll ties UI element with data • UI elements could be notified of any data changes by using observable objects
Key Differences • Stateful • Not a typical http client server architecture • Different life cycle management • Cannot use any browser based functions. • Debugging differnces • No View Source or F12 Developer Tools • Native device Access