以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計

講者：吳哲宇

簡述：網頁視覺設計與程式開發時，因應不同互動需求，需在各個框架間整合與架構，以資料驅動內容與動態。 在本次分享中，將會討論開發上遇到的案例，從視覺設計到網頁開發，整合 Vue-cli / GSAP / D3 等框架，和以Vuex 為使用者輸入狀態中樞，調控多頁面網頁動態的方式。

內容

jQuery

更動會直接更動DOM，會無法判斷是否已經更動了

DOM-Data Layer-Click

Map Layer => 負責轉換

所有函數計算結果不影響本來的資料

更新Data的動作

Abstract concept- component fro animation

Problem too much state/behavior

需要一個同一的東西去管理他

家庭電器用電家計簿

Spoiler alert

  • 重點不是BOT，是Client

  • 重要的不是AI, NLP, 記得留個位置給他們˙ :)

  • F2e Engineer's Perspective

What is client

client 是一種簡稱，試運行在 pc/ mobile 上的 app

Essense of client application

f :: (userEvents) => state

兩個client

  • Web

  • Chatbot

Does this really matter?

  • Optimistic

  • Realistic

Optimistic

  • e.g. React, Angular, Vue...

    • 越來越多的框架，主要處理 rendering

  • GraphQL

    • API 介接
    • Facebook opensource
    • 可以用它來拿資料，但是它不是用來取代sql的

直接讓client下query給SERVER 或許有許多資安議題，網路上有社群都在討論這個議題

Example 1

{
 id,
 name, 
 age
}

{
 id: "uuid-1234"
 name: "denny"
 age: "25"
}

{
    user(id:xxx) {
        id: "uuid-1234"
        name: "denny"
        age: "25"
    }
}

我可以在同一個 request 拿到所有的資料

解決的問題

> UI 變動的速度 > API 變動的速度

通常是這樣啦..

> 新的工具的誕生 -> 工作機會

Reality

夢想就是遇到現實世界，第一個放棄的東西

[台灣技術交流見聞與感想](https://mp.weixin.qq.com/s/GSBQA8To7u64OfaY6yGqZQ\)

f::(userEvents) -> state

State

不管用什麼框架，你的client 都會給 user 一個 feedback

這有什麼難的？

  1. 錯誤處理
  2. 空狀態
  3. loading
  4. 完成
  5. 分類
  6. 排序

Example

所以同時還要顧慮到

  • 維護性

  • 可擴充性

  • 需要管理機制

這樣的架構流程都是逆時鐘的，所以比較可控

目前只處理

  • 一次只處理一件事情

  • 資料流向單一

Chatbot

client side application

兩句話可以講完

不是一個無狀態訊息來回

而是一個「有狀態」的互動過程

重點是在哪些地方要去處理這些地方

四個一定要考慮到的問題

  1. State v.s Data

  2. 點到之前的訊息會發生什麼事情

  3. 不同的 provider，API 會完全不一樣

  4. AI/NLP

    * 有無地方跟 NLP 組合

    * 有無地方收集資料

Seperate state form data

  1. Data vs state
  2. 點到之前的訊息

Why so serious?

use case

  • 服務的延伸

  • 試水溫的新東西

  • 其他專門bot的服務

為什麼chatbot會失敗

  1. AI is still not that accessible

  2. Use cases are not that strong

  3. some bots lack transparency

Chatbot 已死？

只剩下use case明確、原服務的延伸或背後有強大金援

chatbot 萬歲

操作是讓非主流出線亦是工具

Hype is an instrument that brings obscurity into mainstream.

results matching ""

    No results matching ""