Download - 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