LinkedIn and Adobe CQ

Prepared by the UED Brand & Marketing Team

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn
Disclosure
Certain information is confidential
We will err on the side of caution
Any inquires can be directed to:
Web: press.linkedin.com
Email: press@linkedin.com

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn

LinkedIn

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn

Not Adobe CQ

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn
Brief Overview

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn
Brief Overview

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn
Brief Overview

premium.linkedin.com
talent.linkedin.com
marketing.linkedin.com

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

UED Brand & Marketing

UED Brand & Marketing

User Experience Design
User Experience Design
Focused on providing the best possible end-to-end experience for our users.
Composed of web developers and designers and others.

Brand & Marketing

We support marketing, business and internal clients
Using Adobe CQ5.5 (as well as WordPress and Drupal)

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

10

LinkedIn UED/BAM Major Sites

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn UED/BAM Major Sites

marketing.linkedin.com
sales.linkedin.com
talent.linkedin.com
premium.linkedin.com

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn UED/BAM Campaign Sites

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

LinkedIn UED/BAM Campaign Sites

brand.linkedin.com
business.linkedin.com
certification.linkedin.com
live.linkedin.com
nonprofit.linkedin.com
smallbusiness.linkedin.com
students.linkedin.com
talentconnect.linkedin.com
university.linkedin.com
veterans.linkedin.com
volunteer.linkedin.com
and many more

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

History of CQ at LinkedIn

History and CMS Selection Process

Why does LinkedIn use CQ?

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

16

Pre-CQ: The Wild West

Struggles with a Multi-Platform Approach
Sites were often developed by external agencies
Sites were built on a number of CMS platforms

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

17

Choosing CQ
There can be only one... CMS.
Consultant Recommended
Offered a number of things our authors wanted
The demo was pretty snazzy

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

18

Early CQ
Our first experiences developing a CQ app
Hired the consultant to deliver our first app
Began to notice issues as we scaled the app

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

19

Re-Architecting the LinkedIn Microsites App

Project Greenfield

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

20

Making Things Scalable

Identifying what direction we wanted to take the platform

Sought out experienced in-house app developers for guidance

Ultimately decided to support all sites using a single application
Concluded that out of the box wasnt good enough
Needed to work in parallel with the app supporting the first site

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

21

What it Looked Like

How we scaled the app

Decided to build new instead of extend the existing app

Cleaner directory structure under new app
Most pages are built using an open Blank Page styled template
Components are tied more closely to Content Blocks that you build with

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

22

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

23

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

24

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

25

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

26

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

27

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

28

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

29

Content Block Style Components

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

30

Priorities

Priorities
Security
Brand protection
Code progression
Reusability
Performance
etc...

Company integration

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

32

Security
First Rule: Members First
Code review
Information Security reviews all code

XSS all input from content authors

XSS and encode everything
No HTML, CSS, or JS entry
Richtext Editors locked down
Copy/paste only text, no styles or html

Pathfields limited to internal paths only

pathfield vs resourcepathfield vs imagepathfield

Even video components wont allow HTML inserted into page

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

33

Building a Better Platform

Custom JSTL tag library
LI Tags
All XSS through them
Centralized and reusable
example: image tag allowed easy Lazy Loading feature

Java vs. JSP components

Eliminates spaghetti code

Separates business logic layer from presentation layer
Object Oriented Programming
Reusable code
Test Driven Development

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

34

Company Integration
Goal
Any member of any team could be swapped anywhere

Only team on Adobe CQ

Not everything lends itself to the LinkedIn way

LESS vs SASS
Maven vs Gradle
i18n and l10n
UI and CSS
clientlibs vs inject/require & atomic
Build and deployment process

Interface with stack

Real User Metrics
Tracking
Custom LinkedIn code scripts
2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

35

Dev then && Dev now

Old Workflow
It was like
SVN + VLT
Lack of resources && appropriate knowledge
Inconsistencies between svn 1.6 and 1.7
Complicated workflow just for ci/dev work.

Problems
Vague understanding of filevault
Continuous overriding of peoples work
Managing conflicts between vlt and svn was a pain

pub

dev
trunk
dev
2014 LinkedIn Corporation. All Rights Reserved.

/www.txcscopereview.com/2012/veteran-math-teacher-tells-all/

vlt
auth

svn up
vlt up
svn up
- resolve
Vlt add
vlt ci
- pray
UED Brand & Marketing

37

Evolution of Current Process

Something more flexible and more stupid proof
GIT-SVN + VLT
Git made versioning much easier
SVN backing allowed for easy RB integration
VLT was still a pain in the..

Intro Ash: GIT-SVN + MVN

MVN made deploying much easier
1 line deploy ./build
Scalable
Introduction of JUNIT (still need to leverage)

2014 LinkedIn Corporation. All Rights Reserved.

w.chinadaily.com.cn/china/2012-01/11/content_14424377.htm

UED Brand & Marketing

38

Primary Benefits

git

dev

dev

dev

Archetype (SASS) integration

Linting && Unit Testing
Pre-deploy validation
Builds to a deployable artifact
Integration with other systems
Easier Automation

Secondary Benefits
auth
replication

Branching made dev work easier

Git had better conflict resolution
Pre-commit hooks easier to implement

pub
Evolution/Scaling cont.
2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

39

Future Considerations
So now what?

Automated QA Testing
Package verification after build/install (is the package active)
Further breaking up of our code into multiple bundles
As it grows will there be need for multiple OSGI bundles
services, filters, configs, content, etc.

Build monitoring
Automated deploys w/ fallbacks
Pre production cycle for integration/qa/etc

One stop shop for web devs

Scripts for self serve testing, deploying to production, creating reviews, tagging
commits, dependency systems, etc.

2014 LinkedIn Corporation. All Rights Reserved.

UED Brand & Marketing

40

Thank You
Developers

Engineers

QA

Management

Nate Yolles
Will D. White
Alec Sorensen
Gilbert Hernandez
Thomas Johnston
Stephanie Lie
Osama Ahmad
James Miller
Brodie Yazaki
Yuin Ee

Jefferson Luan
Ash Mishra
Yogesh Upadhyay
Dave Le
Nicole Ng
Tiffany Saelinh

Robert Handley
Avanish Sharma
Juhi Puri

Daniel Apodaca
Khanh Nguyen
Emily Tran
Jennifer Williams
Vishu Shetty

Special Thanks To:

UED BAM Design
LinkedIn Marketing Dept
Vinay Dixit
Gina Groom

David Delo
Jacob Heuser
Eugene Oneill
LinkedIn VCIO

Steve Johnson
Bay Area CQ Meetup
LinkedIn Facilities Team
LinkedIn Press Team