Starting vue.js the right way - Ruben Tan

歡迎來到 JSDC 2018 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/c/JSDC2018
手機版請點選上方 按鈕展開議程列表。

另外點選筆記中的 符號就可以直接對那個段落補充或留下意見哦！

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
Select a repo