Ubuntu HTML5 apps deep dive

Ubuntu HTML5 apps deep dive David Planella @ BCN BeMyApp Meetup, July 2014

foundations> the platform

(c) 2013 Canonical

> Full Ubuntu (Linux) system, with thin Android layer for device access

> Unity is the Ubuntu shell, HTML5 and QML apps run on top

> The Ubuntu SDK provides transparent API access to services and devices

The Ubuntu platform

(c) 2013 Canonical

Ubuntu features a full-blown Software Development Kit

> The SDK enables developers to create and maintain apps

throughout their full lifecycle, from start to publish

> Holistic approach: a powerful IDE with device connectivity,

a GUI toolkit and extensive API documentation, all included

> Based on the proven and popular Qt framework

and development toolset

> The web is a first class citizen, with different degrees

of integration: webapps, HTML5 foundations and HTML5

platform access

> Native programming languages are QML, Javascript

and optionally C++

The Ubuntu SDK

(c) 2013 Canonical

Qt Creator is the SDK’s Integrated Development Environment (IDE)

> A feature-rich IDE for advanced code editing

> Intuitive visual debugger

> Device connectivity: easily run apps on the phone during development

> Graphical click app packager

> Integrated API reference

The Ubuntu SDK

(c) 2013 Canonical

The HTML5 UI Toolkit provides widgets for the unique Ubuntu look and feel

> A collection of the essential

building blocks to create Ubuntu apps

> Carefully crafted by designers

and implemented by developers

> The toolkit's widgets enable

visual and behavioural integration

> Not a requirement to use the toolkit,

but strongly recommended

for the best integration

and UX consistency

> Theme available for HTML5 and QML apps

The Ubuntu SDK

(c) 2013 Canonical

Comprehensive API documentation, design guidelines and tutorials online

at http://developer.ubuntu.com

The Ubuntu SDK

apps> HTML5 is first-class

(c) 2013 Canonical

> Write Ubuntu HTML5 apps using ubiquitous

Internet technologies

> Easy to port existing HTML5 apps too

> Two main integration levels: hosted and local

> Hosted – nicknamed webapps, integrate

remote websites into Ubuntu, like a local app

> Local – the app's code is local, running on the device

> HTML5 – a regular HTML5 app

> HTML5 Platform Access – an HTML5 app with access

to native devices, such as camera, sensors, etc.

Cordova acts as the backend

The Ubuntu HTML5 story why and how

(c) 2013 Canonical

> A web container, not a traditional browser

the HTML5 code runs isolated in its own container

> Container provides run-time access to APIs

built to expose a rich set of platform access services

> With the Ubuntu HTML5 UI

a set of layout and widgets for the Ubuntu look and feel

> Not limited to Ubuntu HTML5

it’s all standard tech, custom app markup also works

> Not just a web page: true Ubuntu apps

web-based and QML apps share the same app model

The Ubuntu HTML5 story

(c) 2013 Canonical

Web technologies at the core> Use the languages of the web: HTML5,

JavaScript, CSS3 and W3C APIs are fully supported

> Build convergent, responsive apps that will run across

form factors and devices

Powered by the Apache Cordova runtime > Supercharge your HTML5 apps with native device access

> Opening the doors to 400K Cordova web developers

> Ubuntu is an official Apache Cordova platform

HTML5 platform access

(c) 2014 Canonical

Key points

> Standard HTML5 support via Webkit

> Single, simple HTML5 app type

> Native, app specific code supported

> Full access to platform APIs

> Pre-integrated Cordova/PhoneGap runtime

> More info on: http://developer.ubuntu.com/apps/html-5/

Ubuntu HTML5 apps architecture

Ubuntu OS (runtime)

UbuntuHTML5 container

Ubuntu HTML5 Widgets

Platform APIs

Cordova pluginsPlatform API bindings

Ubuntu Web View

unity-bindings

Firefox

Webapp container (Oxide)

(c) 2014 Canonical

Ubuntu webapps architecture

Ubuntu Touch Apps

DesktopApps(X11)

"Glue code"System access

Messaging MenuLauncher

HUDSound Menu

Push Notification& other system services

WebappsQML/JS bridge

Other Trusted System Helpers (OA, Content Hub, Media Hub, etc.)

Runtime API support

C.H. Support

M.H. Support

WebAppCode

Browser Extension

Chromium

Browser Extension

Install from the browser

apps> HTML5 platform access

(c) 2013 Canonical

The Ubuntu platform at your fingertips

> Cordova

the industry standard for native device access

> Online Accounts

let the system handle authentication with online services

> Content Hub

share content between apps securely

> Push Notifications

show unobtrusive app notifications via the indicators

> Alarms, StateSaver, Download Manager

a growing set of APIs and services for HTML5 apps

HTML5 platform access

(c) 2013 Canonical

An extensive set of APIs> Blurring the boundaries between native

and web: access the camera, GPS,

and other sensors via web APIs

> A rich family of APIs: Accelerometer, Camera,

Compass, File, Geolocation, Media, Network,

Notification and Storage for all your needs

With the distinctive Ubuntu look> Use the HTML5 version of the Ubuntu UI theme

for a more integrated UX

> Use the SDK widgets as building blocks for your UI

without extra effort

HTML5 platform access spotlight: Cordova

OnlineAccounts

API

(c) 2014 Canonical

Ubuntu Touch Apps

DesktopApps(X11)

signond

OA Plugins

Desktop System Settings

(X11/Gnome)

OA PluginsOA Plugins(OAuth)

3rd-party plugins(identity, service)

Identity

API key

Signon-UI

Touch System Settings

Signon-UI

HTML5 platform access spotlight: Ubuntu Online Accounts

(c) 2013 Canonical

Apps are isolated> All applications are confined using AppArmor to ensure that

they are restricted in what they can do in the user’s session

> AppArmor is a kernel security module that enables mandatory

access-control (MAC)

> AppArmor is very similar to XNU Sandbox used by Apple

> Each application provides an AppArmor profile

generated based on values in its manifest

> The manifest can be created with a graphical form in Qt Creator

> Apps can only write to their own directory

> Content sharing between apps is mediated via the Content Service

HTML5 platform access security

demo> Ubuntu HTML5 live coding

Thank youandstay in touch!

> David Planella <[email protected]>

> @dplanella · +DavidPlanella

> developer.ubuntu.com

> ubuntu.com/phone

> @ubuntuappdev · also on G+ and FB