1 of 12

Building Scalable frontend Application

By Ajala Abdulsamii

2 of 12

Who am I?

Always found around my 127.0.0.1!

Cofounder & CTO @Fluidangle.com

Expert Mentor @Codementor.io

  • Javascript Developer
  • Community Vuevocate
  • Project Manager
  • @ajalaabdulsamii on twitter
  • @jalasem on Github, Medium, Instagram, facebook, ...elsewhere

3 of 12

Scalable Frontend App?

A lot of people will tell you frontend has little to do with scalability. This is almost correct, especially if you consider the fact that your static files will be rendered by a server and most operations will be done with the server.

In a scenario where your app is splitted and well structured, it does matters.

4 of 12

We shall be looking at a distinct approach that gives you (a frontend developer) the power to build a full blown app without necessarily having backend dev skills

5 of 12

JAM Stack

Javascript, API, Markup

“The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.”

  • Jamstack.org

6 of 12

Quick Question

What makes a scalable frontend web Application?

  • Application Structure
    • Components/Layout Structure
    • Styling/CSS Base
    • Design Patterns (Bootstrap, Material Design or a Custom Style Guide)
  • Architecture
    • Business Logic
    • API/Integrations
    • Data handling & Persistence
  • Security
  • Optimization

7 of 12

Let’s get our hands dirty

Let’s demonstrate these concepts with a blog

Yeah! A blog.

A lot of people visits blogs to read and absorb quality contents. It’s easy to build in an event like this and I’ll be able to buttress my points with it.

So let’s do this 💪

8 of 12

Codelab Setup

  • Make sure you have NodeJS installed
  • Open a terminal and run

  • npm install strapi@alpha -g
  • strapi new blog-server --quickstart

  • Open another terminal
  • npx create-nuxt-app lepsta-blog
  • cd lepsta-blog
  • npm i @nuxtjs/style-resources strapi-sdk-javascript sass-loader node-sass
  • npm run dev

We’re set 🔥🚀

9 of 12

After running those commands, your Strapi Server and Nuxt Frontend Should look like these

10 of 12

Please follow along 👨🏽‍💻

11 of 12

What have we learnt?

About Strapi

  • Easy to set-up
  • Little of no code
  • Graphql support

From our Blog App

  • Over to you...

12 of 12

Conclusion