hybrid apps (native + web) using webkit

68
Hybrid Apps (Native + Web) using WebKit ARIYA HIDAYAT, SENCHA

Upload: ariya-hidayat

Post on 27-Jun-2015

2.068 views

Category:

Technology


2 download

DESCRIPTION

In term of innovations and mobile availability, WebKit is known to be the premier web rendering engine with the leading support for web standards such as HTML5, CSS3, and SVG. On MeeGo platform, WebKit can be leveraged easily via the use QtWebKit module which combines powerful WebKit features with the ease of use of Qt. The ground of developing applications using native technologies has been much explored, however there are still confusions, myths and misunderstanding as to what can be achieved with web technologies and hybrid native-web approach. This talk will highlight several tools and best practices in developing and testing good looking, feature-rich, and hardware-accelerated applications using web technologies targeting MeeGo platform in particular.

TRANSCRIPT

Page 1: Hybrid Apps (Native + Web) using WebKit

Hybrid Apps (Native + Web) using WebKit

ARIYA HIDAYAT, SENCHA

Page 2: Hybrid Apps (Native + Web) using WebKit

whoami

Page 3: Hybrid Apps (Native + Web) using WebKit

Overview

Page 4: Hybrid Apps (Native + Web) using WebKit

Going Hybrid?

Security

Advanced TechnologiesApp Store/

Marketplace

Platform Integration

Page 5: Hybrid Apps (Native + Web) using WebKit

WebKit Everywhere

Browser

Devices

Runtime

Page 6: Hybrid Apps (Native + Web) using WebKit

0

10000

20000

30000

40000

50000

60000

70000

80000

90000

0 1 2 3 4 5 6 7 8 9 10

Rev

isio

ns

Years

History~2000 commits/month

Page 7: Hybrid Apps (Native + Web) using WebKit

Extensive Tests

the rest229 MB

tests904 MB

≈ 20,000 tests

Page 8: Hybrid Apps (Native + Web) using WebKit

Workflow

1 Every commit needs to be reviewed

2 Broken commit must be reverted

quality control

zero-regression policy

Page 9: Hybrid Apps (Native + Web) using WebKit

Level of Involvement

Contributor

Committer

≈ 150 Reviewer

≈ 90accept or reject patches

checks in reviewed patches

after 10-20 patches

after 80 patches

Page 10: Hybrid Apps (Native + Web) using WebKit

WebKit ReviewersApple

39

Google25

Nokia7

RIM7

Misc11

1

Page 11: Hybrid Apps (Native + Web) using WebKit

Components of WebKit

WebKit Library

JavaScriptCore

WebCore

HTMLrendering

SVG

DOM CSS

Page 12: Hybrid Apps (Native + Web) using WebKit

Platform Abstractions

Network Unicode Clipboard

Graphics Theme Events

Thread Geolocation Timer

Page 13: Hybrid Apps (Native + Web) using WebKit

Di!erent “Ports”WebCore graphics

Mac Chromium Qt Gtk

CoreGraphics

Skia

QPainter

Cairo

graphics stack

GraphicsContext

Page 14: Hybrid Apps (Native + Web) using WebKit

Use

Page 15: Hybrid Apps (Native + Web) using WebKit

Web BrowsersArora

Demo Browserhttp://arora.googlecode.com

demos/browser

Page 16: Hybrid Apps (Native + Web) using WebKit

QWebView, QWebPage, QWebFrameQWebView (widget)

QWebPage (object)

QWebFrame (object)

At least one, i.e. the main frame of the page

Page 17: Hybrid Apps (Native + Web) using WebKit

Using WebView

QWebView webView;webView.show();webView.setUrl(QUrl("http://meego.com"));

Page 18: Hybrid Apps (Native + Web) using WebKit

Contents via String

QWebView webView;webView.show();webView.setContent("<body>Hello, MeeGo!</body>");

Page 19: Hybrid Apps (Native + Web) using WebKit

Contents via Resource

QWebView webView;webView.show();webView.setUrl(QUrl("qrc:/content.html"));

<RCC> <qresource prefix="/"> <file>content.html</file> </qresource></RCC>

Page 20: Hybrid Apps (Native + Web) using WebKit

Capture to Image

QWebPage page;QImage image(size, QImage::Format_ARGB32_Premultiplied);image.fill(Qt::transparent);QPainter p(&image);page.mainFrame()->render(&p);p.end();image.save(fileName);

http://labs.qt.nokia.com/2009/01/15/capturing-web-pages/

Page 21: Hybrid Apps (Native + Web) using WebKit

SVG Rasterizer

http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/

Page 22: Hybrid Apps (Native + Web) using WebKit

Search + Preview

http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/

Page 23: Hybrid Apps (Native + Web) using WebKit

Bridging the Two Worlds

Page 24: Hybrid Apps (Native + Web) using WebKit

Exposing to the Web world

QWebFrame::addToJavaScriptWindowObject(QString, QObject*)

Public functionsObject properties

Child objects

Page 25: Hybrid Apps (Native + Web) using WebKit

Exposing to the Web world

class Dialog: public QObject{ Q_OBJECT

public: Dialog(QObject *parent = 0);

public slots: void showMessage(const QString& msg);};

page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);

Page 26: Hybrid Apps (Native + Web) using WebKit

Exposing to the Web world

<input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')">

instance of Dialog object public slot

Page 27: Hybrid Apps (Native + Web) using WebKit

Signal and Slot

foobar.modified.connect(refresh);

QObject instance JavaScript function

signal

foobar.modified.connect(obj, refresh);

any object

Page 28: Hybrid Apps (Native + Web) using WebKit

Triggering Action from Native

class Stopwatch: public QObject{ Q_OBJECT

public: Stopwatch(QObject *parent = 0);

signals: void tick(int t);

private slots: void update();

private: int m_index;};

Stopwatch::Stopwatch(QObject *parent) : QObject(parent) , m_index(0){ QTimer *timer = new QTimer(this); timer->setInterval(1000); connect(timer, SIGNAL(timeout()), SLOT(update())); timer->start();}

void Stopwatch::update(){ emit tick(m_index++);}

Page 29: Hybrid Apps (Native + Web) using WebKit

Triggering Action from Native

<script>Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t;});</script>

instance of Stopwatch object

signal

Page 30: Hybrid Apps (Native + Web) using WebKit

Coming back to the Native

QVariant QWebFrame::evaluateJavaScript(QString)

mostly key-value pair(like JavaScript objects)

Page 32: Hybrid Apps (Native + Web) using WebKit

Platform Integration

Application

Menu and Menu Bar

Dialogs

Notifications

System Access

Page 33: Hybrid Apps (Native + Web) using WebKit

Debugging

Web Inspector

settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

Page 34: Hybrid Apps (Native + Web) using WebKit

Deployment

O!ine PackagingCache ManifestLocal Storage

QtWebKit boilerplate

Tools

PhoneGapAppUp Encapsulator

Page 35: Hybrid Apps (Native + Web) using WebKit

Real-world Hybrid Apps

Sencha AnimatorExt Designer

Page 36: Hybrid Apps (Native + Web) using WebKit

Technologies

Page 37: Hybrid Apps (Native + Web) using WebKit

Key Technologies

Page 38: Hybrid Apps (Native + Web) using WebKit

JavaScript

Page 39: Hybrid Apps (Native + Web) using WebKit

Libraries and Frameworks

Page 40: Hybrid Apps (Native + Web) using WebKit

Content Editing

http://labs.qt.nokia.com/2009/03/12/wysiwyg-html-editor/

Page 42: Hybrid Apps (Native + Web) using WebKit

Vector Graphics

http://raphaeljs.com/polar-clock.html

Page 43: Hybrid Apps (Native + Web) using WebKit

Canvas-based Game

http://ariya.blogspot.com/2010/09/invade-destroy.html

Page 44: Hybrid Apps (Native + Web) using WebKit

Diagrams & Visualization

http://thejit.org/JavaScript InfoVis Toolkit

Page 45: Hybrid Apps (Native + Web) using WebKit

CSS3 Animations

http://mozillademos.org/demos/planetarium/demo.html

Page 46: Hybrid Apps (Native + Web) using WebKit

Accelerated Composition

GPU FTW

Page 47: Hybrid Apps (Native + Web) using WebKit

Sencha Animator

Page 48: Hybrid Apps (Native + Web) using WebKit

Device Access

http://ariya.github.com/js/marblebox/

Page 49: Hybrid Apps (Native + Web) using WebKit

WebGL for 3-D

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

Page 50: Hybrid Apps (Native + Web) using WebKit

PhiloGL: WebGL Framework

http://senchalabs.github.com/philogl/

Page 51: Hybrid Apps (Native + Web) using WebKit

Tools

Page 52: Hybrid Apps (Native + Web) using WebKit

Web Inspector

Page 53: Hybrid Apps (Native + Web) using WebKit

Network Log

28: GET http://www.google.com/m/gp292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp311: GET data:image/gif;base64,R0lGODlhiA...312: GET data:image/gif;base64,R0lGODlhJA...312: GET data:image/gif;base64,R0lGODlhGA...312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA...312: Finish fail data:image/gif;base64,R0lGODlhiA...312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA...312: Finish fail data:image/gif;base64,R0lGODlhJA...312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA...312: Finish fail data:image/gif;base64,R0lGODlhGA...317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp324: Finish fail http://www.google.com/m/gp328: GET http://www.google.com/m/gn/user?...329: Finish success http://www.google.com/m/gn/user?...

Page 54: Hybrid Apps (Native + Web) using WebKit

forget to run

the tests

Typical Scenario

This is awesome!

Page 55: Hybrid Apps (Native + Web) using WebKit

Test Framework

specrunner SpecRunner.html5 specs, 0 failures in 0.013s

specrunner SpecRunner.htmlFAIL: 5 specs, 1 failure in 0.014s

Selenium, Watir, Squish Web, JSUnit, Jasmine, QUnit, ...

Page 56: Hybrid Apps (Native + Web) using WebKit

Headless WebKit

if (phantom.state.length === 0) {    phantom.state = 'pizza';    phantom.open('http://www.google.com/m/local?site=local&q=pizza+in+new+york');} else {    var list = document.querySelectorAll('div.bf');    for (var i in list) {        console.log(list[i].innerText);    }    phantom.exit();}

http://phantomjs.org

Page 57: Hybrid Apps (Native + Web) using WebKit

UI Designer

Page 58: Hybrid Apps (Native + Web) using WebKit

IDE: AKShell

Page 59: Hybrid Apps (Native + Web) using WebKit

IDE: Cloud9

Page 60: Hybrid Apps (Native + Web) using WebKit

Recorder and Replayer

Page 61: Hybrid Apps (Native + Web) using WebKit

Get + Compile

Page 62: Hybrid Apps (Native + Web) using WebKit

Using git

git clone git://git.webkit.org/WebKit.gitcd WebKit

≈ 1.2 GB .git

Page 63: Hybrid Apps (Native + Web) using WebKit

Build

Tools/Scripts/build-webkit --qt

--debug for “Debug” mode

Page 64: Hybrid Apps (Native + Web) using WebKit

Launch

Tools/Scripts/run-launcher --qt

Page 65: Hybrid Apps (Native + Web) using WebKit

Conclusion

Page 66: Hybrid Apps (Native + Web) using WebKit

Today

Web technologies are moving really fast

Various frameworks and libraries boost the productivity

Hybrid approach helps the migration

Tools need to catch-up

Page 67: Hybrid Apps (Native + Web) using WebKit

Future

More bindings to the native world

Platinum-grade productivity tools

Ubiquitous mesh and cloud solutions

Page 68: Hybrid Apps (Native + Web) using WebKit

THANK YOU!

[email protected]

ariyahidayat

ariya.blogspot.com