Adobe CQ at LinkedIn Meetup February 2014
Upcoming SlideShare
Loading in...5
×
 

Adobe CQ at LinkedIn Meetup February 2014

on

  • 657 views

 

Statistics

Views

Total Views
657
Views on SlideShare
657
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • WelcomeIntroductionThankAmitThank user group
  • All info taken from press.linkedin.com
  • You’re all familiar with the LinkedIn website.
  • It’s not built on CQ. It’s 10+ years of custom code and magic.
  • As we discuss LinkedIn and it’s mission with Adobe CQ, it’s important to keep two main facts in mind:LinkedIn has 277+ million members>2 new members per second sign up200 countries and territories around the world21 languages and counting3 million companies have pages1st main point: Linked in has a lot of membersMotto: members first
  • 2nd main point:LinkedIn, like any company, is here to generate revenue. LinkedIn has employees to pay, rent to cover, and shareholders (like you and I) to answer to.A little foreshadowing on how LI uses CQ:Our 3 main revenue streams: Premium, Marketing, and Talent…
  • And not-so-coincidently, three of our biggest CQ sites are: premium.linkedin.com, marketing.linkedin.com, and talent.linkedin.com
  • A quick background on the team
  • UEDUnder UED is BAMMade up of web developers with a wide background of skills focusing on front end skills such as HTML, CSS, and JavaScript.
  • Our major sites:
  • And more
  • We have sites for certain major events and campaigns.We have sites and pages setup daily by our marketing team for any reason they can think of to drive traffic.
  • Sites were often developed by external agenciesDecided to bring all sites in-house with BAM’s supportSites were built on a number of CMS platformsMostly PHPEvery site required its own codebase, hard to make global updatesConstantly patchingDifferent release processes per CMS
  • Consultant Recommended:Consultant worked with Marketing Stakeholders and EngineeringIdentified a number of potential enterprise CMS platforms, recommended CQOffered a number of things our authors wanted:Lots of “out of the box” functionalityInline WYSIWYG style authoring interfaceEasy asset management (with the DAM)Instant PublishingThe demo was pretty snazzy
  • Hired the consultant to deliver our first appUsed their app to launch our first siteFamiliarized ourselves with Java while supporting the appBegan to notice issues as we scaled the appMostly just customized out of the box componentsRequired one application for each siteNot up to LinkedIn coding standardsPotential security vulnerabilities
  • Contributor Led Effort, in addition to existing workSought out experienced in-house app developers for guidanceUltimately decided to support all sites using a single applicationA global library of componentsUseable in any site contextAble to support non-English sites as wellConcluded that “out of the box” wasn’t good enoughNo more inline JS, CSS, and Java in our JSPs allowedSane authoring experience instead of deep nesting componentsNeeded to work in parallel with the app supporting the first site
  • Decided to built new instead of extend the existing app Avoid regressions No reliance on backwards compatibilityCleaner directory structure under our appIgnored the “Geomettrix” style directory structureMost pages were built using open “Blank Page” styled templatesTwo open parsys areas – “Hero” and “Content” area“Content Block” style components were easy to drop inComponents are tied more closely to “Content Blocks”Business logic for components was moved to _init.jsp files – moving to actual java classes per componentPresentational logic was removed or converted to c:tagsBegan splitting JSP files into reusable partials
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Just show for 10~ seconds or so.
  • Members firstSecurityHackers may see subdomains as a backdoorContent authors author content. Not the look or feel.
  • Content authors author content. Not the look or feel.
  • SVN + FILEVAULTAlready on SVN so stayed with it. Filevault was suggested by the vendor.It was a complicated processNo real understanding of filevault (no vlt revert #SHA abilities)Overriding and erasing of work due to complicated interactions between vault/svn/cqSvn up + vlt add/ci doesn’t work (vlt want’s you do to vlt up first) vlt up would change all the things that you brought down from svn
  • Moved to GIT-SVN + VLTUsed git-svnvsgit because our rb system was already integrated with svn and much easier to get aligned w/ other teams
  • Primarybenefits came from the mvn build process - ready benefits (easier integration/configuration of new processes)Secondary benefits came from branch dev - branchin

Adobe CQ at LinkedIn Meetup February 2014 Adobe CQ at LinkedIn Meetup February 2014 Presentation Transcript

  • LinkedIn and Adobe CQ ©2014 LinkedIn Corporation. All Rights Reserved.
  • 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. 2
  • LinkedIn View slide
  • LinkedIn ©2014 LinkedIn Corporation. All Rights Reserved. 4 View slide
  • LinkedIn Not Adobe CQ ©2014 LinkedIn Corporation. All Rights Reserved. 5
  • LinkedIn Brief Overview ©2014 LinkedIn Corporation. All Rights Reserved. 6
  • LinkedIn Brief Overview ©2014 LinkedIn Corporation. All Rights Reserved. 7
  • LinkedIn Brief Overview premium.linkedin.com talent.linkedin.com marketing.linkedin.com ©2014 LinkedIn Corporation. All Rights Reserved. 8
  • 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. 10
  • LinkedIn UED/BAM Major Sites ©2014 LinkedIn Corporation. All Rights Reserved.
  • LinkedIn UED/BAM Major Sites     marketing.linkedin.com sales.linkedin.com talent.linkedin.com premium.linkedin.com ©2014 LinkedIn Corporation. All Rights Reserved.
  • LinkedIn UED/BAM Campaign Sites ©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… ©2014 LinkedIn Corporation. All Rights Reserved.
  • History of CQ at LinkedIn
  • History and CMS Selection Process Why does LinkedIn use CQ? ©2014 LinkedIn Corporation. All Rights Reserved. 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. 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. 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. 19
  • Re-Architecting the LinkedIn Microsites App Project Greenfield ©2014 LinkedIn Corporation. All Rights Reserved. 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” wasn’t good enough Needed to work in parallel with the app supporting the first site ©2014 LinkedIn Corporation. All Rights Reserved. 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. 22
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 23
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 24
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 25
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 26
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 27
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 28
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 29
  • Content Block Style Components ©2014 LinkedIn Corporation. All Rights Reserved. 30
  • Priorities
  • Priorities  Security  Brand protection  Code progression – Reusability – Performance – etc...  Company integration ©2014 LinkedIn Corporation. All Rights Reserved. 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 won’t allow HTML inserted into page ©2014 LinkedIn Corporation. All Rights Reserved. 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. 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. 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 people’s work – Managing conflicts between vlt and svn was a pain pub dev trunk vlt dev ©2014 LinkedIn Corporation. All Rights Reserved. * Image from: http://www.txcscopereview.com/2012/veteran-math-teacher-tells-all/ auth svn up vlt up svn up - resolve Vlt add vlt ci - pray 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. * image: http://www.chinadaily.com.cn/china/2012-01/11/content_14424377.htm 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. 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. 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 UED BAM Design LinkedIn Marketing Dept Vinay Dixit Gina Groom Special Thanks To: David Delo Jacob Heuser Eugene O’neill LinkedIn VCIO Steve Johnson Bay Area CQ Meetup LinkedIn Facilities Team LinkedIn Press Team