{"id":7803,"date":"2016-05-12T13:52:27","date_gmt":"2016-05-12T20:52:27","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7803"},"modified":"2016-06-24T14:24:55","modified_gmt":"2016-06-24T21:24:55","slug":"amo-technical-architecture","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/","title":{"rendered":"AMO technical architecture"},"content":{"rendered":"<p><a href=\"https:\/\/addons.mozilla.org\/\">addons.mozilla.org<\/a> (AMO) has been around for more than 12 years, making it one of the oldest websites at Mozilla. It celebrated its 10th anniversary a couple of years ago, as Wil <a href=\"http:\/\/micropipes.com\/blog\/\/2014\/02\/21\/ten-years-of-addons-mozilla-org\/\">blogged about<\/a>.<\/p>\n<p>AMO started as a PHP site that grew and grew as new pieces of functionality were bolted on. In <a href=\"https:\/\/github.com\/jbalogh\/zamboni\/commit\/2c501a431613fbd1c4b5be87c510c800f982fa48\">October 2009<\/a> the rewrite from PHP to Python began. New features were added, the site grew ever larger, and now a few cracks are starting to appear. These are merely the result of a site that has lots of features and functionality and has been around for a long time.<\/p>\n<p>The site architecture is currently something like below, but please note this simplifies the site and ignores the complexities of AWS, the CDN and other parts of the site.<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png\" rel=\"attachment wp-att-7804\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png\" width=\"463\" height=\"270\" \/><\/a><\/p>\n<p>Basically, all the code is one repository and the main application (a Django app) is responsible for generating everything\u2014from HTML, to emails, to APIs, and it all gets deployed at the same time. There\u2019s a few problems with this:<\/p>\n<ul>\n<li>The amount of functionality in the site has caused such a growth in interactions between the features that it is harder and harder to test.<\/li>\n<li>Large JavaScript parts of the site have no automated testing.<\/li>\n<li>The JavaScript and CSS spill over between different parts of the site, so changes in one regularly break other parts of the site.<\/li>\n<li>Not all parts of the site have the same expectation of uptime but are all deployed at the same time.<\/li>\n<li>Not all parts of the site have the same requirements for code contributions.<\/li>\n<\/ul>\n<p>We are moving towards a new model similar to the one used for Firefox <a href=\"https:\/\/marketplace.firefox.com\/\">Marketplace<\/a>. Whereas Marketplace built its own front-end framework, we are going to be using <a href=\"https:\/\/facebook.github.io\/react\/\">React<\/a> on the front end.<\/p>\n<p>The end result will start look something like this:<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image00-2.png\" rel=\"attachment wp-att-7810\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image00-2.png\" alt=\"image00\" width=\"461\" height=\"190\" \/><\/a><\/p>\n<p>A separate version of the site is rendered for the different use cases, for example developers or users. In this case a request comes in hits one of the appropriate front-end stacks. That will render the site using React universal in <a href=\"https:\/\/nodejs.org\/en\/\">node.js<\/a> on the server. It will access the data store by calling the appropriate Python REST APIs.<\/p>\n<p>In this scenario, the legacy Python code will migrate to being a REST API that manages storage, transactions, workflow, permissions and the like. All the front-facing user interface work will be done in React and be independent from each other as much as possible.<\/p>\n<p>It\u2019s not quite micro services, but the breaking of a larger site into smaller independent pieces. The first part of this is happening with the \u201cdiscovery pane\u201d (accessible at about:addons). This is our first project using this infrastructure, which features a new streamlined way to install add-ons with a new technical architecture to serve it to users.<\/p>\n<p>As we roll out this new architecture we\u2019ll be doing more blog posts, so if you\u2019d like to get involved then join our <a href=\"https:\/\/lists.mozilla.org\/listinfo\/dev-addons\">mailing list<\/a> or check out our <a href=\"https:\/\/github.com\/mozilla\/addons-frontend\/\">repositories on Github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>addons.mozilla.org (AMO) has been around for more than 12 years, making it one of the oldest websites at Mozilla. It celebrated its 10th anniversary a couple of years ago, as &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/\">Read more<\/a><\/p>\n","protected":false},"author":271,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AMO technical architecture - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy McKay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/\",\"name\":\"AMO technical architecture - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png\",\"datePublished\":\"2016-05-12T20:52:27+00:00\",\"dateModified\":\"2016-06-24T21:24:55+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png\",\"width\":463,\"height\":270},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AMO technical architecture\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8\",\"name\":\"Andy McKay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g\",\"caption\":\"Andy McKay\"},\"description\":\"Andy is an Engineering Manager at Mozilla. As a Canadian he tweets and blogs about curling, skiing, politics, maple syrup, bears and all things from the great white north.\",\"sameAs\":[\"http:\/\/mckay.pub\",\"https:\/\/x.com\/andymckay\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/amckaymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AMO technical architecture - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/","twitter_misc":{"Written by":"Andy McKay","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/","url":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/","name":"AMO technical architecture - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png","datePublished":"2016-05-12T20:52:27+00:00","dateModified":"2016-06-24T21:24:55+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2016\/05\/image01.png","width":463,"height":270},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2016\/05\/12\/amo-technical-architecture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"AMO technical architecture"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8","name":"Andy McKay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g","caption":"Andy McKay"},"description":"Andy is an Engineering Manager at Mozilla. As a Canadian he tweets and blogs about curling, skiing, politics, maple syrup, bears and all things from the great white north.","sameAs":["http:\/\/mckay.pub","https:\/\/x.com\/andymckay"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/amckaymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7803"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=7803"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/7803\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=7803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=7803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=7803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}