adobe cq at linkedin meetup february 2014

42
UED Brand & Marketing ©2014 LinkedIn Corporation. All Rights Reserved. LinkedIn and Adobe CQ Prepared by the UED Brand & Marketing Team

Upload: nyolles

Post on 19-Aug-2015

540 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.

LinkedIn and Adobe CQPrepared by the UED Brand & Marketing Team

Page 2: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 2

Certain information is confidential We will err on the side of caution Any inquires can be directed to:

– Web: press.linkedin.com– Email: [email protected]

LinkedInDisclosure

Page 3: Adobe CQ at LinkedIn Meetup February 2014

LinkedIn

Page 4: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 4

LinkedIn

Page 5: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 5

LinkedIn

Not Adobe CQ

Page 6: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 6

LinkedInBrief Overview

Page 7: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 7

LinkedInBrief Overview

Page 8: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 8

LinkedInBrief Overview

premium.linkedin.com

marketing.linkedin.com

talent.linkedin.com

Page 9: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing

Page 10: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 10

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)

UED Brand & MarketingUser Experience Design

Page 11: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.

LinkedIn UED/BAM Major Sites

Page 12: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.

LinkedIn UED/BAM Major Sites

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

Page 13: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.

LinkedIn UED/BAM Campaign Sites

Page 14: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.

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…

Page 15: Adobe CQ at LinkedIn Meetup February 2014

History of CQ at LinkedIn

Page 16: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 16

Why does LinkedIn use CQ?History and CMS Selection Process

Page 17: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 17

Sites were often developed by external agencies Sites were built on a number of CMS platforms

Pre-CQ: The “Wild West”Struggles with a Multi-Platform Approach

Page 18: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 18

Consultant Recommended Offered a number of things our authors wanted The demo was pretty snazzy

Choosing CQThere can be only one... CMS.

Page 19: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 19

Hired the consultant to deliver our first app Began to notice issues as we scaled the app

Early CQOur first experiences developing a CQ app

Page 20: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 20

Project GreenfieldRe-Architecting the LinkedIn Microsites App

Page 21: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 21

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” wasn’t good enough Needed to work in parallel with the app supporting the first site

Making Things ScalableIdentifying what direction we wanted to take the platform

Page 22: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 22

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

What it Looked LikeHow we scaled the app

Page 23: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 23

Content Block Style Components

Page 24: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 24

Content Block Style Components

Page 25: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 25

Content Block Style Components

Page 26: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 26

Content Block Style Components

Page 27: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 27

Content Block Style Components

Page 28: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 28

Content Block Style Components

Page 29: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 29

Content Block Style Components

Page 30: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 30

Content Block Style Components

Page 31: Adobe CQ at LinkedIn Meetup February 2014

Priorities

Page 32: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 32

Security Brand protection Code progression

– Reusability– Performance– etc...

Company integration

Priorities

Page 33: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 33

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 won’t allow HTML inserted into page

Security

Page 34: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 34

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

Building a Better Platform

Page 35: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 35

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

Company Integration

Page 36: Adobe CQ at LinkedIn Meetup February 2014

Dev then && Dev now

Page 37: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 37

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 people’s work– Managing conflicts between vlt and svn was a pain

Old WorkflowIt was like…

dev

dev

trunk

pub

auth

vlt

svn upvlt upsvn up - resolveVlt addvlt ci - pray

* Image from: http://www.txcscopereview.com/2012/veteran-math-teacher-tells-all/

Page 38: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 38

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)

Evolution of Current ProcessSomething more flexible and more stupid proof

* image: http://www.chinadaily.com.cn/china/2012-01/11/content_14424377.htm

Page 39: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 39

Evolution/Scaling cont.

dev dev dev

git

auth

pub

replication

Primary Benefits• Archetype (SASS) integration• Linting && Unit Testing

• Pre-deploy validation• Builds to a deployable artifact

• Integration with other systems• Easier Automation

Secondary Benefits• Branching made dev work easier• Git had better conflict resolution• Pre-commit hooks easier to implement

Page 40: Adobe CQ at LinkedIn Meetup February 2014

UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 40

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.

Future ConsiderationsSo now what?

Page 41: Adobe CQ at LinkedIn Meetup February 2014

Thank You

UED BAM Design

LinkedIn Marketing Dept

Vinay Dixit

Gina Groom

David Delo

Jacob Heuser

Eugene O’neill

LinkedIn VCIO

Steve Johnson

Bay Area CQ Meetup

LinkedIn Facilities Team

LinkedIn Press Team

Special Thanks To:

DevelopersNate Yolles

Will D. White

Alec Sorensen

Gilbert Hernandez

Thomas Johnston

Stephanie Lie

Osama Ahmad

James Miller

Brodie Yazaki

Yuin Ee

EngineersJefferson Luan

Ash Mishra

Yogesh Upadhyay

Dave Le

Nicole Ng

Tiffany Saelinh

ManagementDaniel Apodaca

Khanh Nguyen

Emily Tran

Jennifer Williams

Vishu Shetty

QARobert Handley

Avanish Sharma

Juhi Puri

Page 42: Adobe CQ at LinkedIn Meetup February 2014