An introduction to the Ubuntu HTML5 app developer offering

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

2. foundations
> the platform

3. (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

4. (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

5. (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

6. (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

7. (c) 2013 Canonical
Comprehensive API documentation, design guidelines and tutorials online
at http://developer.ubuntu.com
The Ubuntu SDK

8. apps
> HTML5 is first-class

9. (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

10. (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

11. (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

12. (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)
Ubuntu
HTML5 container
Ubuntu HTML5 Widgets
Platform APIs
Cordova pluginsPlatform API bindings
Ubuntu Web View
unity-bindings

13. Firefox
Webapp container (Oxide)
(c) 2014 Canonical
Ubuntu webapps architecture
Ubuntu
Touch
Apps
Desktop
Apps
(X11)
"Glue code"
System access
Messaging Menu
Launcher
HUD
Sound Menu
Push Notification
& other system services
Webapps
QML/JS bridge
Other Trusted System
Helpers (OA, Content
Hub, Media Hub, etc.)
Runtime API
support
C.H. Support
M.H. Support
WebApp
Code
Browser Extension
Chromium
Browser Extension
Install from the
browser

14. apps
> HTML5 platform access

15. (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

16. (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

17. Online
Accounts
API
(c) 2014 Canonical
Ubuntu
Touch
Apps
Desktop
Apps
(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

18. (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

19. demo
> Ubuntu HTML5 live coding

20. Thank you
and
stay in touch!
> David Planella <david.planella@ubuntu.com>
> @dplanella · +DavidPlanella
> developer.ubuntu.com
> ubuntu.com/phone
> @ubuntuappdev · also on G+ and FB