Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Zappos Drupal Journey and Baffin Platform
Similar a Zappos Drupal Journey and Baffin Platform (20)
Último
Último (20)
Zappos Drupal Journey and Baffin Platform
- 1. Dear DIWD, Slides: tinyurl.com/zappos-diwd Twitter: @zappos_diwd Jeorbs: goo.gl/mwiwk jobs.zappos.com Love, Zappos
- 2. We represent Zappos, Drupal was raised out in Holland photo by Adria Richards http://www.flickr.com/photos/adriarichards/
- 5. 10+ sites to maintain
- 7. Typical Requests… "We need to change the 3rd sentence in the Terms and Conditions….baah! " "Please change the image and link on page..." "We need a simple FAQ..." Baaah! Photo by: Aunt Owwee http://www.flickr.com/photos/aunto
- 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 http://www.flickr.com/photos/patries71/
- 15. About.Zappos.com – POWERED BY Drupal - Easy updates and maintenance – no code pushes or deploys - Quick turnaround on projects - Customization and plugins easily available
- 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. 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.
- 21. Challenge 1 : Pull information product catalog Solution 2: Make a bunch of calls to internal APIs including SOLR
- 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
- 25. Baffin
- 26. Baffin: Layouts
- 29. Baffin: Layouts info file | template file | class file
- 31. Baffin: Components class file | view file
- 39. Components With Attitude Super awesome ya
- 41. Content Management System / ALP
- 42. Content Management System / ALP System Solidarity / Iterations
- 43. Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
- 44. Cat-Skillz Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
- 45. Cat-Skillz Open Source Maybe? ...Hopefully? (probably not) Content Management System / ALP System Solidarity / Iterations Super awesomely cool stuff
- 48. Product Ticker link video
- 49. Geolocation Product Ticker link video
- 50. Hero Video link video
- 52. Grid Selector link video
- 53. Limited Access link video
- 58. Limited Access link video
- 59. A Top Secret City For Zappos VIP? ? ? ? ? ? ? ? ? ? ? ? ? ? link flickr.com / people / snoguitar /
- 60. on Flickr by INTVGene
- 62. Where I come from… Started in ZCLT in 2005 Helped manage Powered by Zappos sites 2006-2010 Became an ASS in 2010
- 63. A pplication S upport S pecialist spice via Daniel photo via: flickr.com / people / alces / Get It? ... GET IT???!
- 65. Stop, Collaborate and Listen...
- 69. Permissions: Well, kinda versatile.
- 70. Permissions: Examples Information Architecture team
- 71. Permissions: Examples Visual Design
- 73. Documentation
- 75. Documentation: Visual Diagrams Homepage layout Three-Column Layout
- 76. Homepage layout Three-Column Layout Documentation: Visual Diagrams
- 78. BCP: Baffin Control Panel
- 85. Drupal Progression 2008 to Present
- 90. Do It With Us! Jobs.zappos.com Check out our booth at DIWD Thanks for coming!
- 91. Dear DIWD, Slides: tinyurl.com/zappos-diwd Twitter: @zappos_diwd Jeorbs: goo.gl/mwiwk jobs.zappos.com Love, Zappos
Notas del editor
- This is the Drupal Case Study of Zappos. We’ve been using Drupal since early 2008 and while it doesn’t power transactional parts of the site currently a major player in our tech stack
- - I’m Alex - Former head of Front-End Development and User Experience With Mobile team since June Talking about: History of Drupal and the progression of how we’ve gotten to where we are now Walkthrough the pre-CMS, pre-Drupal days. first Drupal project and beyond Geoff Technical look into Advanced Landing Pages, Baffin and what’s under the hood. Daniel Dynamic Components and building on top of the Baffin platform Stephen Application Support, End-User Support and Documentation with Drupal Progression
- Our small front-end development team This is an actual picture of our team in a San Francisco Apple Store during our outing
- 10 plus sites to maintain including: international sites, lifestyle sites white label sites called Powered By Zappos, which were sites that were themed like the brand but were powered by the Zappos infrastructure and maintain by the front-end team Powered by Zappos program ended in 2010
- Our old “classic platform” Perl/MySQL platform Lots of static and non-ecommerce content Lots of requests to make small link updates and changes
- “ Please Change the image and link on page” Definitely got bogged down in small updates. Baaah!!! We need a CMS of some sort! Not sustainable
- - First taste of a CMS - End of 2007 implemented a 3rd party Blogs platform for blogs.zappos.com - Clearspace, J2EE Enterprise Social Collaboration Platform - Used for blogs, but potentially planned for forums, wikis and customer interaction + Feature rich out of the box: User management, Forums, Wikis, Friends, Commenting, themeing + Nice to have content be manageable via a CMS Looked promising and I have diagrams of how we were potentially going to build out our future CMS strategy using Clearspace. But….
- - Early 2008 had Blogs.Zappos.com in the wild In production for about 6 months 3 groups monkeying around with Clearspace Developers customizing/themeing Blogs Sys Admins managing servers, receiving traffic, deploying code Bloggers writing 3-4 blogs posts a day
- But after 6 months of monkeying around…. Starting to get the sense that this isn’t a great fit for Zappos…. Developers : Tough to customize and weird templating Written without front-end developers on the team CSS appending (1 monster CSS file for all themes, bottom theme is the most active) Sys Admins : Performance laggy, many reboots, heavy logging Upgrade path tough with any customizations Deploys tougher with Java Bloggers: Rich text editor sucked Not a lot of great 3 rd party sharing and plugins
- Why not Wordpress? Probably the most popular Blog platform Sys team questioned the " enterprise "ness of Wordpress Traffic concerns - Engineer: Single Sign-on easier with Java than with PHP - New site revamp is Java
- - At SXSW 2008, session called Content Management System Roundup - SharePoint , Expression Engine , Collage and Drupal - Jeff Eaton , from Lullabot gave a great presentation on Drupal - He showcased of some higher profile sites that were running Drupal. - I was impressed with the variety of sites running Drupal and the fact that they were high-traffic sites. Sony BMG, MTV etc.. - I had a chance to talk to Jeff Eaton and Mike Essl after the sessions about the strengths and weaknesses of Drupal and Expression Engine - both agreed for the things we'd use a CMS for at Zappos, Drupal would be a solid solution. - A few months later at IA Summit I talked to Christian Crumlisch from Yahoo Curator of Design Patterns Library. He said it was a solid platform, flexible and feature rich but you would need somebody that understood the internals if you were going to customize and modify it a bit.
- Tony had an idea to create a new site: About.Zappos.com Culture, Company information etc.. Great to try Drupal on because: - Primarily static content or content that needed easy updating by business users - No e-commerce parts - Stand-alone site - New site, not replacing - Little risk and can throttle traffic Let's give Drupal a try!
- About.Zappos.com – also a compare project! 2 Developers and 2 CMS’s (Geoff new hire, really smart) - Let’s have both Fabio and Geoff work on both projects and compare the two systems - Fabio working on Themeing and building out new Blogs - Geoff working on About.Zappos.com - Switch half way through and continue at the end compare and contrast - Drupal wins
- We have our first Drupal Site! - Easy to maintain and update Little code pushes Quick turnaround on projects Customization and plenty of plugins available Awesome to have a Content Management System!
- Middle of 2008 we began redoing our Zappos site architecture Ground up redesign of the site From Perl/MySQL to JAVA/MySQL/SOLR New templating system, cleaner front-end code Let’s optimize the site to leverage a CMS, therefore making content more self-service Let’s use Drupal for all our Customer Service pages, Frequently Asked Questions and Legal pages!
- Frequently Asked Questions, Customer Service Pages and Terms and Conditions were great to put into Drupal Simple static content that required frequent updates and additions No complicated functionality Pretty straight forward for Drupal to handle But we had some challenges to combine 2 platforms
- Challenge #1: How do you combine two technology stacks into 1 seemless experience. Different URLs, different servers, linking between sites Solution: Use our in-house proxy and rewrite engine to combine the two stacks into one, unified experience.
- Challenge 2 : Dealing with common/shared code on both platforms. Make updates on both platforms? Solution 2: Parse blank Zeta (JAVA) template into Drupal to share common code. Have this blank template from the Java platform that could be parsed by Drupal and inject it’s own content into the blank space
- New Project We had a new Mission Advanced Landing Pages Requirements: Expose categories Independent management of links Image management Pull information dynamically from product catalog - Drupal wasn’t the automatic choice! - Drupal is a star but we have other contenders because of deep integration with e-commerce platform - Riot Family (JAVA as back-end) vs. Drupal (our static CMS star) - After a quick 1 week prototype we chose Drupal - Drupal wins again...first step to becoming a consumer of external API's (see Jeff Eaton's talk at DrupalCon DC)
- Challenge 1 : Pull information product catalog Solution 2: Make a bunch of calls to internal APIs including SOLR
- Challenge 2 : Make an admin for non-technical users Solution 2: Use a variety of contributed Drupal modules including: - CCK - Filefield - Link - Nodehierachy - Views Entire project was done very quickly. Geoff worked on it and it was in production after only 6 weeks of development Saw heavy traffic relatively soon and was serving up some of the 10 most visited landing pages on our site Geoff is going to do a brief overview of Advanced Landing Pages But also go into the second generation of Advanced Landing Pages called Baffin.
- Use a platform that works for your company, culture and development style. Clearspace == Feature rich, out of the box, not meant to be modified heavily or often, not easily upgraded Zappos == we’re going to heavily customize our software, lots of iterative changes, lots of rapid deploys, We need a very flexible platform Drupal better fit for Zappos company and development style 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 tech stack Usage of API’s Are all examples of using Drupal in a non-traditional way but in a way that meets our needs.
- Quick Turn Around - Due to business deadlines, we didn't have much time for design and development. - Development time took about 4 weeks. This allowed us to get something out to market rather quickly. - However, the development and scaling of what was put together could have been done much better. - In having such a quick turn around, it was much "easier" for us to learn from what went wrong or what surprisingly went well. Automation isn ’t always the answer - Even though only a small portion of these pages were automated, the business was seeing unexpected/undesired products, search listing, and brand results. - For our purposes, it made sense for us to allow for the best of both worlds. The ability for our business users to automate when it makes sense but allow for manually intervention for the cases where it makes sense. Limitations of the existing toolset - Drupal offers quite a bit out of the box. In the interest of time, we used whatever we could at the time, i.e. out of the box functionality from views and CCK amongst a slew of other modules. - We learned that if we wanted to scale and extend the system, we needed to build on top of Drupal using the built in APIs. This also included the ability to theme on much granular levels. - Instead of using what is available (with limited flexibility), it made the most sense for Zappos to develop something that was more inline with our business that hooks into the underlining infrastructure of Drupal. Allow for more configuration within reason - Not much configuration or flexibility was given with this iteration of landing pages. - The business was asking for the ability to repurpose these pages for things outside of boutiques (although that was the purpose of them). - Instead of looking to create a mechanism for just building landing pages, it made sense to build out a platform on top of Drupal that would adhere to the way that Zappos operates. In this platform, boutique pages would be a consumer of this, along with various other types of pages that had been requested in the past.
- Framework Approach - As previously mentioned, instead of tailoring towards a single solution (i.e. boutique pages), this second iteration would allow for the creation of boutiques but other types of pages with very minimal development work. - Like most frameworks, this approach would entail very little development (handle redundant tasks) and allow for flexibility where applicable. One of the big pluses to using Drupal and PHP.
- Layouts Components - This approach would be broken out into two destinct parts, layouts and components. Both of these would come from one centralized moudle we refer to as Baffin. - Baffin takes on an MVC-like approach that is two layers deep (maybe talk about what MVC is?). The first layer is handled on a layout level where layouts render the top layer including any page specific and region specific. The second layer is the component level where the base information is passed to the component where the component can hit various APIs, do additional queries, processing, mesaging of the data, custom view work, and a bunch of other things which acts. Anything controller related is handled by the baffin module to help in automated redundant tasks. - Baffin is responsible for permissions, reordering, removing, configuration of layouts, grandular theming, the reusing of content, API related tasks, and to name a few. Baffin by itself does nothing, its the creation of layout and components that make it useful. Its geared towards developers developing on top of it verses it being an out of the box solution.
- - Layouts are the initial starting point for baffin. Layout are responsible for: - Configuration for the layout - The output of assigned regions - The output handled on a layout level (verses component level) - The gathering of additional data on on a layout level and any additional views that are needed. - Each region contains a set of nodes which are broken down into components which will be discussed next.
- - A component essentially is a content type. However, a content type is treated essentially as a template for a piece of content to a layout. - A component consists of two parts, a model and view. The model handles basic operations like making API calls, post processing of data, settings view variables, the handling of views, and so on. - The view_directory is being set within the baffin_component hook. The baffin_component hook acts as more as a configuration which includes a number of options such as what directory the backend components come from, what directory the views come from, whether the view should cascade to the active theme, and so on. - The base view is located based upon what is set when the baffin_component hook is invoked. Depending if the option has been set in the hook, there is a cascading system that relates to a specific view. It goes as following: theme/view_directory/layout -> theme/view_directory -> module/view_directory/layout -> module/view_directory - We use components instead of blocks because these components are based on a page level verses a site level and the maintenance would be a nightmare if it wasn't done on such a granular level.
- - A component essentially is a content type. However, a content type is treated essentially as a template for a piece of content to a layout. - A component consists of two parts, a model and view. The model handles basic operations like making API calls, post processing of data, settings view variables, the handling of views, and so on. - The base view is located based upon what is set when the baffin_component hook is invoked. Depending if the option has been set in the hook, there is a cascading system that relates to a specific view. It goes as following: theme/view_directory/layout -> theme/view_directory -> module/view_directory/layout -> module/view_directory - The view_directory is being set within the baffin_component hook. The baffin_component hook acts as more as a configuration which includes a number of options such as what directory the backend components come from, what directory the views come from, whether the view should cascade to the active theme, and so on. - We use components instead of blocks because these components are based on a page level verses a site level and the maintenance would be a nightmare if it wasn't done on such a granular level.
- Search - We created a CCK field that allows a user to perform a search, return back a set of facets, or just simply get back the results entered in by the user. Essentially the user will select a set of rules and the desired results are returned back. - In CCK, the settings form allows a user to select which fields a search can perform on (productTypeFacet, categoryFacet, subCategoryFacets, attributeFacets, and so on), the ability to facet on search results, provide a search term, sorting, field aliasing, and a slew of other things. - The field itself (the process callback) displays what parts have been selected from the settings. The field or filters selected on the settings dynamically update once an onchange event occurs. Therefore, if a user selects productTypeFacet = Shoes, then the categoryFacet would only contain facet values that correlate to that. This is being done with hitting the Zappos API through our taxonomy or product catalog. - The values that are selected as saved out to the database and serves basic search results. Where baffin comes into play is this CCK widget can be repurposed for various uses. For example: returning back facet values, displaying search results, obtaining brand information, or getting back the resutls and doing some JavaScript with it. In the cases of doing something with the data, we are hitting the Zappos API to get search results or facet values. Product - We have a simple CCK field that allows a user to enter in a single productId or styleId (a styleId is a productId + colorId). - The settings form allows for the use of selecting a productId or styleId for the business user. - The field itself (the process callback) contains what was reflected in the settings. - By default, the field displays the product and determines whether the product has stock or not. The field will talk to the Zappos API to obtain the product information. - In cases where the business wants to display an individual product, this works out quite well. However, like most things in life, products run out of stock, so in these cases, we will have a backup search that acts as a catch all. Generated Imagery - We have a bit more complex CCK field where you select a template and based upon what template has been selected, will display an unknown set of fields (based upon the idea of a discovery service approach). This template is managed and maintained from another internal tool and is used elsewhere for other services. - For example, if you select template xyz, template xyz may contain an angle, styleId, another styleId, or some other undetermined field at that point. Once these fields have been filled in, a preview option is available that will talk to another service to make sure the values that were filled in and are valid. If they are valid, based upon the values set on that template, an image will be dynamically generated based upon what is set in that template. Once the preview is valid, a user can enter in alt text, title, link, and a publish option will appear. Reviews - Our oldest CCK field of this kind talks to our Reviews Solr core to show reviews based upon our taxonomy (Make sure we can say Solr). - The field itself (the process callback) contains all the available fields based upon our taxonomy. - On the forward facing side, based upon what has been selected, we talk to the Reviews core based upon what has been selected by the business. Others - We have other CCK fields that aren't API related that we are using that benefit the business that Daniel will discuss in a bit.
- - Discuss how the contents of the page contains a number of dynamic and static elements - Components to discuss: - Category Navigation: Using the search CCK Field on the backend and then talks to an internal API to display links. The back end component will read in the values from the node and talk to an internal API that will then pass the values to the front end component where it will be rendered. - Image Gallery: Builds ontop of filefield to create our own version of this CCK widget. This allows us to do things that does not affect or impact filefield. The images are static and the JavaScript that is used for this component is contained and rendered on the Java platform. - Recommendations: The business sets the rules for what sort of recommendation should be displayed. Then on the front end we talk to our recommendation engine based upon what is set by the business as to what should be displayed. - Product Feed: Uses the search CCK field to displays search results. The filters are set by the business. The back end component will then talk to the Zappos API to get the results set by the business where the view will render the result.
- Geoff Covered: Basics / Fundamentals of Baffin Creating Components / Layouts with code Standard Zappos Page’s Components I’ll be covering Non-standard components Experimental / trying out ideas Common theme: Moving / Interactive But first I want to: Re-iterate or piggy back off Alex’s points Explain how we got to a point where we can: Experiment for the site Play with new ideas for the site
- Moslow’s BG is Maslow Important Psychologist Born / raised in Brooklyn Human beings are naturally good Studied superb human beings rather than non-functional ones Hierarchy Human Needs Order in which attempted Typically Don’t Skip a step Water VS Belonging Air VS Friends
- Physiological Needs: Food, Air Water For us: CMS Barraged with content updates We were just trying to get some AIR to breath! First Iteration of ALP’s
- Safety Needs Shelter, Financial Security Personal Safety For US Second Iteration (Baffin) Solidification of Baffin through iteration Re-worked a quite a bit (API / Other Features)
- Love / Belonging Belonging to social groups Making new friends Falling In Love, etc. For us Super awesomely cool stuff Really fun stuff Interactive, Flash, Moving Experimenting / Playing with new Idea’s
- Esteem Seeking Recognition Attempting to win awards For us: Cat-skillz (mountain range) Next Iteration Probably Drupal 7/8
- Self-Actualization Gandhi, Einstein, Ben Stein, and Nelson Mandela Attempting to win awards Not everyone reaches self-actualization For us: Just like Maslow thinks humans naturally good I think Zappos is inherently good as well Future: Open Source (Where it makes sense) Future: More Involved In Community We are definitely not anywhere near there yet
- More Feature Requests / Solutions Completed The more solutions to future problems we have.
- I have a couple of solid Examples of this But first Going to show just some stuff that “moves” or “animates” (This slide is pretty pointless)
- Uses the Zappos API Specifically The Search Controller Admin uses “Patron Field” aka Zappos API Field, for filtering/faceting on results
- Also the Zappos API Specifically The Statistics Controller (This API is open folks) Backend Magic Gives us rough City/State Information Admin Also “Patron Field” aka Zappos API Field, for filtering/faceting on results
- Simple, yet cool. I love it Laurie who works a lot with video and multimedia Came up to me and showed me an example of what she wanted Code example: JavaScript from 1999 Uses HTML5 Video Fallback to Regular Hero Image
- Result of abusing WYSIWYG’s in Drupal <object> for our video player doesn’t scale If we change our player, we are screwed / hard to find random pieces all over Used Community Module (Video filter, added our custom filter the module) Two ways: [video=http://example.flv] and Component
- ZCLT: Exposure to and encourage adoption of Wiki usage PBZ: Drupal exposure, I was the business client for the front end team ASS: Helped facilitate all of the above and take it to the next level
- ZCLT: Exposure to and encourage adoption of Wiki usage PBZ: Drupal exposure, I was the business client for the front end team ASS: Helped facilitate all of the above and take it to the next level
- Started with About.Zappos.com Standalone site with static content Typical usage of Drupal, very similar to most Drupal installations out in the wild A few internal users and some light traffic from customers
- Late 2008, Used Drupal to power Frequently Asked Questions, Terms and Conditions Still pulled in static content and had light traffic but was incorporated into the e-commerce site Used the remote template parsing I mentioned in my talk
- Advanced Landing Pages was the first time we had to pull in product catalog information from SOLR, Databases and other internal API’s. Our information architecture team under UX was put in charge of managing the landing pages. We also started using Drupal on multiple sites for static content. Traffic wise, Drupal was hosting some of the most visited landing pages on Zappos.com
- 2010 brought Baffin, which is what Geoff did a deep dive on We continued to hit internal API’s and additionally started hitting some external API’s as well With the increasing number of end-users that were managing Advanced Landing Pages and then Baffin, we brought on App Support App Support is what Stephen Hayden talked about
- By 2011 and currently, our stack looks something like this: We additionally hit a Dynamic Image Creation API that can generate images on the fly Baffin has increasingly been used as a platform to develop and extend upon. - Daniel talked about building Components on top of Baffin With the increased traffic we started seeing: Caching for performance Multivariate for testing Domain manager for multisite capability Finally we started to expose our Baffin content to be leveraged for our Mobile Apps
- Do It With Us! We’re hiring for Drupal positions, check jobs.zappos.com! We have a booth here at Do It With Drupal. Both Jen and Tonya are attending it! We also have a prize wheel where you can win various prizes. Thanks for coming to our Do It With Drupal presentation