webpackJsonp([3],{"+cw4":function(e,t,n){(e.exports=n("FZ+f")(!1)).push([e.i,"",""])},"/sBp":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n("AYoX"),o=n("5b3c"),a=!1;var r=function(e){a||n("GO3Q")},s=n("VU/8")(i.a,o.a,!1,r,null,null);s.options.__file="pages\\laboratory\\nuxt-aws-serverless.vue",t.default=s.exports},"5b3c":function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",[n("h1",[e._v("Nuxt.js and AWS Serverless Case Study")]),n("aside",[e._v("April 23rd, 2018 - Robert Taylor")]),e._m(0),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),n("section",[n("h2",[e._v("Procedure")]),n("p",[e._v("The following list of tools were used to create this application.")]),n("ul",e._l(e.toolsUsed,function(t){return n("li",{key:t},[e._v(e._s(t))])})),n("p",[e._v("Given I have all of the accounts set, I needed to instantiate a couple things. First AWS needed to be configured")]),n("code",[e._v("aws config")]),n("p",[e._v("Once AWS was configured, I set up the folder structure for the project. I didn't want to create multiple projects for this\nexperiment, but it very well could be separate Git projects, as each of the modules are very loosely coupled.")]),e._m(6)]),e._m(7)])};i._withStripped=!0;var o={render:i,staticRenderFns:[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",[n("h2",[e._v("The Problem")]),n("p",[e._v("Here are the requirements")]),n("ul",[n("li",[e._v("Will have a complex front-end, that will be making AJAX calls to an API")]),n("li",[e._v("Must be highly-available")]),n("li",[e._v("Front-end needs to use a Content Distribution Network for performance")]),n("li",[e._v("Should perform well, and be usable on browsers IE10+, Chrome, Firefox, and mobile browsers")]),n("li",[e._v("Front-end will grow in complexity")]),n("li",[e._v("There will be a development team, that can make regular changes to the application")]),n("li",[e._v("Front-end functionality should be thoroughly tested")]),n("li",[e._v("Should be hosted on Amazon Web Service")]),n("li",[e._v("This application will have continued development over a long period of time")]),n("li",[e._v("There will be several developers working on this problem")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("section",[t("h2",[this._v("Recommended Approach")]),t("p",[this._v("Here is a list of a variety of approaches that we tested, and found that the best approach would be to use the\nNuxt.js + AWS Cloudfront approach to develop a complex front-end.\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",[n("h2",[e._v("Experiment Setup")]),n("p",[e._v("The goal of this experiment, is to see the efficacy of how various techniques, can solve this particular\nproblem. I will need to be able to test the various techniques, design patterns, etc. under consistent\nparameters.\n")]),n("section",[n("h3",[e._v("Initial Setup of Project, From Scratch")])]),n("section",[n("h3",[e._v("Initial Setup of Project, if a Standard One Exists")])]),n("section",[n("h3",[e._v("Making a Small Visual Change")])]),n("section",[n("h3",[e._v("Deploying a Small Visual Change")])]),n("section",[n("h3",[e._v("Making a New Page With Pieces That Already Exists")])]),n("section",[n("h3",[e._v("Making a New Page With Completely New Components")])]),n("section",[n("h3",[e._v("Two Developers Separately Making a Change to a Page")])]),n("section",[n("h3",[e._v("Two Developers Separately Making a Change to a Component")])]),n("section",[n("h3",[e._v("Incorporating Another Project's Component, Which has HTML, JS + CSS Snippet")])]),n("section",[n("h3",[e._v("Size of Files Generated")])]),n("section",[n("h3",[e._v("Client Side Performance of Adding New Pieces of Data to HTML Page")])]),n("section",[n("h3",[e._v("Ability to Bind to Real-Time Data")])]),n("section",[n("h3",[e._v("Ability to Bind to Back-End Data via Asynchronous Calls")])]),n("section",[n("h3",[e._v("Client Side Performance for Initial Page Load Time")])]),n("section",[n("h3",[e._v("Riskiness for a Content Editor to Modify Content on Code Base")])]),n("section",[n("h3",[e._v("Support for i18n")])]),n("section",[n("h3",[e._v("Support for Authentication and Authorization")])])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",[n("h2",[e._v("How to Develop For It")]),n("p",[e._v("Given this approach, here is how the following regular parts of the SDLC would look like")]),n("ol",[n("li",[e._v("Initial Project Setup")]),n("li",[e._v("Making a Change and Committing")]),n("li",[e._v("Automated Testing")]),n("li",[e._v("Reviewing and Componentizing")]),n("li",[e._v("Integrating with Back-End")]),n("li",[e._v("Adding Utility Methods")]),n("li",[e._v("Bringin in Front-End Libraries from Other Projects")]),n("li",[e._v("Deploying the Changes to Staging Environment")]),n("li",[e._v("Deploying the Changes to Production Environment")]),n("li",[e._v("Leveraging Environment Specific Configurations")]),n("li",[e._v("Versioning")]),n("li",[e._v("Rollback of Versioned Deployments")]),n("li",[e._v("Integration Into a CI/CD System")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("section",[t("h2",[this._v("Goal")]),t("p",[this._v("To try to create a Serverless application, that can handle User Authentication, serve static content,\nand leverage back-end calls. For the front-end framework, this is primarily focused on Nuxt.js generating\nthe static content, and then being served on Cloudfront + S3.\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("section",[t("h2",[this._v("Assessment")]),t("section",[t("h3",[this._v("Strengths")]),t("p",[this._v("There are several positives with taking this approach. I found that the Nuxt.js development framework for\nthe front-end, along with it's opinionated inclusion of several libraries, made startup very fast and easy.\nSince I intended to make this a generated application, the command "),t("code",[this._v("npm run generate")]),this._v(" proved\nto be very helpful to create the static website. Once the website was created, integration to asynchronously\nquerying a back-end was a breeze, and updating the page with the new model's was amazing.")])]),t("section",[t("h3",[this._v("Weaknesses")])])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[e._v("doc")]),n("li",[n("span",[e._v("module")]),n("ul",[n("li",[n("span",[e._v("frontend")]),n("ul",[n("li",[e._v("infra")]),n("li",[e._v("src")])])]),n("li",[n("span",[e._v("backend")]),n("ul",[n("li",[e._v("infra")]),n("li",[e._v("src")]),n("li",[e._v("db")])])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("section",[t("h2",[this._v("When Should I Use This Approach?")])])}]};t.a=o},AYoX:function(e,t,n){"use strict";t.a={layout:"experiment",data:function(){return{toolsUsed:["Node 9+","Vue CLI","Vue CLI Init","AWS Account","AWS CLI","Terraform (0.11.l7)"]}}}},GO3Q:function(e,t,n){var i=n("+cw4");"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n("rjj0")("32248f62",i,!1,{sourceMap:!1})}});