Website Adaptation & Formatting Layer

Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren

WEBSITE ADAPTATION & FORMATTING LAYER

OVERVIEW

๏ Introduction

๏ Approach & architecture

๏ Practical information

๏ Usability

๏ Performance

๏ Wrap up


2

MOBILE INTERNET TODAY

๏ Most CMSs deliver desktop-only websites

➡ Bad mobile browsing experience


3

CURRENT SOLUTIONS

๏ Template switchers

๏ Basic content adaptation

➡ Not user friendly

➡ Far from optimal


4

MISSION

๏ Develop a Joomla! extension that ...

๏ detects a mobile device

๏ performs device-specific content adaptation

๏ is as generic as possible


5

OVERVIEW

๏ Introduction



๏ Usability

๏ Performance

๏ Wrap up


6

APPROACH

USE SIRUNA PLATFORM

USABILITY - PERFORMANCE - MODIFIABILITY

7

OPEN PLATFORM (AGPL)

ADVANCED DEVICE DETECTIONCONTENT ADAPTATION MODULE

CONTENT FETCHING MODULE

MORE INFO : HTTP://OPEN.SIRUNA.ORG


8

http://open.siruna.org

http://open.siruna.org

MAIN SIRUNA FUNCTIONALITY

๏ Image adaptation (scaling, reduce file size, transcode...)

๏ Rearrange content

๏ Adapt the menu structure

๏ Replace JavaScript functionality

๏ Replace original advertisement banners by mobile advertisement banners


9

Siruna Website1. Request page

3. Send page

4. Transform page


2. Request page

5. Deliver mobile page

ORIGINAL SIRUNA USE

10

Joomla! & WAFL Siruna1. Request page

2. Perform device detection

3. Send redirect

9. Deliver mobile page

7. Send page

4. Request page

5. Request page

6. Generate mobile page

8. Transform page


OUR APPROACH

11

JOOMLA! EXTENSIONS

๏ Component

๏ Only one per page

๏ Defines main content

๏ Module

๏ Complements content of a component

๏ Plugin

๏ Implements extra functionality

๏ Template


12

WAFL EXTENSION STRUCTURE

๏ Main functionality plugin

๏ Admin panel component

๏ Basic mobile template

๏ Supporting module and 2 plugins

➡ Community can develop extra supporting modules/plugins


13

OVERVIEW

๏ Introduction



๏ Usability

๏ Performance

๏ Wrap up


14

TEAM

๏ Kristof Vandermeeren - Project Manager

๏ Robin Leblon - Configuration Manager

๏ Heiko Desruelle - Test Manager

๏ Rob Vanden Meersche - Test Manager

๏ Stijn De Vos - Scribe & Documentation Manager

๏ Klaas Lauwers - Developer

๏ Mattias Poppe - Developer

๏ Daan Van Britsom - Developer


15

TESTING

๏ 2 test managers

๏ phpUnderControl

๏ Joomla! testing framework

๏ Types

๏ Unit

๏ Integration

๏ Performance

๏ Acceptance


16

COVERAGE & METRICS


17

OVERVIEW

๏ Introduction



๏ Usability

๏ Performance

๏ Wrap up


18

EASY INSTALLATION

๏ WAFL Joomla! extension == 6 parts

๏ “One-zip-upload”

๏ Plug-and-play

๏ Uncluttered admin panel


19

FEATURE LIST

๏ 3 modes of operation

๏ Template switching

๏ Mobile redirect

๏ Siruna

๏ Mobile template based on desktop template

๏ Delivered with basic Siruna mapping


20

OVERVIEW

๏ Introduction



๏ Usability

๏ Performance

๏ Modifiability


21

DEVICE DETECTION

๏ Bottleneck component : invoked every request

๏ Performance measures :

๏ Devices organized according to popularity

๏ Can be disabled

๏ Different updateable data sources


22

DEVICE DETECTION

๏ Detection time :

๏ Popular mobile device : <1 ms

๏ Less popular/desktop : 3 ms

๏ Typical Joomla! page request (no caching) : 500 ms

๏ Accuracy :

๏ 99 % of devices in WURFL (largest mobile device database)

๏ Typical PHP mobile detection : 80 %


23

PERFORMANCE TEST RESULTS

WAFL disabled WAFL enabled - desktop WAFL enabled - mobile

REQUESTS/MINUTE - MORE IS BETTERMEASURED WITH JOOMLA! PROFILER - CHECKED WITH JMETER

24


0

58

115

173

230224 222

212


REQUESTS/MINUTE - MORE IS BETTERMEASURED WITH JOOMLA! PROFILER - CHECKED WITH JMETER

24

0

275

550

825

1.100

No cachingModule caching

Page caching


PERFORMANCE TEST RESULTSREQUESTS/MINUTE - MORE IS BETTER

27

0

275

550

825

1.100

No cachingModule caching

Page caching


PERFORMANCE TEST RESULTSREQUESTS/MINUTE - MORE IS BETTER

27

CACHING SUPPORT

๏ Support Joomla! built-in cache

๏ Use context-aware cache handlers

๏ Injection via Joomla!’s flexible binding registry

๏ No core modifications needed

➡ Unprecedented feature!


28


0 KB

150 KB

300 KB

450 KB

600 KB

WAFL disabled Template switching Siruna

BANDWIDTH USAGE - LESS IS BETTER

29


0 KB

150 KB

300 KB

450 KB

600 KB544



29


0 KB

150 KB

300 KB

450 KB

600 KB544483



29


0 KB

150 KB

300 KB

450 KB

600 KB544483

249



29

OVERVIEW

๏ Introduction



๏ Usability

๏ Performance

๏ Wrap up


30

STRENGTHS

๏ Generic core functionality

๏ High performing implementation

๏ Easy install with “one-click-upload”

๏ Very easy to use, no technical knowledge needed


31

FROM ALPHA TO BETA

๏ Further improvements :

๏ Improve layout mobile template (layout injection)

๏ Catch device detection info from Siruna and use in template

๏ Speed up device detection for desktops (whitelist)

๏ Additional settings for mobile redirect

๏ Automagical Siruna configuration


32

STANDALONE COMPONENTS

๏ Context-aware Joomla! cache

๏ Continuous integration environment for Joomla!

๏ Highly optimised device detection

➡ Very useful for the community


33

COMING UP...

๏ Next alpha release in 1 week ( June, 21)

๏ Safer installation

๏ Greatly improved layout injection

๏ Last alpha before beta

๏ Compatible with latest open-source Siruna version

➡ Download at http://www.wafl.ugent.be

➡ Download Siruna at http://open.siruna.org


34

http://www.wafl.ugent.be





MORE INFORMATION AT HTTP://WWW.WAFL.UGENT.BE

HTTP://WWW.SIRUNA.COM

CONTACT WAFL-TEAM [email protected]

CONTACT SIRUNA [email protected]





mailto:[email protected]




Technology

Website Adaptation & Formatting Layer