Jakarta js meetup - Real time web apps with vue & firebase - may 17, 2017

Good Evening!

Introduction

Septian Adhi Tama

Self proclaimed ‘Tamvan’

Currently :

Instructor @Hacktiv8

Web Developer

Blogger (Hiatus due to endless maintenance of my blog)

Realtime Web Apps With Vue.js and Firebase

Let me ask you some questions?

A Progressive JavaScript Framework

https://vuejs.org

Vue.js FeaturesWhat’s inside?

● Directive

● Two-way data binding

● Reactive and Composable

Components

● Small size and fast loading

● Single File Component

● A lot of companion library are

provided by the community

Vue.js Pros What makes it good?

Pros :

● Small and Fast

● Easy to understand

● Simplicity

● Flexibility

● Very Good Documentation

Single File Components

Three Parts :

template : contains the markup or

the stucture of the component.

Can be written in html or

templating engine such as pug

or handlebars.

script : contains logic, and state for

the components

style : components styling, can be

written in css, or css

preprocessor such as stylus,

sass, or less

https://vuejs.org/v2/guide/single-file-components.html

Vue.js ConsThere’s Nothing Perfect

Cons :

● Just getting popular recently

● Language Barrier (Most user

are not english speaking

developer)

● Being too flexible can be too

problematic

Tools from Google helps you build better mobile apps and grow your

business.

https://firebase.com

Firebase Features

What’s Inside?

Realtime database

Authentication

Cloud storage

Hosting

Analytics

etc.

Firebase Pros What makes it good?

Pros :

● It’s realtime

● Easy integration with iOS,

Android, and Web

● Minimal Setup

● Easy access to data

● Serverless

● Secure

● It’s Google bruh!

● etc.

Firebase ConsThere’s Nothing Perfect

Cons :

● Not wide battle tested?

● Limited querying and indexing

● Can’t query list of users and

stored files

Vue.js + Firebase = VueFireVue.js binding for FireBase

https://github.com/vuejs/vuefire

Usage / Implementation

Easy Instalation

App Initialization & Binding data to

state

Accessing Data

Add New Data

Update & Remove

Deployment

Install firebase tools

Init firebase project

Set up configuration in firebase.json file

Simply deploy it!

Demohttps://kamvan-6aa69.firebaseapp.com/#/

Any Questions?

Thank You & See ya!

Github : @tamatamvan

Facebook :

● https://facebook.com/s.ai.tam

a.adhi

Email :

[email protected]

[email protected]