Frontend Development & VueJS

class: center, middle

# Frontend Development & VueJS
Sandoche Adittane <br><br> https://www.sandoche.com

---

# SPA vs MPA

- Single Page Application

- Multiple Page Application

---

## Single Page Application

### Pros
- Once loaded it is faster

- Backend re-usable for a mobile app

- A lot of modern dev tools

### Cons
- Need a Frontend team and a backend team

- Slower first loading time

- Cannot work without javascript

- New frameworks

- Hype driven development

---

## Multiple Page Application

### Pros
- Better for SEO

- Easier to develop

- Pages can be light

- You can build a full website that works in every device without javascript

### Cons
- Frontend and backend development are combined very closely

- If you need a mobile app you need a separate backend

---

## Universal / Isomorphic

- A good compromise for SEO

---

## Progressive Enhancement

### The M&M's model

![M&M's](m-m.jpg "M&M's")

---

## How to choose ?

- Are you going to build a mobile app ?

- Do you have the budget for a frontend and backend team ?

- Who are your users ?

- What is the speed connexion of your users ?

- When do you need to deploy ?

- What are the skills of your team ?

- Is it a proof of concept ?

- Do you already have an API ?

---

## The importance of VanillaJS

Every frontend developer need to master Javascript (VanillaJS) before going for a frontend framework (and of course HTML, CSS)

---

## Frontend Frameworks

![Frontend Frameworks](fe.png "Frontend Frameworks")

---

## Frontend Frameworks

### The main ones

- Angular

- React

- VueJS

### Make your own

- VanillaJS

- npm

### How it feels to learn JavaScript in 2016
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

---

## The architecture

- Components

- Router

- Store (for the state)

- Utils & Services

---

## Vuex

![Vuex](state.png "Vuex")

---

## Getting Started with VueJS

### Let's make a todo app
1. Design the UI

2. Define components

3. Define the state

4. Define the actions

5. Define the mutations

6. Write the code !

---

## The VueJS ecosystem

- Vue

- Vue Router

- Vuex

- Vue SSR (using Nuxt)

- Vue Devtools

- Vue CLI

- UI Frameworks

- NativeScript Vue

---

## The JAM Stack

Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.

- Netlify

- Firebase / AWS Lambda functions

- Nuxt

---

## The developer roadmap

- https://github.com/kamranahmedse/developer-roadmap

---

class: center, middle

# Thanks