146 lines
6.9 KiB
Markdown
146 lines
6.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"
|
|
series: ["Portfolio"]
|
|
draft: false
|
|
---
|
|
|
|
**Flow Model Management** is a fictitious modelling agency.
|
|
They were created solely for the purpose of giving me a reason 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
|
|
|
|
{{<
|
|
figure
|
|
src="/images/logos/nuxtjs-icon.svg"
|
|
alt="The Nuxt icon."
|
|
class="icon-inline sm-order-rev svg"
|
|
caption="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."
|
|
>}}
|
|
|
|
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.
|
|
|
|
{{<
|
|
figure
|
|
src="/images/logos/vue.svg"
|
|
alt="The Vue logo."
|
|
class="icon-inline icon-right svg"
|
|
caption="**[Vue.js](https://vuejs.org/)** 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.
|
|
|
|
{{<
|
|
figure
|
|
src="/images/logos/nuxtjs-logo.svg"
|
|
alt="The Nuxt logo."
|
|
class="nuxt logo svg"
|
|
caption=""
|
|
>}}
|
|
|
|
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.
|
|
|
|
{{<
|
|
figure
|
|
src="/images/flowmm/flowmm-model-1.jpg"
|
|
alt="A black and white shot of a stylish male model."
|
|
class="icon-inline icon-right flowmm-model-thumb"
|
|
caption="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.
|
|
|
|
{{<
|
|
figure
|
|
src="/images/logos/docker-horizontal-monochromatic.png"
|
|
alt="The Docker logo."
|
|
class="logo"
|
|
>}}
|
|
|
|
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.
|
|
|
|
{{<
|
|
figure
|
|
src="/images/logos/git-orange.png"
|
|
alt="The Git logo."
|
|
class="git logo"
|
|
>}}
|
|
|
|
Combining Docker with Dokku also allows for simple deployment, which can be done with just a [Git](https://git-scm.com/) push.
|
|
|
|
|
|
|
|
|