From 46b8a28c5985c5503fee8bc32755bf91a36e82cd Mon Sep 17 00:00:00 2001 From: ray Date: Sun, 9 Feb 2020 15:57:38 +0000 Subject: [PATCH] second draft --- content/posts/flowmm.md | 182 +++++++++++++--------------------------- 1 file changed, 56 insertions(+), 126 deletions(-) diff --git a/content/posts/flowmm.md b/content/posts/flowmm.md index dc305cb..6e2b2bf 100644 --- a/content/posts/flowmm.md +++ b/content/posts/flowmm.md @@ -7,159 +7,89 @@ featured_image: "/images/flowmm/flowmm-home.jpg" draft: true --- -**Flow Model Management** are a fictitious modelling agency. They were created -as an ... . +**Flow Model Management** are a fictitious modelling agency. +They were created solely for the purpose of giving me an excuse to create their [website](https://flowmm.rayelliott.dev). -Despite being imaginary, the owners of Flow Model Management felt that it was -about time their business should have an internet presence. During discussions -it became apparent that the primary purpose of proposed -[website](https://flowmm.rayelliott.dev) would be to allow potential members to -be able to easily apply online and facilitate the business goal of attracting -new members. +However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence. + +And so, discussions with the stakeholders began. + +It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join. +Essential to this, would be to provide a simple process for users to submit an application. ## The Front End -For this project I wanted to build a Single Page Application using Nuxt.js which -is an open source framework based on Vue.js. +For this project I wanted to build a **Single Page Application** using [Nuxt.js](https://nuxtjs.org/), which is an open source framework based on [Vue.js](https://vuejs.org/). -One advantage of an SPA is speed. SPAs are fast. Once the initial page is loaded -it is only the data required to update particular components that need to be -transmitted to the client. As this site will be mainly composed of dynamic data, -with little in the way of static content, fetching requested data directly from -the backend servers to update the appropriate components will increase speed. -Rather than requesting entire pages from a web server, which itself needs to -communicate with other back end servers before transmitting an entire page of -data, a simple API request can quickly update a page. +One advantage of an SPA is speed. +SPAs are fast. +Instead of reloading an entire page, when maybe only one small component of the page needs updating, a client may request only the much smaller data needed to update that component. -This process of updating a web page through Ajax calls, also has the benefit of -an improved user experience. Navigation and updates to the state of the site -appear to be almost instant, similar to a native application, rather than more -lengthy page reloads. +So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced. -Vue.js is a modern JavaScript framework for creating web interfaces. It makes -use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA. +This also has the benefit of an improved user experience. +Navigation and updates to the state of the site appear to be almost instant, similar to a native application, rather than lengthy page reloads typically associated with websites. -One disadvantage of Vue, and other SPA frameworks is in regard to their -suitability for sites that require good Search Engine Optimisation. SPAs can -require a relatively long initial page load, and aren't as efficiently crawled -by search engine crawlers due to the heavy use of JavaScript. A solution to -this is to render the HTML of the site on the server, which can then be -delivered to the client much faster, with further requests to update the site by -the client being handled by Ajax calls (????? ensure this is correct ?????). -This can be taken further, if desired, so that all pages can be rendered on the -server to create, in effect, a static site. This eliminates the SEO issues that -may affect an SPA. +**Vue.js** is a modern JavaScript framework for creating web interfaces. It makes use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA. -Server Side Rendered applications can require a lot of setting up and there are -a number of pitfalls and ... that need to be taken care of and kept in mind. -For example, as there are no requests for new pages, then the browser history -needs to be managed. although browsers are better at sticking to common -standards than in the past, there are still a number of differences between the -many devices and browsers that this is not always straightforward. The threat of -security vulnerabilities and exploits also need to be kept in mind. This is -where a framework such as Nuxt can become valuable. A lot of the tedious -scaffolding is already taken care of and being a fully tested, mature framework, -we can be confident that many common, and not so common, issues have already been -solved. +However, Vue along with other SPA frameworks do have some disadvantages. -A further benefit to using Nuxt, is the client application can be easily -extended to other functionality. It may be decided in future that the features -commonly found in Progressive Web Applications are desired, in which case these -can be more easily added due to already being supported by Nuxt. +The main disadvantage is regarding **Search Engine Optimisation**. +SPAs can require a relatively long initial page load, and aren't as efficiently crawled by search engine crawlers due to the heavy use of JavaScript. -So, above, are the reasons I would use to justify using Nuxt.js to build an SPA -for this project. However, a very large factor, to be entirely honest, was -that I had been gaining experience in using Vue.js and wanted an opportunity to -use Nuxt.js to create an SPA with server side rendering. SPAs are an important -component of the modern web and this project was useful in gaining further -experience and understanding of the technology and techniques involved. +This means sites requiring SEO, need to take steps to mitigate these issues. +One solution is to render the HTML on the server, rather than the client. +The HTML can be quickly displayed by the client browser, reducing the initial page load, with updates to the site being handled by Ajax calls, as with a conventional SPA. -## The Back End +This may be taken even further, if desired, so that *all* pages are rendered on the server. In effect, creating a static site. +This will then bring all the benefits of a fast, easily indexable static site. -For the backend I decided to use October, a Content Management System, based -on the Laravel framework, which itself is a popular, open source PHP based -framework. +These, **Server Side Rendered** applications can require a lot of setting up +There are also a number of pitfalls and considerations that need to be kept in mind. -The main requirements of a backend for this type of project involve user -creation and management and the ability for those users to upload and manage -content in the form of profile information and images. A perfect fit for a -Content Management System. +For example, as there are no requests for new pages, the browser history needs to be managed. +There are many threats of security vulnerabilities and exploits. +Although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use. -It would be possible to create a fully bespoke CMS to handle these requirements. -However, this would involve a considerable amount of work and a lot of -considerations, such as security best practices, browser compatibility, testing -of code, etc. +This is where a framework such as **Nuxt.js** comes in. +A lot of the tedious scaffolding is taken care of and being a fully tested, mature framework, we can be confident that many common, and not so common, issues have already been solved and tested for. -Fortunately, there are already a number of libraries and frameworks available, -that have already solved these issues, been tried and tested with real world use -by many users, and are in active development. Using one of these shortens -development time considerably, whilst also ... safe and secure. - -So for a CMS, in which there are no particularly special requirements, it makes -perfect sense to build upon an existing platform that has already solved the -challenges involved in creating a CMS and been fully tried and tested. - -October, based on Laravel, is an ideal candidate. - -Performant - isn't bloated with unneeded functionality. It instead provides a -base in which features and functionality may be added if required. This makes it -faster than some alternatives, such as WordPress for example, which can suffer -from having a large amount of features included as a base. Also has useful -default features such as minification of CSS and JavaScript. The templating -engine (TWIG) generates static HTML. - -Developer oriented - is targeted towards developers. High quality documentation -and a clean and modern codebase makes it easy to extend and add functionality. -Plugins are entirely separate - have own database and namespaces preventing -conflicts between them. The templating system and text file based website -structure allows for separation of data and presentation and gives easy version -control management. - -There is a large developer community. This means a large number of plugins and -themes provided by the community. Not as many as WordPress but many of the -WordPress plugins can be considered to be poor quality, particularly among the -free ones. It can also be difficult to extend WordPress plugins. - -Secure when compared to alternatives like WordPress. Only one file that can be -accessed - `index.php`. There is a more rigorous approval process for plugins and -themes. - -Administrative interface customisation. This is very useful for a site that will -involve a lot of users with the ability to manage their accounts. - -These reasons are why I consider a platform like October to be better for -building a backend CMS than, for example WordPress - it is easier to customise -and add the required functionality without the inherent bloat. - -Having said that, it may sound like WordPress just isn't very good when compared -to something like October. This, however, just isn't true. WordPress is very -good at what it actually is - a platform that allows users, who may have limited technical -ability, to publish a website. For this it is very successful, after all it -powers XX% of the world's websites. However, it is also a victim of its own -success. It is a very high profile target with a lot of effort expended in -finding exploits and vulnerabilities. That, combined with its start as solely a -blogging platform, with CMS features bolted on over time, can make leaner, more -focused alternatives more appealing to developers. +A further benefit to using Nuxt.js, is the client application can be easily extended. +For example, it may be decided in future that the features commonly found in **Progressive Web Applications** are desired, in which case these can be more easily added due to already being supported by Nuxt. +So, above, are the reasons I would use to justify using Nuxt.js to build an SPA for this project. +However, a very large factor, to be entirely honest, was that I had been gaining experience in using Vue.js and wanted an opportunity to use Nuxt.js to create an SPA with server side rendering. +With SPAs being an important component of the modern web I wanted this project to further my experience and understanding of the technology and techniques involved. ## The Design The design brief from the non-existent owners of Flow Model Management was quite -simple. A visually appealing site, with some background information and an easy +simple. A visually appealing, elegant site, with some background information and an easy to use method for applicants to sign up with. -black and white - classy and has a good contrast with the orange brand colour. -newest members - encourage users to sign up +A monochromatic colour scheme was chosen. I felt that a primarily black and +white colour scheme that uses the brand colour of orange would give a classy and +elegant feel to the site. -social links - important, in header, contact form and bottom of home page. +**Montserrat** and **Lato** were the fonts chosen for the headings and body text respectively. +These are both clean, easily readable fonts. +Montserrat was chosen for its classy and elegant qualities. +It is formal, but not too formal, reminding me of the classy, stylish fashions of the early 20th century, and yet still appearing modern. +Lato, which goes well with Montserrat, is also modern and elegant, much like Montserrat, and keeps with the formal but not overly so, feel of the site. -extended future version: +As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. +By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look. -stuff learned during project +## The Deployment -stuff I would do different if starting again. +The project is hosted on a **Virtual Private Server**, using [Dokku](http://dokku.viewdocs.io/dokku/). -* the hero - definitely would use SVG clip paths instead. -* login form - have on own page, not just a modal. +**Dokku** is a [Docker](https://www.docker.com/) based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon. + +Using Docker during development has many advantages. +The main one being that it encapsulates the application within a consistent environment. +This allows for the development environment to exactly match the environment it is deployed to, ensuring there will be no compatibility issues after deployment. + +Combining Docker with Dokku also allows for simple deployment, which can be done with just a [Git](https://git-scm.com/) push.