Amplexor drupalcamp-gent-2012 - kinepolis platform

1.

The Kinepolis platform building high-traffic and accessible websites

Jan Lemmens

2.

Follow us!

Jan Lemmens!!ECM Consultant!

jan.lemmens@amplexor.com!

@vollepeer!

3.

High traffic sites with Drupal!Kinepolis case study!

Future proof websites!Focus on accessibility!

1! 2!

4.

High traffic websites with Drupal!Kinepolis case study!

5.

!   Platform structure!!   Data sources!!   Search!!   User data!!   Ads!!   Performance!!   Development workflow!!   Deployment automation!

6.

!   Project kick-off: April 2011!!   Websites live: January 2012!!   Currently: maintenance and CRs!!   Design and functional analysis: Kunstmaan!!   Hosting: Nucleus!!   Master content repository: Edge.be!!   CRM: Selligent!!   Drupal implementation: Amplexor!

7.

master repository!

ticketing! mobile website!

digital signage!apps!

main website!

8.

main website!

BE NL! CH!ES!FR!BE FR!

9.

platform !structure!

10.

BE NL!BE FR!

FR!ES!CH!

multilingual

11.

similar content!

same group of editors!

same functionalities!

multilingual

12.

settings interface paths

taxonomy

menus

blocks!

nodes

multilingual

13.

multilingual

it’s a PITA!

14.

i18n!

multilingual

15.

BE NL!

BE FR!

FR!

ES!

CH!single codebase!

multisite

16.

same content structure!

asynchronous content!

different user accounts!

multisite

17.

content!

18.

19.

master repository!

main website!

ticketing! mobile website!

digital signage!apps!

20.

matching content structures!

movie!repository!

very simple approach!

21.

very simple approach!!   Make the most out of the Drupal default

components!

!   Facilitates integration with e.g. Views, Taxonomy and Apache Solr!

!   Reduces custom development (lowers the risk)!

!   Increases maintainability and portability!

!   Faster prototyping!

22.

content structuring!!   Node

basic content storage!

!   Taxonomy classification!

!   Nodequeue managing “selections”!

!   Entity Reference relating content!

23.

content structuring!!   Entities

tiny content storage!

!   Blocksside info!

24.

disadvantages!!   Lots of configuration stored in the

database (versioning, deployments, ...)!

!   Extendability (advanced features may require rework)!

!   Performance!

25.

use view modes!!

26.

use formatters!!

27.

use formatters!!

28.

other Drupal modules!!   Context!

!   Panels!

!   Media!

!   CDN!

!   Entity cache!

!   Varnish!

!   Memcache!

!   Services!

!   Features!

!   Strongarm!

!   Localization Client!

!   Views!

29.

syncing content!

movie!repository!

assets!queue!

30.

> 180 000!Drupal nodes!

31.

Integrations with 3rd party systems!!   webservice at which side?!

!   sync intervals?!

!   foresee just enough logging!

!   set up email notifications!

!   write unit tests!

!   ensure emulation of previous events!

!   ensure loose coupling!

32.

search!

33.

Search!

core search!

MySQL server! webserver!

index!

PHP/MySQL aren’t built for indexing and search!

MySQL server! webserver!

Solr server!

index!

Apache Solr/Lucene is

optimized for search purposes!

!  xml based!!  clustering!!  grouping!!  facets!!  scores!!  highlighting!

34.

user data!

35.

> 35 000!registered users!

36.

profiling!

segmentation!

mass emailing!

Drupal isn’t the right tool here!!

37.

exchanging user data!

CRM!

38.

ads!

39.

Drupal isn’t the right tool here!!

40.

multidimensional targeting!

open API!

campaign priorities!

analytics!

audience segmentation!

41.

Drupal webserver!website visitor!

1. page request!

2. HTML + JS!

OpenX server!asynchronous!!

42.

performance!

43.

“Drupal does not scale.”!!

Drupal generates pages, !it does not serve them!

44.

page request handling!no caching!

website visitor! Drupal webserver!

Drupal database!

1. page request! 2. bootstrap Drupal!!4. build up the response!!5. theme the result!

3. load content from DB!

6. sent response!

45.

2. bootstrap Drupal!

3. load cached content! from DB!

1. page request!

4. sent response!

page request handling!Drupal page caching!

website visitor! Drupal webserver!

Drupal database!

46.

Drupal webserver!

Drupal database!

reverse proxy!

pass request to Drupal if cache is expired or if

request is handled for the first time!

1. page request! 2. sent response!

page request handling!reverse proxy caching!

website visitor!

47.

Trafic to Drupal & openX

Trafic for Assets(video & images)

Test & DevEnvironment

Load Balancer+ Cache

DatabaseMaster

Application firewall

Monitoring(zabbix?)

SearchDatabaseSlave

OpenXAssets

(Images & Video) Drupal

Load Balancer+ Cache

(stand-by)

Application Firewall(stand-by)

48.

webserver 1

12GB RAM4 cores 2.4GHz!

webserver 2

12GB RAM4 cores 2.4GHz!

1.5TB!

SAN

49.

> 16 000 000!pagehits per month!

50.

> 90!requests per second!

peak moments!

51.

master/slave database!

Memcached!

APC!

reverse proxy!

asynchronous requests!

static server!

52.

DEV1! DEV2! DEV3! DEV4!

Version control!

Build server!

INT! TEST! ACC!

Continous Integration! Customer Test! Customer Acceptance!

53.

Deployment automation

Jenkins!Build server!

Monitoring and reporting!

Continuous integration!

Web interface for configuration!

!

!

Deployment automation!

54.

1 2 3 4

backup database

get code from version control

deploy to servers

run deployment scripts

Deployment automation!

55.

Monitoring!

56.

Future-proof websites!

57.

the problem!

58.

640px! 800px! 1024px!

59.

60.

61.

?px!

62.

3.40%!2.35%!

15.58%!

21.06%!

16.86%!

6.64%!

3.46%!4.01%! 5%!

320! 768! 1024! 1280! 1366! 1440! 1600! 1680! 1920!

screen widths used on the web (February 2012)!

63.

low usability!small text, tiny targets, !

“desktop” UI, content overload!

64.

65.

phones! tablets! TVs!

66.

67.

user interface!

viewport!

connection speed and bandwidth!

technology support!

context!

68.

69.

mobile website!

70.

www.uitinvlaanderen.be! m.uitinvlaanderen.be!

71.

back-end!

front-end!DB!

raw content!

“full” website!HTML + CSS + Javascript!

templates!

logic! mobile website!HTML + CSS + Javascript!

templates!

72.

give me my mobile site!

73.

“My mobile site should have less

stuff than my desktop site has now.”!

!

“Yes sir, not because it’s mobile, but

because your desktop site is full of

crap.”!

!

74.

“Smartphone users need other

content and features.”!

75.

“Mobile users want to see our menu,

hours and delivery number. Desktop users

definitely want this 1 MB png of someone

smiling at a salad.”!

opening hours now!!

76.

mobile ≠ lite!

77.

78.

specific content and targeted UI!

no changes to existing website!

optimal experience for targeted device!

device detection for auto-redirect!

scalability!

multiple information architectures!

changes to CMS!

SEO!

mobile website!

79.

responsive !website!

80.

www.barackobama.com! www.barackobama.com!

81.

responsive website!

82.

HTML + CSS + Javascript

responsive design

back-end!

front-end!DB!

raw content!

logic!

templates!

83.

1. fluid grid + fluid images!

84.

2. CSS3 Media Queries!

85.

3. content like water!

content’s going to take many forms and flow into many different containers.!

86.

same content for all devices!solid content strategy is crucial!!

organizing and prioritizing

87.

WYSIWTF!

meanwhile, at the customer’s office…!

88.

WYSIWTF!

this TinyMCE won’t die!!

at the Amplexor front…!

89.

real-life difficulties!!   Stakeholders have different mind-sets!!   Knowledge and experience of design agency!!   No room for mandatory content (*)

(*) read “ads”!!   Fear of losing flexibilty

i.a. limited rich-text!!   Testing

Device labs are recommended!

!   Short time-to-deliverNot much time for thorough content selection, modeling and structuring!

90.

possible solution!!   Build 2 separate websites!

¬  classic “desktop” website (www.example.com)!

¬  separate “mobile” website (m.example.com)!!

!   Use the separate mobile website as a testbed for new technologies (e.g. concepts like responsive design) and new ways of representing content!

!   Eventually, replace the classic desktop website with the separate website!

91.

scalable!

no changes CMS!

SEO!

1 single website!

complex for existing websites!

complex wireframing and design!

responsive website!

92.

Responsive website!!   Not mobile first (obviously)!

!   But accounted for during the whole project!!   Use of HTML5 video!!   Most ads are gone!!!   Conditional loading!!   Transformation of interface elements!!   Swiping carousels!

93.

apps!

94.

no standardization!

95.

rich user interface!

OS integration!

high performance!

app store monetization!

development for each platform!

app store approval and restrictions!

time to update!

apps!

96.

open standards!

structured data!

scalability!

analytics!

97.

Feedback & follow-up: http://drupalcampgent.be/feedback