Building html5 apps using Cordova

966 views

Published on

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

No Downloads
Views
Total views
966
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • You can use WinJS today to make apps for Windows desktops, laptops, tablets, convertibles, etc.
  • You can use WinJS today to make apps for Windows desktops, laptops, tablets, convertibles, etc.
  • Controls tailored for both dark and light experience
    Ability to match user’s Phone theme
  • Phone core signature animations available
    Windows animations also available
  • Examples of entrance animations. Argument can be a single element or an array of elements

    Continuum and slide(Right/Left)(In/Out) animations slightly more complicated (additional arguments: need to pass page object, root or content elements, etc.)
  • ListView “Feather” Turnstile animation
  • Building html5 apps using Cordova

    1. 1. MANY TOOLS OF THE TRADE • Intel XDK • PhoneGap • App Builder • Cordova
    2. 2. WHAT IT TAKES TO BUILD A CORDOVA APP Dependencies to install: 1. Joyent Node.js 2. Google Chrome 3. Git Command Line Tools 4. Apache Ant 5. Oracle Java 7 6. Android SDK 7. Apple iTunes 8. SQLite 9. WebSocket4Net Need to configure:  Command line targets  Environment variables  Deployment details  Build Server  Web Server  and more!
    3. 3. To help with all of this, you have the Multi- Device Hybrid Apps for Visual Studio extension. (Please feel free to send us suggestions for a longer name )
    4. 4. MULTI-DEVICE HYBRID APPS FOR VISUAL STUDIO EXTENSION This extension allows you to use Visual Studio to:  Acquire all required 3rd party dependencies  Configure everything to allow you to build/deploy for the Android, iOS, and Windows platforms  Debug apps running on Android and Windows Store  Easily add native device capabilities
    5. 5. WHAT HAPPENS BEHIND THE SCENES iOS + Android WWA
    6. 6. WHAT HAPPENS BEHIND THE SCENES Windows + Android iOS
    7. 7. Apache Cordova is that it provides access to native device capabilities not available to simple web apps via “plugins.” They provide JavaScript APIs that can access native code
    8. 8. Build iOS, Android™, Windows® Phone, webOS, BlackBerry)
    9. 9. Build
    10. 10. Build How do I get started with PhoneGap Build? Simply upload your web assets - a ZIP file of HTML, CSS and JavaScript, or a single index.html file - to PhoneGap Build, point us to your Git or SVN repository. PG Buld will compile & package for you. In minutes, you’ll receive the download URLs for all mobile platforms.
    11. 11. Publish to many app stores, across many form factors easily: • Apple App Store • Google Play • Windows Store • Tizen App Store • Nook Store (Android) • Amazon Store (Android) • Chrome Store (web app) • Facebook Store (web app)
    12. 12. RESOURCES • Secrets of a JavaScript Ninja • JavaScript: The Good Parts
    13. 13. LINK TO HTML5 CHEAT SHEET
    14. 14. DIVING INTO WINJS
    15. 15. Phone WinJS 2.1WinJS 2.0 WINJS TODAY New!
    16. 16. WINJS TODAY AND TOMORROW http://
    17. 17. USER THEMES
    18. 18. ANIMATIONS ON PHONE
    19. 19. Turnstile Slide
    20. 20. var incoming; // A single element or an array of elements WinJS.UI.Animation.turnstileForwardIn(incoming); WinJS.UI.Animation.turnstileForwardOut(incoming); WinJS.UI.Animation.turnstileBackwardIn(incoming); WinJS.UI.Animation.turnstileBackwardOut(incoming); WinJS.UI.Animation.slideUp(incoming); WinJS.UI.Animation.slideDown(incoming); USING ANIMATIONS
    21. 21. USING ANIMATIONS var listview = document.getElementById("listview").winControl; var items = []; for (var i = listview.indexOfFirstVisible; i < listview.indexOfLastVisible + 1; i++) { items.push(listview.elementFromIndex(i).parentNode.parentNode); } WinJS.UI.Animation.turnstileForwardIn(items);
    22. 22. The future: modular and composable HOW PEOPLE TEND TO THINK OF WINJS WinJS UI Modules: ListView, FlipView, Flyout, Tooltip, etc.. WinJS SPA Modules: Promises, Data binding, Scheduler, Fragments, Declarative controls, etc… AngularJS KnockoutJS EmberJS Co-exist with other UI toolkits (e.g. Bootstrap) UI.js Base.js AngularJS Other UI toolkits (e.g. Bootstrap) Today: all or nothing
    23. 23.  In general, name spaces help avoid naming collisions and help with code organization.  The WinJS.Namespace object helps in other way. Objects are available at the application scope.  .define()  .asWithParent()  Advantage? Strongly typed. WINJS.NAMESPACE
    24. 24. “USE STRICT”  Strict Mode (ECMAScript 5) allows you to place your program, or function, in a "strict" operating context.  An attempt to assign foo = "bar"; where ‘foo’ hasn’t been defined will fail.  eval() – virtually all cases will fail.  Better error handling for objects
    25. 25. MODULE PATTERN  JavaScript does not support access modifiers. You can’t mark an object or method as public or private.  Immediately Invoked Function Expression – IIFE  We use function scope to our advantage and only leak the things we want  Encapsulates some functions as private and exposes some functions as public..  Best practice: explicitly pass all dependencies.  Best practice: explicitly leak properties, objects, and methods.
    26. 26. WINJS.NAVIGATION.NAVIGATE()  Set up our proposed location and state  Raise our events: beforeNavigating, navigating, navigated  The WinJS.Navigation namespace provides state and history management, but it doesn’t actually do the navigation itself.  We need to define a handler to the onnavigated event. Code

    ×