Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DIWD 2011


Published on

A look inside the Drupal stack.

Published in: Technology
  • Be the first to comment

DIWD 2011

  1. 1. Dear DIWD, Slides: Twitter:  @zappos_diwd Jeorbs: Love, Zappos
  2. 2. We represent Zappos, Drupal was raised out in Holland photo by Adria Richards
  3. 3. Introductions <ul><li>Alex Kirmse @alexkirmse </li></ul><ul><li>History of early days pre-CMS, pre-Drupal, first Drupal project, Drupal growth and Advanced Landing Pages </li></ul><ul><li>Geoff Berger @geoffberger </li></ul><ul><li>Technical look into Advanced Landing Pages, Baffin and what’s under the hood. </li></ul><ul><li>Daniel Lopez @deshawnbw </li></ul><ul><li>Dynamic Components and building on top of the Baffin platform </li></ul><ul><li>Stephen Hayden @mestevo </li></ul><ul><li>Application, End-User Support and Documentation with Drupal </li></ul>
  4. 4. the early days… (2006-2008) <ul><li>Our small front-end team…. </li></ul>
  5. 5. 10+ sites to maintain
  6. 6. <ul><li>Zappos Classic </li></ul><ul><li>- Perl/MySQL platform, proprietary templating system </li></ul><ul><li>- non e-commerce content needed managing </li></ul><ul><li>- Many requests to make link, image and wording changes </li></ul><ul><li>- No Content Management System! </li></ul>
  7. 7. Typical Requests… &quot;We need to change the 3rd sentence in the Terms and Conditions….baah! &quot; &quot;Please change the image and link on page...&quot; &quot;We need a simple FAQ...&quot; Baaah! Photo by: Aunt Owwee
  8. 8. Blogs and the first taste of a CMS <ul><li>- End of 2007 implemented a 3rd party Blogs platform for </li></ul><ul><li>- Clearspace, J2EE Enterprise Social Collaboration Platform </li></ul><ul><li>- Used for blogs, but potentially planned for forums, wikis and customer interaction </li></ul><ul><li>+ Feature rich out of the box: </li></ul><ul><li>User management, Forums, Wikis, Friends, Commenting, themeing   </li></ul><ul><li>+ Nice to have content be manageable via a CMS </li></ul>
  9. 9. - In The Wild <ul><li>By early 2008 Clearspace was in production, under active use: </li></ul><ul><li>Developers we’re theming and customizing Blogs </li></ul><ul><li>Sys admins in production, sending traffic to site and managing the servers </li></ul><ul><li>Bloggers we’re writing 3-4 blog posts a day </li></ul>Photo by Eric Miraglia
  10. 10. Development Team: - not easily customizable - strange template conventions - front-end issues End Users/Bloggers - Problematic rich text editor - Lack of 3rd party tools Sys Admins - Performance and logging issues - Tough upgrade path - Longer deploy cycles Blogs Feedback photo by Patricia van Casteren
  11. 11. Sidebar : Why Clearspace and not Wordpress? <ul><li>- Sys team questioned the &quot; enterprise &quot;ness of Wordpress </li></ul><ul><li>- Engineer: Single Sign-on easier with Java than with PHP </li></ul><ul><li>- New site revamp is Java </li></ul>
  12. 12. Hearing about Drupal <ul><li>- SXSW 2008 CMS Roundup </li></ul><ul><li>- IA Summit, talked to maintainers of the Yahoo Designs Pattern library that uses Drupal </li></ul><ul><li>- Very flexible platform, but definitely requires deeper knowledge if you customize it </li></ul>photo by Stephen hizKNITS
  13. 13. An opportunity... <ul><li>- Tony had an idea to create a new site: </li></ul><ul><li>- Primarily static content or content that needed easy updating by business users </li></ul><ul><li>- No e-commerce parts </li></ul><ul><li>- Stand-alone site </li></ul><ul><li>- New site, not replacing  </li></ul><ul><li>Let's give Drupal a try! </li></ul>Tony Hsieh, CEO
  14. 14. <ul><li>Compare both platforms: </li></ul><ul><li>Clearspace (theme and add new Blogs) </li></ul><ul><li>Drupal on </li></ul><ul><li>Switch developers! </li></ul><ul><li>Which is easier to develop on, customize, extend? </li></ul>
  15. 15. – POWERED BY Drupal - Easy updates and maintenance – no code pushes or deploys - Quick turnaround on projects - Customization and plugins easily available
  16. 16. <ul><li>Zappos ZETA </li></ul><ul><li>- In 2008, Zappos was building a new Zappos site from the ground up </li></ul><ul><li>- New templating system, new back-end code (Java), cleaner front-end code, new search indexer (SOLR) </li></ul><ul><li>- Let's optimize the front-end to be more self-service and include a CMS for all the static content </li></ul><ul><li>- FAQ, Legal, Customer Service pages to be managed in Drupal </li></ul>
  17. 17. FAQ, Customer Service Pages and Terms & Conditions <ul><li>Simple static content, frequent updates and additions </li></ul><ul><li>No complicated functionality </li></ul><ul><li>Simple for Drupal, Some challenges to combine 2 platforms </li></ul>
  18. 18. Challenge 1: Combining two technology stacks into 1 experience Solution 1: Use our in-house proxy/rewrite engine to combine into 1 experience.
  19. 19. Challenge 2 : Dealing with common/shared code on both platforms. Make updates on both platforms? Solution 2: Parse blank Zeta template into Drupal to share common code.
  20. 20. <ul><li>  </li></ul><ul><li>Mission: Create category shopping landing pages </li></ul><ul><li>Requirements: </li></ul><ul><li>Expose categories </li></ul><ul><li>Independent management of links </li></ul><ul><li>Image management </li></ul><ul><li>Pull information dynamically from product catalog </li></ul>
  21. 21. Challenge 1 : Pull information product catalog Solution 2: Make a bunch of calls to internal APIs including SOLR
  22. 22. Challenge 2 : Make an admin for non-technical users Solution 2: Use a variety of contributed Drupal modules including: - CCK - Filefield - Link - Nodehierachy - Views
  23. 23. Lessons Learned <ul><li>Use a platform that works for your company, culture and development style.  </li></ul><ul><li>Clearspace == Feature rich, out of the box, not meant to be modified heavily or often, not easily upgraded </li></ul><ul><li>Zappos == heavy customization, iterative changes, rapid deploys, flexible </li></ul><ul><li>Drupal better fit for Zappos company and development style </li></ul>Leverage the creativity of your team to bend technologies to meet business needs Solutions don’t have to be documented or blessed Remote template Hybrid Usage of API’s
  24. 24. Moving on from ALPs <ul><ul><li>Quick Turn Around </li></ul></ul><ul><ul><li>Automation isn ’t always the answer </li></ul></ul><ul><ul><li>Limitations of the existing toolset </li></ul></ul><ul><ul><li>Allow for more configuration/flexibility within reason </li></ul></ul>
  25. 25. Baffin
  26. 26. Baffin: Layouts
  27. 27. Baffin: Components
  28. 28. Baffin: Request Cycle
  29. 29. Baffin: Layouts info file | template file | class file
  30. 30. Baffin: Components
  31. 31. Baffin: Components class file | view file
  32. 32. CCK: Leveraging (?:In|Ex)ternal APIs <ul><ul><li>Search </li></ul></ul><ul><ul><li>Product </li></ul></ul><ul><ul><li>Generated Imagery </li></ul></ul><ul><ul><li>Reviews </li></ul></ul>
  33. 33. Baffin: Shoes Page
  34. 34. Baffin: Shoes Internally
  35. 35. Baffin: Internal Admin
  36. 36. Baffin: Admin Management
  37. 37. Baffin: CCK Field
  38. 38. Baffin: Final Outcome
  39. 39. Components With Attitude Super awesome ya
  40. 41. Content Management System / ALP
  41. 42. Content Management System / ALP System Solidarity / Iterations
  42. 43. Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
  43. 44. Cat-Skillz Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
  44. 45. Cat-Skillz Open Source Maybe? ...Hopefully?  (probably not) Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
  45. 46. <ul><li>Mo Problems Mo Solutions </li></ul> / people / rakkhi /
  46. 48. Product Ticker link video
  47. 49. Geolocation Product Ticker link video
  48. 50. Hero Video link video
  49. 51. <ul><li>Zappos Video </li></ul>link video
  50. 52. Grid Selector link video
  51. 53. Limited Access link video
  52. 58. Limited Access link video
  53. 59. A Top Secret City For Zappos VIP? ? ? ? ? ? ? ? ? ? ? ? ? ? link / people / snoguitar /
  54. 60. on Flickr by INTVGene
  55. 61. Application Support  
  56. 62. Where I come from… Started in ZCLT in 2005 Helped manage Powered by Zappos sites 2006-2010 Became an ASS in 2010
  57. 63. A pplication S upport S pecialist   spice  via Daniel photo via: / people / alces / Get It? ... GET IT???!
  58. 64. Great, we have help, now what?    <ul><li>Own some processes, stop  the frustration </li></ul><ul><ul><li>Permissions </li></ul></ul><ul><ul><li>Login pages </li></ul></ul><ul><ul><li>Documentation </li></ul></ul><ul><li>Help the business collaborate  </li></ul><ul><ul><li>Do more with existing tools </li></ul></ul><ul><li>Listen to business needs, identify pain points </li></ul><ul><ul><li>JIRA </li></ul></ul><ul><li>Put all that together... </li></ul>
  59. 65. Stop, Collaborate and Listen...
  60. 66. Permissions <ul><li>Permission levels </li></ul><ul><li>Layouts </li></ul><ul><ul><li>Homepage </li></ul></ul><ul><ul><li>Three-Column </li></ul></ul><ul><ul><li>Vertical </li></ul></ul><ul><ul><li>Trends </li></ul></ul><ul><li>Components </li></ul><ul><ul><li>Category Navigation </li></ul></ul><ul><ul><li>Page Content </li></ul></ul><ul><ul><li>...and a bunch of others </li></ul></ul><ul><li>Fields </li></ul><ul><ul><li>URL aliases </li></ul></ul><ul><ul><li>Google Analytics settings </li></ul></ul>
  61. 67. Permissions <ul><li>User categories </li></ul><ul><li>Teams that own pages </li></ul><ul><ul><li>Visual Merchandising </li></ul></ul><ul><ul><li>Information Architecture </li></ul></ul><ul><li>Teams that update pages </li></ul><ul><ul><li>Visual Design </li></ul></ul><ul><ul><li>Content </li></ul></ul><ul><li>  </li></ul>
  62. 68. Permissions: Versatile Roles
  63. 69. Permissions: Well, kinda versatile.
  64. 70. Permissions: Examples Information Architecture team
  65. 71. Permissions: Examples Visual Design
  66. 72. Documentation <ul><li>Just in case someone reads it, we put some together... </li></ul>
  67. 73. Documentation
  68. 74. Documentation: Components
  69. 75. Documentation: Visual Diagrams Homepage layout Three-Column Layout
  70. 76. Homepage layout Three-Column Layout Documentation: Visual Diagrams
  71. 77. BCP: Baffin Control Panel <ul><li>Acronyms are cool, especially if they don't make sense </li></ul><ul><ul><li>Just a way to view our content internally </li></ul></ul><ul><ul><li>Diving into the admin to find content wasnt fun  </li></ul></ul>
  72. 78. BCP: Baffin Control Panel
  73. 79. Login Pages <ul><li>Uninspiring and generally useless login page: </li></ul>
  74. 80. New and improved!
  75. 81. JIRA <ul><ul><li>Our Swiss Army Knife that we use Task management  </li></ul></ul><ul><ul><li>60 projects, 450 custom fields </li></ul></ul><ul><ul><li>All IT requests, asset management, customer feedback, lost shoes/items </li></ul></ul><ul><ul><li>Prioritization, resourcing </li></ul></ul>
  76. 82. JIRA: Landing Page Queue <ul><ul><li>Purpose </li></ul></ul><ul><ul><li>How will this page be found </li></ul></ul><ul><ul><li>Expectations </li></ul></ul><ul><ul><li>Live Date </li></ul></ul><ul><ul><li>Expiration </li></ul></ul>
  77. 83. JIRA: Landing Page Queue <ul><ul><li>Notify relevant departments </li></ul></ul><ul><ul><li>Track pages to completion and beyond </li></ul></ul>
  78. 84. Just the tip of the iceberg <ul><ul><li>Role grows as the platform does </li></ul></ul><ul><ul><li>Doing more with less </li></ul></ul><ul><ul><li>Every day is different </li></ul></ul>
  79. 85. Drupal Progression 2008 to Present
  80. 90. Do It With Us! Check out our booth at DIWD Thanks for coming!
  81. 91. Dear DIWD, Slides: Twitter:  @zappos_diwd Jeorbs: Love, Zappos