1 / 26

Leap from Web-developer to Windows Store developer

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

madison
Download Presentation

Leap from Web-developer to Windows Store developer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Leap from Web-developer to Windows Store developer Angelo Chan Kamran Bilgrami

  2. Agenda • WinJS - What and Why • Modern Apps • WinRT Architecture • Demos • Controls • Data Bindings • Program LifeCycle Management (PLM)

  3. 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/

  4. What does WinJS offer • Coding Patterns • Promises, Mixins, Modules • Navigation Framework • Utilities • Animations, DOM Selector • Rich Library of Controls • XHR API (Ajax)

  5. 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

  6. 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

  7. 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

  8. 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)

  9. Legacy Apps

  10. Modern Apps

  11. What is WinRT

  12. Visual Studio Templates Introduction to Simulator

  13. WinJS Controls

  14. 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

  15. WinJS Controls

  16. 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

  17. WinJS Data Bindings

  18. Program Lifecycle Management

  19. Program Lifecycle Management

  20. Apps Activations

  21. PLM - Activation Kinds

  22. PLM – Execution States

  23. Program LifeCycle Management

  24. 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

More Related