Nusendra Hanggarawan

BUILD STATIC SITE

USING VUEJS

SurabayaJS

Advert keynote presentation - 2015

Static site

​

wtf is that?

SurabayaJS

Advert keynote presentation - 2015

“ a static website contains web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor “

SurabayaJS

Advert keynote presentation - 2015

Dynamic Website Pros & Cons

Kelebihan dan kekurangan dari website dinamis

CONS

setting up, maintaining, and scaling a database is costly

much more steps involved to setup and deploy vs a static site

PROS

Dynamic Content

dynamic content generated for each user

easy to update with a CMS like Wordpress

more powerful with features like login, payments, etc.

Complex & Expensive

SurabayaJS

Advert keynote presentation - 2015

5

Static Website Pros & Cons

Kelebihan dan kekurangan dari website statis

CONS

requires a developer to update content, not a nice CMS as provided by WordPress and others

PROS

Fast & Cheap

no lengthy load times when displaying the page

often cheaper to host static files on Netlify, S3, etc than a hosted environment

simpler for a developer to setup

Updating the contents

easy to integrate forms, payments, login via API calls

SurabayaJS

Advert keynote presentation - 2015

6

TOSS UPS

Tergantung dari bagaimana apps dibangun

static sites are generally faster however proper caching on a dynamic site as well as the use of CDNs can have a major impact on speed

PAGE LOADING

a static site has no database of its own however if forms, payments, or logins are involved then 3rd party API calls must be used which have risk

SECURITY

SurabayaJS

Advert keynote presentation - 2015

Karena konten pada blog / dokumentasi relatif tetap, maka halaman yang disajikan pun tidak perlu dinamis

Marketplace

News

Blog & Documentation

Company Profile

Produk pada marketplace selalu berubah - ubah. Perubahan yang terjadi juga relatif cepat, serta menyimpan data konsumen.

Portal berita / web berita juga memiliki konten yang sangat cepat berubah.

Karena website seperti company profile juga relatif tetap / statis, sehingga konten yang disajikan lebih baik statis.

Tidak semua nya harus memakai static site atau dynamic site, setiap kondisi memerlukan solusi yang berbeda - beda, maka jalan terbaik adalah manfaatkan / pakailah stack teknologi yang sesuai dengan spesialisasi nya masing - masing.

Every stack has their own market

Suitable for ?

Static

Dynamic

Advert keynote presentation - 2015

8

Vuejs Static Site Generator

Macam - macam generator pada vuejs

VuePress

Vuepress merupakan generator official yang diluncurkan oleh core tim vuejs itu sendiri.

​

Cocok untuk Dokumentasi

Gridsome

Static site generator yang masih baru, berfungsi untuk men-generate vuejs dan markdown menjadi html statis

​

Cocok untuk Blog, Company Profile, dan Dokumentasi

Vue.js

Menggunakan vuejs murni sebagai static website generator.

​

Cocok untuk Administration Panel

Nuxt.js

Vuejs framework yang universal, bisa dipakai disegala lini.

​

Cocok untuk Blog, News, Marketplace, dll.

SurabayaJS

Advert keynote presentation - 2015

LET’S MOVE TO GRIDSOME WITH INCREDIBLE IDEA

Advert keynote presentation - 2015

10

Gridsome, The Modern Site Generator

Vuejs framework untuk static site generator

MODERN PWA

DOCUMENTATION

Sudah mendukung PWA by default

FAST

HEADLESS CMS

MARKDOWN FILES

SEO FRIENDLY

Juga cocok untuk membuat dokumentasi

Menggunakan markdown untuk membuat / menulis konten

Website yang dihasilkan relatif cepat, karena hanya html statis saja.

Konten yang dihasilkan bisa didapat dari headless CMS lain seperti Storyblok maupun Wordpress

Karena konten yang disajikan sudah berbentuk HTML pre-rendered, maka Google bisa crawl web dengan mudah

SERVERLESS

Tidak membutuhkan backend / server untuk menyajikan data.

JAMSTACK

Modern web yang sedang hits saat ini adalah JAMStack, Javascript, Api dan Markup.

SurabayaJS

Advert keynote presentation - 2015

Interactive Design, Digital Branding & Mobile Apps

Based in New York City & St. Petersburg

hello@yourmail.com

+6017 987 9904

ADDRESS

PHONE & EMAIL

SurabayaJS

• Local development with hot-reloading (real time code changes)
• Data source plugins (Connect to any headless cms, api, markdown)
• FIle-based page routing (routes with files)
• Centralized data management (pull data into local, unified GraphQL data layer)
• Vue.js for frontend
• Auto-optimized code (code splitting)
• Static files generation (static generator)

Advert keynote presentation - 2015

12

Prerequisites

Sebelum memulai development dengan Gridsome

SurabayaJS

• HTML
• CSS
• Vue.js
• Terminal
• GraphQL (optional)
• Nodejs v8.3+
• Yarn (optional)

Advert keynote presentation - 2015

13

How it works ?

SurabayaJS

Advert keynote presentation - 2015

14

Install Gridsome CLI tool

SurabayaJS

Advert keynote presentation - 2015

15

Create a Gridsome Project

SurabayaJS

Advert keynote presentation - 2015

16

Run the app

SurabayaJS

Advert keynote presentation - 2015

17

Package.json

SurabayaJS

Advert keynote presentation - 2015

18

Gridsome Config

SurabayaJS

Advert keynote presentation - 2015

Interactive Design, Digital Branding & Mobile Apps

Based in New York City & St. Petersburg

hello@yourmail.com

+6017 987 9904

ADDRESS

PHONE & EMAIL

THANK YOU

SurabayaJS

Advert keynote presentation - 2015