1. Windows store apps:
WinJS vs PhoneGap
Damyan Petev
Technical Evangelist, Infragistics
dpetev@infragistics.com
@DamyanPetev
Mihail Mateev
Senior Technical Evangelist, Infragistics
mmateev@infragistics.com
@MihailMateev

2. Agenda
•
•
•
•
•
•
Windows Store Apps Intro
WinJS and all that madness
Similarities and differences
PhoneGap
Resources
Q&A

3. Microsoft
Microsoft

4. Principals
•
•
•
•
•
Pride in craftsmanship
Fast and fluid
Authentically digital
Do more with less
Win as one

5. WinJS
• Controls and
other UI building
blocks for
Modern UI style
apps
• Style sheets with
default Modern
UI style design
• Common
infrastructure for
responsive,
HTML / CSS
• Powerful engine
for creating user
interfaces
• Reuse skills &
code from the
standard web
• New HTML / CSS
features give you
the capabilities to
make great UI/UX
WinRT
• Seamlessly
integrate with the
Modern UI style
shell
• Connect to other
apps through
contracts
• Access storage,
devices, and
other capabilities
of the PC

6. WinJS
Toolkits

8. IE is ok these days!
•
Like, it actually is!

9. Why WinJS Apps
If You are a web developer today …
Build Native Apps With Your Existing Skill Set and
Experience (mostly )
–
–
–
–
Familiar programming model
Full benefit of hardware acceleration
WinRT API & feature access
Popular JavaScript libraries work in WinJS apps - jQuery,
Ignite UI, Knockout, Angular, game engines, etc

10. WinJS.xhr
HTML/DOM Utils
WinJS Element
Attributes
Logging Utils
WinJS
WinJS.Promise
Element
Selection/
Querying
Keyboard Key
Enumeration
Validation
WinJS
WinJS.PromiseStat
eMachine
Coordinate
Conversion
Support for WinJS
declarative model
(supportedForProc
essing)
Class definition
and inheritance
WinJS.Class
Namespace
definition utilities
WinJS.Namespace
WinJS.ErrorFro
mName
Localized String
Utilities
Data-win-res
processing
Semantic Zoom
ViewBox
ListView
Flyout
SettingsFlyout
Menu
Menu
Command
GridLayout
ListLayout
WinJS Toolkits
Support for
declarative model
(processAll)
Controls
Utilities (
setOptions)
IZoomableView
Custom Layout
Interface
AppBar
IListBinding
Fragment loading
and rendering
WinJS.UI.Fragments
IListDataSource
IListDataAdapte
r
IListN
H
DataSourceStatus
StorageDataSo
urce
VirtualizedData
Source
Erro
FlipView
WinJS.UI.
Animation
helpers
Animation
Library
Data Binding
(as, bind)
Mixins
WinJS.Binding.
List
Conversions
List Projections
Support for
declarative
databinding
Animation System
Management
Application
Events
WinJS.
Application.
sessionState
WinJS.Navigation
Functions
local
(storage)
roaming
(storage)
temp
(storage)
WinJS.UI.Pages.
PageControl
WinJS.Binding.
Template
WinJS.UI.Pages.
IPageControlM
embers
Tooltip
Rating
TabContainer
TimePicker
DatePicker
ToggleSwitch
HTMLControl
Light StyleSheet
Dark StyleSheet

11. Personality
What Makes a Windows Store App a
Windows Store App?
•
•
•
•
•
•
•
•
•
Fast & Fluid
Live Tiles
Animations
Transitions
Charms
AppBar
Search
Contracts
Device Access

12. Controls
Native Windows Controls

13. Extra UI at no cost
App Bar
Settings

14. Windows UI Apps feature
adaptive layouts :
Layouts
•
•
•
Multiple screen size support
Snapped and filled view
states
Handle rotation
CSS Layouts :
• CSS Grid, CSS Flexbox, CSS
Multicolumn, Media Queries
• Fast & Fluid Native
performance
X
Full View
Snapped
View
X
Fill View

15. Transforms &
Animations
CSS & WinJS Animation Library
Page transition
Content transition
Fade in/out
Crossfade
Pointer up/down
Expand/Collapse
Reposition
Show/Hide popup
Show/Hide edge UI
Show/Hide panel
Add/Delete from list
Add/Delete from search list
Peek
Badge update
Start/End a drag or drag-between
Swipe hint
Swipe select/deselect

16. Touch, Pan, Zoom,
Scroll
Fast & Fluid Interaction via CSS
Windows Store Apps feature direct manipulation panning and zooming of content
as a predominant user interface paradigm.
CSS gives you:
• Support touch, mouse, and keyboard
• “Stick to the finger” experience for panning and zooming
• Consistent user experience with rails, inertia, and boundary feedback
• Support for snap points, nesting, and chaining

17. WinJS Stylesheets
Styling an App
•
Beautiful Dark & Light styles are built in
•
Well defined, meaningful selectors you can easily understand and override
•
Visual Studio templates help a lot

19. default.css
• Transparent to developers
• Provides styles for:
– Base elements (HTML, Body, Iframe…)
– Text elements (H1, P, DD…)
– HTML controls (checkbox, radio
button, range…)
– WinJS controls (ratings, toggle…)
– Additional text element style classes
(title, subtitle, item text…)
– Additional HTML control style classes
(back button…)

20. Built-in styling classes
<!– Get a custom back button look -->
<button class="win-backbutton"></button>
<h1 class="win-title">win-title</h1>
<h1 class="win-contentTitle">wincontentTitle</h1>
<h1 class="win-contentSubtitle">wincontentSubtitle</h1>

21. ALM

22. Is it really the same?

23. Of standards and popular terms
Modern patterns and practices you might know/have seen
• Strict mode
• Promises [ async ]
• SPA

24. I’ll get back to you.. I promise!*
from the callback with love
var promise = doSomeWork();
promise.then(function(foo){
// continue working here
return doSomeMoreWork();
}).then(function(result){
// …
});
*but can’t promise to solve all your problems.

25. SPA

26. Single Page App
• Web is stateless in nature
• Navigation means loosing context
• Apps shouldn’t be like that, so:

27. SPA
•
Keeping it familiar…
<!-- A hyperlink to page2.html. --> <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>

28. Simple…
WinJS.Utilities.query("a").listen("click",
this.linkClickEventHandler, false);

29. Pages & Navigation
Application Shell
Page Content
• Navigation template
• AppBar integration
• Load and [unload] chunks of HTML + CSS
+ JS
• Page content can be dynamic including
other WinJS controls within it
• Context & State are maintained
A series of events to control the process:
Before
Navigate
before navigation
attempt
Navigating
navigating away from
a page
Navigated

30. The platform differences
• No alert 
• ms-appx:/// vs. http(s):// vs. file:/// vs. ms-appdata:///
X
X
• DOM Security - With great power come.. great restrictions :)
Still OK :
• window.close() //quite useless though
• createElement

31. Not in the face !!111!1!!
•
If ( using DOM) filter through toStaticHTML()
–
–
–
–
–
–
•
•
createContextualFragment
innerHTML / outerHTML
insertAdjacentHTML
pasteHTML
document.write / document.writeln
DOMParser.parseFromString
WinJS.Utilities.markSupportedForProcessing(functionName);
Alternative?
var someElement = document.getElementById('someElementID');
MSApp.execUnsafeLocalFunction( function() {
someElement.innerHTML = '<div onclick="console.log("hi");">hi</div>'
});

32. Controls + Data Binding
•
Rating:
<div id="Div1" data-win-control="WinJS.UI.Rating"
data-win-bind="winControl.averageRating: rating"
data-win-options="{maxRating:5}"></div>
• AppBar:
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand“..
• Navigation container:
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}">
</div>

33. Demo Time!

34. Debug
• DOM Explorer and JavaScript Console
• Remote Debug
• Simulation of states
• VS 2013 – Performance and Diagnostics

36. PhoneGap

37. Why PhoneGap?
• There are more
than 100 000 000
WEB developers!
• The web is
awesome!

38. What is PhoneGap ?
Your Code

39. What is PhoneGap ?
Your Code
Native Web View

40. What is PhoneGap ?
Your Code
Native Web View
Native APIs

41. What is PhoneGap ?
Your Code
Native Web View
Native APIs
Native App - .apk, .xap, etc.

42. What is PhoneGap ?
• PhoneGap / Cordova for Windows Store App
uses WinJS
• There is no “special” cordova Web View for
WinRT

43. PhoneGap / Cordova API
•
•
•
•
•
•
Accelerometer
Camera
Capture (video)
Compass
Connection
Contacts
•
•
•
•
•
•
•
Device
File IO
Geolocation
Globalization
Media
Notifications
Storage (database)

44. PhoneGap / Cordova Platforms

45. PhoneGap / Cordova Platforms

46. PhoneGap / Cordova CLI
Requires Node.js
$ npm install -g cordova
$ cordova create hello com.example.hello
HelloWorld
$ cordova platform add windows8
$ cordova run windows8
$ cordova emulate windows8
$ cordova platform update windows8

47. Debugging PhoneGap for
Windows Store Apps:
• 2 ways to debug PhoneCap/Windows 8.x App
– As WinJS App
– As PhoneGap App (winery, http://debug.phonegap.com/)

48. Naturally, apps targeted at 8.1
don’t get scaled down for Win 8.
So yeah, there’s that.

49. The take away
•
WinJS vs PhoneGap is a matter of API preference and code portability
•
Windows Store basic rules apply to PhoneGap
•
Do whatever you feel like, as long as you:
– Stay within platform look and feel
– Understand the sandbox model of the app
•
Mash up frameworks and tools:
– Should be compatible (like jQuery 2.x)
– Or use workarounds

50. •
Състезание 1: Windows
8.1 или Windows Phone 8
http://bgapps.promorc.com/
• Състезание 2: Win 8 app
– Best UX
– Most Innovative
– Best migrated from WP
– More worldwide
http://winappdevcon.promorc.com

51. Resources
•
The ‘everything you need and more’ place:
– http://msdn.microsoft.com/en-US/windows/apps/
• Windows 8 samples:
– http://code.msdn.microsoft.com/windowsapps/Windows-8-app-samples-4d76cbbf
• Windows 8.1 Samples:
– http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-AppSamples
• Free ebook: Programming Windows Store Apps with HTML, CSS, and JavaScript, Second
Edition (second preview):
• http://aka.ms/secondedition/secondpreview
http://blogs.msdn.com/b/microsoft_press/archive/2013/10/29/free-ebook-programmingwindows-store-apps-with-html-css-and-javascript-second-edition-second-preview.aspx

52. Resources & Q&A
•
•
•
WinJS for the PhoneGap developer blog series:
– http://blogs.msdn.com/b/glengordon/
Windows 8 Platform Guide
– http://docs.phonegap.com/en/edge/guide_platforms_win8_index.md.html
Next event: Building your first Analysis Services solution (11 of February, 2014)
– Speaker: Ivan Donev

53. Resources & Q&A
•
Next conference: Azure Bootcamp Bulgaria (29 of Mach, 2014)

54. THANK YOU!