# Starting vue.js the right way - Ruben Tan

{%hackmd dh921X26R26y_elFAEP5yg %}

###### tags: `jsdc2018`

---

## Session Overview
* Vue.js overview
* Application overview
* sneaking vue.js in
* Doing it the right way

## Vue.js Overview
* A brief history of reactive forntend frameworks
* Angular vs. React vs. Vue
* Demonstration

## Beief history of reactive frontend frameowkrs
* Observer pattern in the origninal Gang of Four
* Excel is a good example
* And then we have Rx.JS

* reactive-ruben.js

## How do they work?

### Traditional way
在 textbox 的 chnage event 發生時，將值複製到其他地方
如果有很多這種情況，會無法 scalable，一個 textbox 更新，要找到很多其他的 element 去更新

> 資料與 HTML 元件高度耦合

### Reactive-Style
所有的 Element 去 listen textbox 的 value change

## Angular vs. React vs. Vue
### Angular
* 2010/10
* Opinionated
* Maintained by Google
* All-in-one
* Comprehensive tooling

### React
* 2013/05
* Modular
* Maintained by Facebook
* Licensing controversy
* Redux
* Focus on being performance

### Vue
* 2014/02
* Progressive
* Gentle learning curve
* Created by Evan

## Demonstration of vue.js

## Application overview
* An inherited mess
* One ring to rule them all
* Endless mistakes

### An inherited mess
* Frontend code
* Backend code
* API Server
* Database

> It gets worse in the frontend code. (jQuery Bootstrap ....)
>
> 40000 lines of code (css)
> 50 different files, all clones (template)

### Checklist of mistakes
* No test cases
* No build configuration or toolchain
* Multiple versions of the same library
* Every page is copy and pasted with minor modifications
* Multiple developers append to a file with their own code
* Not responsive, or tagged on at the last minute
* ==Client request for more interactive UI==

### Complex UI
> what is a complex UI
>

Pick a category -> pick a role -> pick a year

* Each select needs to fetch data from the server
* Each choice triggers a server loading on the next select
* Needs to be reused in multiple pages

## sneaking vue.js in

### Tackling first real client requirement

* Replaced old code with vue.js
* Clean separation of validation logic and UI interaction
* 700 lines of code to less than 30

### SOON....
> In **2 months**, all forms have been successfully converted to vue.js

Validation
Select Data Population

==**IT WAS PAINFUL**==
* Test Cases
* Added 30+ API endpoints
* Removed/deprecated 100000 lines of code

> 「並不是在寫新的 app，也不是 refactor，只是在 clean up 而已」

### Removing jquery
> 100% of jquery usage was to manipulate the DOM
* Update elements
* Update form data

jquery -> vue

## Turning the backend into an api server
> In **2 months**, from 1 API endpoint to 30+ endpoints

* Separation of concerns
* Ease of testing - mock data
> Change the backend to api driven backend
> Triggered the client to launch a mobile app

## Introducing vue components
* modal dialogs
* 10+
* select boxes with built-in search
* 50+
* counters
* 20+
* progress bars
* 10+

> Codebase further reduced by... 30~40%

## Future Plans
* Integrating vuex - state storage and management

---
## Doing Vue the right way
How our experiences demonstrated something important...

* Progressive Framework
* Evaluate before implement
* Have and end goal in mind

### Progressive Framework
> Vue.js can be used in many ways, simplest way is **unobtrusive**

* Start small, start simple

### Evaluate before implement
> Balance the cost of paradigm change vs. paying off tech debt

### Have and end goal in mind
> Have an idea what you are working towards
* Progressive webapp
* 100% api driven
* low onboarding cost

> Refactor and develop at the same time

* Be a good software ENGINEER