{"id":6214,"date":"2019-08-05T07:13:33","date_gmt":"2019-08-05T07:13:33","guid":{"rendered":"https:\/\/gtechbooster.com\/?p=6214"},"modified":"2023-06-21T11:42:56","modified_gmt":"2023-06-21T11:42:56","slug":"mozilla-developer-network-goes-react","status":"publish","type":"post","link":"https:\/\/gtechbooster.com\/mozilla-developer-network-goes-react\/","title":{"rendered":"Mozilla Developer Network goes React"},"content":{"rendered":"\n<p>Mozilla Developer Network, generally referred to as MDN, has been \nrewritten using React. MDN is Mozilla&#8217;s multilingual resource for web \ndocumentation.<\/p>\n\n\n\n<div class=\"gtech-migrated-from-ad-inserter-placement-2\" style=\"text-align: center;\" id=\"gtech-1056038417\"><div style=\"margin-right: auto;margin-left: auto;text-align: center;\" id=\"gtech-2959789472\"><a data-bid=\"1\" data-no-instant=\"1\" href=\"https:\/\/gtechbooster.com\/linkout\/17207\" rel=\"noopener\" class=\"notrack\" aria-label=\"26001\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg\" alt=\"\"  srcset=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg 1024w, https:\/\/gtechbooster.com\/media\/2023\/01\/26001-768x960.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" width=\"500\" height=\"625\"  style=\"display: inline-block;\" \/><\/a><\/div><\/div><p>&nbsp;It started life as the Netscape DevEdge documentation, was renamed  and reworked as MDC (Mozilla Developer Center), then became Mozilla  Developer Network (MDN) in 2010.<\/p>\n\n\n\n<p>Describing the redesign, Mozilla Senior Product Manager Kadir Topal \nsaid that it had been carried out in recognition that developers aren&#8217;t \nall the same and Mozilla wants MDN to adjust to its users.&nbsp;<\/p>\n\n\n\n<p>Over the last few months the team at Mozilla has been implementing a \nnew MDN front end to offer people a customized MDN experience while \nstill providing a fast page load time, whether people are logged in or \nnot. This is something the team says the previous implementation wasn\u2019t \nable to support. In addition it had dependencies on some rather old \njQuery and jQuery UI versions.<\/p>\n\n\n\n<p>To revamp MDN, Mozilla decided to use React. React is Facebook\u2019s open\n source JavaScript library, which lets you describe what you want to \nrender in a declarative way using shared components and elements.<\/p>\n\n\n\n<p>MDN supports two modes: editing and viewing. Almost all users of MDN \nuse the viewing mode, with only a small fraction using the editing mode.\n The new beta version of MDN uses different domains for the two types of\n use, and because more people use the vieiwng mode, that&#8217;s where most of\n the work has been carried out. People can use the viewing mode to test \nit, after which it will be decommissioned and everyone will use the new \nfront end. Those who edit documents will continue to be served by the \nold front end.<\/p>\n\n\n\n<p>The news of the move to React hasn&#8217;t met with universal approval, \nwith many developers commenting that given Mozilla&#8217;s role in promoting \nweb standards, the new version of the site should be created using \nstandard web components rather than a custom framework. However, David \nFlanagan, one of the team working on the project, pointed out the hard \nrealities &#8211; this is a very small team that doesn&#8217;t get a lot of \nvolunteer contributions, and that React is still an open-source tool for\n producing websites that are built from the web standards of HTML, CSS \nand JavaScript:<\/p>\n\n\n\n<p>Flanagan hopes that using React for the front end code may lower the \nbarrier to entry for this project and increase the team&#8217;s ability to \nattract volunteers.<\/p>\n\n\n\n<p>He concluded:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;I recognize that many of you are  very passionate about web standards and about MDN, and I&#8217;m honored to be  part of a project that inspires such passion. But your passion is not  the same as working daily on a project (and having your annual review  tied to the success or failure of the project!)&#8221;<\/p><cite> David  Flanagan <\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">More Information<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/beta.developer.mozilla.org\/en-US\/\">MDN Beta<\/a><\/li><\/ul>\n<div class=\"gtech-end-cont\" id=\"gtech-883814165\"><div style=\"margin-right: auto;margin-left: auto;text-align: center;\" id=\"gtech-2811373894\"><a data-bid=\"1\" data-no-instant=\"1\" href=\"https:\/\/gtechbooster.com\/linkout\/17207\" rel=\"noopener\" class=\"notrack\" aria-label=\"26001\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg\" alt=\"\"  srcset=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg 1024w, https:\/\/gtechbooster.com\/media\/2023\/01\/26001-768x960.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" width=\"500\" height=\"625\"  style=\"display: inline-block;\" \/><\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Mozilla Developer Network, generally referred to as MDN, has been rewritten using React. MDN is Mozilla&#8217;s multilingual resource for web documentation. &nbsp;It started life as the Netscape DevEdge documentation, was renamed and reworked as MDC (Mozilla Developer Center), then became Mozilla Developer Network (MDN) in 2010. Describing the redesign, Mozilla Senior Product Manager Kadir Topal [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":6215,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1915],"tags":[250,569,6],"class_list":["post-6214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ndocs","tag-developers","tag-mozilla","tag-programming"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts\/6214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/comments?post=6214"}],"version-history":[{"count":0,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts\/6214\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/media\/6215"}],"wp:attachment":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/media?parent=6214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/categories?post=6214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/tags?post=6214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}