Using Enyo To Make Chrome Apps


Ben Combee
@unwiredben
ben.combee@lge.com

Texas GDG DevFest
July 12th, 2013


What's Enyo?


http://www.enyojs.com/

  • JavaScript + CSS framework
  • Built around reusable components
  • Strong cross-platform device support
  • Designed for single-page apps
  • Large collection of ready-to-use UI widgets
  • 100% free & open-source (Apache 2.0)

What's the Chrome App Store?


https://chrome.google.com/webstore/

Where users go to get themes, extensions, and apps
Supplies all installable apps on Chrome OS

Enyo Bootplate


http://github.com/enyojs/bootplate

  • GitHub "template" repo with Enyo & common libs
  • Clone, rename, and push
  • Includes minifier to make enyo.js & app.js files

App Restrictions


  • Content Security Policy (CSP)
  • no document.write
  • no inline event handlers
  • no eval()
  • no Function() constructors
  • no strings for setTimeout/setInterval
  • no inline <script> tags

    On the Other Hand...


    XHR fetches will work in app bundle,
    unlike normal file:// XHRs

    Ability to request permissions
    to do lots of desktop-appy things
    like USB port handling!

    Adding background.js


    • For most single-page apps, can use boilerplate
    • Hardest decision: default window size

    Links to Other Sites


    • No default handling of off-app links
    • Use target="_blank" to push to browser
    • Have a more sophisticated approach
      using <webview> objects

    Testing Locally


    • Go to chrome://extensions page
    • Select the "Developer Tools" checkbox at the top
    • Use "Load Unpacked Extension..." button
    • Use "Reload", "Launch", and "Restart"
    • Can debug with Chrome Dev Tools

    Submitting to the Store


    • Submit a ZIP file of your directory, not a .crx file
    • Must contain manifest.json at root
    • Must NOT contain any other manifest.json files
    • Be ready with required images
      • 128x128 icon
      • 640x400 or 1280x800 screenshot
      • 440x280 small tile
    • Optional smaller icons, medium + large tiles

    End Result


    Enyo API Viewer submitted last night!

    https://chrome.google.com/webstore/detail/enyo-api-viewer/hjcnnoabfllfhkopmbnekkannbofdpfl

    (and a 2.2.0.1 update pushed
    about 11:20AM this morning)

    Made with Slides.com