linkedinandadobecq-140227171349-phpapp01
DESCRIPTION
LinkedIn and Adobe AEMTRANSCRIPT
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.
LinkedIn and Adobe CQPrepared by the UED Brand & Marketing Team
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
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 4
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 5
Not Adobe CQ
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 6
LinkedInBrief Overview
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 7
LinkedInBrief Overview
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 8
LinkedInBrief Overview
premium.linkedin.com
marketing.linkedin.com
talent.linkedin.com
UED Brand & Marketing
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
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.
LinkedIn UED/BAM Major Sites
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
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved.
LinkedIn UED/BAM Campaign Sites
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…
History of CQ at LinkedIn
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 16
Why does LinkedIn use CQ?History and CMS Selection Process
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
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.
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
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 20
Project GreenfieldRe-Architecting the LinkedIn Microsites App
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
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
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 23
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 24
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 25
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 26
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 27
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 28
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 29
Content Block Style Components
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 30
Content Block Style Components
Priorities
UED Brand & Marketing©2014 LinkedIn Corporation. All Rights Reserved. 32
Security Brand protection Code progression
– Reusability– Performance– etc...
Company integration
Priorities
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
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
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
Dev then && Dev now
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/
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
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
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?
Thank You
UED BAM DesignLinkedIn Marketing Dept
Vinay DixitGina Groom
David DeloJacob HeuserEugene O’neillLinkedIn VCIO
Steve JohnsonBay Area CQ Meetup
LinkedIn Facilities TeamLinkedIn Press Team
Special Thanks To:
DevelopersNate Yolles
Will D. WhiteAlec Sorensen
Gilbert HernandezThomas Johnston
Stephanie LieOsama AhmadJames MillerBrodie Yazaki
Yuin Ee
EngineersJefferson Luan
Ash MishraYogesh Upadhyay
Dave LeNicole Ng
Tiffany Saelinh
ManagementDaniel ApodacaKhanh Nguyen
Emily TranJennifer Williams
Vishu Shetty
QARobert HandleyAvanish Sharma
Juhi Puri