Cross-Platform Mobile Apps with HTML, JavaScript, Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets @ccoenraets Resources @ccoenraets ccoenrae@adobe.com What? 3 4 Apple iOS ...

  • Published on
    30-Apr-2018

  • View
    216

  • Download
    3

Transcript

  • Cross-Platform Mobile Apps withHTML, JavaScript, and PhoneGap Christophe Coenraets@ccoenraets

  • Resources

    @ccoenraets

    http://coenraets.org

    http://github.com/ccoenraets

    ccoenrae@adobe.com

  • What?

    3

  • Mobile Application Development Challenge

    4

    Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia

    Objective-C Java NDK ActionScript J2ME C# C++ C+++ +

  • The Gap

    Package HTML/JS/CSS assets as NativeApplication

    Expose device capabilities as JavaScript APIsconsistent across platforms

    5

  • The Gap

    PhoneGap is a wrapper and a bridge

    PhoneGap is NOT: A full-stack JavaScript framework

    An architectural framework

    A UI framework

    6

  • PhoneGap works with any Framework

    7

  • Access to Device Features

    8

    http://phonegap.com/about/features

  • What if you need more?

    PhoneGap is extensible with Plugins model that enables you to write your ownnative logic to access via JavaScript

    All phonegap APIs are plugins

    There are lots of open source plugins athttps://github.com/phonegap/phonegap-plugins

    9

  • 10

    DEMO: What does a PhoneGap app look like?

  • Open Source

    11

    PhoneGap/Cordova was contributed to Apache by Adobe

    You can get involved today!

    http://incubator.apache.org/cordova/

  • build.phonegap.com

    Continuous deployment

    No SDK required

    GitHub compatible

    Remote debugging

  • Debugging with Weinre

  • How?

    14

  • Before

  • After: Single Page App

    My Huge App

  • Characteristics of a Single Page App

    Views are built dynamically

    Templates to the rescue

    History handled by # or push state

    Data obtained through RESTful JSON, JSONP services

    Structure / Patterns needed to handle complexity

    17

  • Choosing a stack

    18

    DOM

    Architecture

    UI

  • Example: Backbone Directory

    19http://github.com/ccoenraets/backbone-directory

  • Backbone.js Routing

    20

  • Backbone.js Models and REST

    21

  • Employee Directory RESTful API

    HTTP Method URLGET api/employeesGET api/employees/1GET api/employees/1/reportsPOST api/employeesPUT api/employees/1DELETE api/employees/1

    22

  • Backbone.js Views

    23

  • Templates: Before

    24

  • Templates: After

    Check out Mustache.js, Underscore.js, Handlebar.js, etc

    25

  • Resources

    @ccoenraets

    http://coenraets.org

    http://github.com/ccoenraets

    ccoenrae@adobe.com

Recommended

View more >