Adobe CQ at LinkedIn Meetup February 2014

Download Adobe CQ at LinkedIn Meetup February 2014

Post on 19-Aug-2015

538 views

Category:

Technology

1 download

TRANSCRIPT

  1. 1. LinkedIn and Adobe CQ2014 LinkedIn Corporation. All Rights Reserved.
  2. 2. 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.com2014 LinkedIn Corporation. All Rights Reserved.2
  3. 3. LinkedIn
  4. 4. LinkedIn2014 LinkedIn Corporation. All Rights Reserved.4
  5. 5. LinkedInNot Adobe CQ2014 LinkedIn Corporation. All Rights Reserved.5
  6. 6. LinkedIn Brief Overview2014 LinkedIn Corporation. All Rights Reserved.6
  7. 7. LinkedIn Brief Overview2014 LinkedIn Corporation. All Rights Reserved.7
  8. 8. LinkedIn Brief Overviewpremium.linkedin.com talent.linkedin.commarketing.linkedin.com2014 LinkedIn Corporation. All Rights Reserved.8
  9. 9. UED Brand & Marketing
  10. 10. 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
  11. 11. LinkedIn UED/BAM Major Sites2014 LinkedIn Corporation. All Rights Reserved.
  12. 12. LinkedIn UED/BAM Major Sites marketing.linkedin.com sales.linkedin.com talent.linkedin.com premium.linkedin.com2014 LinkedIn Corporation. All Rights Reserved.
  13. 13. LinkedIn UED/BAM Campaign Sites2014 LinkedIn Corporation. All Rights Reserved.
  14. 14. 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 more2014 LinkedIn Corporation. All Rights Reserved.
  15. 15. History of CQ at LinkedIn
  16. 16. History and CMS Selection ProcessWhy does LinkedIn use CQ?2014 LinkedIn Corporation. All Rights Reserved.16
  17. 17. 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 platforms2014 LinkedIn Corporation. All Rights Reserved.17
  18. 18. Choosing CQ There can be only one... CMS. Consultant Recommended Offered a number of things our authors wanted The demo was pretty snazzy2014 LinkedIn Corporation. All Rights Reserved.18
  19. 19. 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 app2014 LinkedIn Corporation. All Rights Reserved.19
  20. 20. Re-Architecting the LinkedIn Microsites AppProject Greenfield2014 LinkedIn Corporation. All Rights Reserved.20
  21. 21. 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 site2014 LinkedIn Corporation. All Rights Reserved.21
  22. 22. 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 with2014 LinkedIn Corporation. All Rights Reserved.22
  23. 23. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.23
  24. 24. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.24
  25. 25. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.25
  26. 26. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.26
  27. 27. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.27
  28. 28. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.28
  29. 29. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.29
  30. 30. Content Block Style Components2014 LinkedIn Corporation. All Rights Reserved.30
  31. 31. Priorities
  32. 32. Priorities Security Brand protection Code progression Reusability Performance etc... Company integration2014 LinkedIn Corporation. All Rights Reserved.32
  33. 33. 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 page2014 LinkedIn Corporation. All Rights Reserved.33
  34. 34. 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 Development2014 LinkedIn Corporation. All Rights Reserved.34
  35. 35. 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
  36. 36. Dev then && Dev now
  37. 37. 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 painpubdev trunkvltdev 2014 LinkedIn Corporation. All Rights Reserved.* Image from: http://www.txcscopereview.com/2012/veteran-math-teacher-tells-all/authsvn up vlt up svn up - resolve Vlt add vlt ci - pray 37
  38. 38. 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.htm38
  39. 39. Primary Benefits gitdevdevdevArchetype (SASS) integration Linting && Unit Testing Pre-deploy validation Builds to a deployable artifact Integration with other systems Easier AutomationSecondary Benefits auth replication Branching made dev work easier Git had better conflict resolution Pre-commit hooks easier to implementpub Evolution/Scaling cont. 2014 LinkedIn Corporation. All Rights Reserved.39
  40. 40. 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
  41. 41. Thank You DevelopersEngineersQAManagementNate Yolles Will D. White Alec Sorensen Gilbert Hernandez Thomas Johnston Stephanie Lie Osama Ahmad James Miller Brodie Yazaki Yuin EeJefferson Luan Ash Mishra Yogesh Upadhyay Dave Le Nicole Ng Tiffany SaelinhRobert Handley Avanish Sharma Juhi PuriDaniel Apodaca Khanh Nguyen Emily Tran Jennifer Williams Vishu ShettyUED BAM Design LinkedIn Marketing Dept Vinay Dixit Gina GroomSpecial Thanks To: David Delo Jacob Heuser Eugene Oneill LinkedIn VCIOSteve Johnson Bay Area CQ Meetup LinkedIn Facilities Team LinkedIn Press Team