Your SlideShare is downloading. ×
0
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Win j svsphonegap-damyan-petev-mihail-mateev

210

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
210
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 7. IE is ok these days! • Like, it actually is!
  • 8. 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
  • 9. 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
  • 10. Personality What Makes a Windows Store App a Windows Store App? • • • • • • • • • Fast & Fluid Live Tiles Animations Transitions Charms AppBar Search Contracts Device Access
  • 11. Controls Native Windows Controls
  • 12. Extra UI at no cost App Bar Settings
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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…)
  • 18. 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>
  • 19. ALM
  • 20. Is it really the same?
  • 21. Of standards and popular terms Modern patterns and practices you might know/have seen • Strict mode • Promises [ async ] • SPA
  • 22. 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.
  • 23. SPA
  • 24. Single Page App • Web is stateless in nature • Navigation means loosing context • Apps shouldn’t be like that, so:
  • 25. SPA • Keeping it familiar… <!-- A hyperlink to page2.html. --> <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
  • 26. Simple… WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
  • 27. 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
  • 28. 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
  • 29. 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>' });
  • 30. 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>
  • 31. Demo Time!
  • 32. Debug • DOM Explorer and JavaScript Console • Remote Debug • Simulation of states • VS 2013 – Performance and Diagnostics
  • 33. PhoneGap
  • 34. Why PhoneGap? • There are more than 100 000 000 WEB developers! • The web is awesome!
  • 35. What is PhoneGap ? Your Code
  • 36. What is PhoneGap ? Your Code Native Web View
  • 37. What is PhoneGap ? Your Code Native Web View Native APIs
  • 38. What is PhoneGap ? Your Code Native Web View Native APIs Native App - .apk, .xap, etc.
  • 39. What is PhoneGap ? • PhoneGap / Cordova for Windows Store App uses WinJS • There is no “special” cordova Web View for WinRT
  • 40. PhoneGap / Cordova API • • • • • • Accelerometer Camera Capture (video) Compass Connection Contacts • • • • • • • Device File IO Geolocation Globalization Media Notifications Storage (database)
  • 41. PhoneGap / Cordova Platforms
  • 42. PhoneGap / Cordova Platforms
  • 43. 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
  • 44. 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/)
  • 45. Naturally, apps targeted at 8.1 don’t get scaled down for Win 8. So yeah, there’s that.
  • 46. 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
  • 47. • Състезание 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
  • 48. 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
  • 49. 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
  • 50. Resources & Q&A • Next conference: Azure Bootcamp Bulgaria (29 of Mach, 2014)
  • 51. THANK YOU!

×