99 lines
5.9 KiB
Markdown
99 lines
5.9 KiB
Markdown
---
|
|
title: "Flow Model Management"
|
|
date: 2020-02-08T12:27:18Z
|
|
categories: ["Portfolio"]
|
|
tags: ["Vue", "Nuxt"]
|
|
featured_image: "/images/flowmm/flowmm-home.jpg"
|
|
draft: true
|
|
---
|
|
|
|
**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).
|
|
|
|
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](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.
|
|
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.
|
|
|
|
So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.
|
|
|
|
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 more lengthy page reloads typically associated with websites.
|
|
|
|
**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.
|
|
|
|
However, Vue along with other SPA frameworks do have some disadvantages.
|
|
|
|
A major 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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
To name a few:
|
|
|
|
* there are no requests for new pages and so 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.
|
|
|
|
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.
|
|
|
|
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, elegant site, with some background information and an easy
|
|
to use method for applicants to sign up with.
|
|
|
|
A monochromatic colour scheme was chosen. I felt that a primarily black and
|
|
white colour scheme that uses the brand colour of orange as an accent would give a classy and
|
|
elegant feel to the site.
|
|
|
|
**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.
|
|
|
|
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.
|
|
|
|
## The Deployment
|
|
|
|
The project is hosted on a **Virtual Private Server**, using [Dokku](http://dokku.viewdocs.io/dokku/).
|
|
|
|
**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.
|
|
When using Docker, the application is encapsulated within a consistent environment.
|
|
This brings many advantages.
|
|
One such advantage being the development environment can exactly match the deployed environment, 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.
|