GDG DevFest Taipei 2016

by Captain Vincent

本次為 Google 開發者社群推廣的一日活動, 完整議程參考 主辦單位提供。

議程筆記

Personal 會議整理

Material Design / 實感設計

@Takuo Suzuki / 鈴木拓生

傳統的應用程式在不同的 platform 通常都呈現了不同的 interface, 對一般的使用者在使用上的經驗無法連貫以及學習曲線上的困難, Google 於 2014 制定了 Material Design 規範了 UX 設計。

對於這些規範的內容可以從網路上獲得許多免費資源的介紹, 這邊有查到一個模組以 react 的 component 實踐 material design React Toolbox。

Hackpad

Introduction

  1. Tangible Surfaces

    • Depth focuses attention and provides structure.
    • Interaction cues

  2. Rich Imagery and Bold Colors

  3. Meaningful Motion

    • Materials transform

Don't

  • The Hamburger Diet: Not every app needs a left nav drawer
  • Don't force the FAB (Floating Action Button)
  • Everything doesn't need to be a card
  • Don't make the screen's lower right corner a FAB ghetto
  • Don't wait unitl the end to think about motion (plan beforhand)

Do

  • Design for device independence: Mobile + Web, Portrait + Landscape
  • When it comes to buttons, start flat and promote as needed

Web Frameworks

Tools

Downloads

What's Next?

Q&A

  • Why Button Navigation?
    • Easier to touch (than top)

React Native Performance Tuning

@Ray Shih

Dr. Stephen Strange: How do I get from here to there?

The Ancient One: How did you become a doctor?

Dr. Stephen Strange: Study and practice. Years of it.

講者開頭先介紹了對他來說 React 的本質就是 Data -> View 的過程, 傳統的網頁處理 Dom (View) 是有 life cycle 的 (State 的切換), 但在 react native 是透過 Virtual DOM 的 diff 不同來表達 state 的差異、更新。

前言的部分筆者聽不是很瞭...

Why React-Native

  • 不需要自己去刻 JSON parser
  • render function 可以很容易的 Scale 做拆解
  • 開發即時
  • It's Native
  • Facebook 真的有在用

Measure You Can't Optimize What You Can't Measure

  • Systrace 評估是否執行超過一個 frame 框
    • Render thread
    • nativemodules thread
    • uithread thread
    • jsthread thread
  • console.log
  • End user test
  • react 本身已有套分析工具

Technical

  • Async Task 放到背後執行
  • Virtual DOM diff 本身也有 performance 問題, 盡量減少 virtual DOM diff 的次數: shouldComponentUpdate (內容去比對新舊 property)
  • global single state 但筆者認為這邊應該要用 flux 架構來解決更新資料的問題
  • 減少 Bridge 溝通的次數

講者有釋出模組 fun-react 包裝了一些功能。

Anti-Anti-AD / 反反廣告

@Aki Yu

APP 不管是在 Apple Store or Google Play 其實都賣不太動 (除非本身是知名軟體), 主要還是靠廣告佔了整體 82% 的收入, 直到 Adblock 的出現之後, 讓廣告收益銳減 (對開發者來說, 其實不知道發生什麼事, 只知道廣告流量突然降低)。

Adblock 運作的原理是針對連線去對 content 做 filter, 從系統層下手而非應用層。

講者使用 Charles (網路工具) 來示範建立 Proxy, 再讓手機透過此 Proxy Server 連線內含廣告的應用軟體, 撈出有無開啟的連線差異確認廣告網址 domain, 最後在程式中檢查對廣告 domain 做 request header 的確認連線有無成功, 以此判定是否安裝 Adblock。

如果使用者安裝 Adblock 開發者可以做什麼?

  1. do nothing
  2. fix UI/UX bug (解決廣告欄被移除內容的顯示問題)
  3. Shut down App (not good)
  4. Limitation might be a good way (限制部分功能提示解除 Adblock 黑名單)
  5. 以顯示客製 AD 取代
  6. Begging users (最好的方式是 求使用者)

手機連線 Proxy 帶到的 security keyword : man in the middle attack。

Prototype 與 UI 狀態間的測試

@Akane Lee

UI 六種狀態 (部分節入字 O'Reilly)

  • 理想 ideal: 一切完美的情況下, 最能呈現應用本身的狀態
  • 空白 empty: 第一次開始使用, 所有資料都 reset 的時候
  • 極限 maximum: 內容的最大值、最小值 (溫度的正負極限顯示, 文字換行的表示)
  • 錯誤 error: 各種錯誤發生時的狀態 (錯誤的提示)
  • 載入 loading: 降低等待的不耐煩 (超過 4 秒給進度條)
  • 局部資料 partial： 理想狀態下的小地方變動, 藉由統一規則來設計 (動作搭配復原的設計, 對使用者學習過程中滿重要的)

Prototype

測試驗證產品, 用以表達 User Behaivor。

  • Wireframe (有紙本與非紙本的形式), 快速、簡單、成本低

    使用者不容易看懂, 僅做內部測試容易與真實情況產生落差, 比較容易因為按步操作而忽略到錯誤的情形。

  • Mockup 接近成品, 容易理解 ex. https://www.invisionapp.com/

    仍是有與真實情境不同, 預期以外的細節落差無法反映的問題

  • Program 程式等級的, 離上架差一步, 最精準

    成本高、製作時程長、來回修改不易

Reference Keyword

Rapid Prototyping : Sketching & Paper Prototyping、Digtial Prototyping、Native Prototyping。

Activity Recognition with TensorFlow

@Aaron Lai

汗... 機器學習還真的不太適合在會議上做分享。

Reference

Hackpad

Activity Net

TensorFlow

  • https://www.tensorflow.org/
  • Auto-Differentiation
  • Input - Placeholders
    • statuc or dynamic shape
  • Variables
    • pass initial values
  • Basic Ops
    • Matrix multiply, concatenate
    • add(boradcast), multiply
  • Session
    • Connect the backend
    • Run the graph
    tf.inialize_all_variables()
    tf.Session()
    tf.run()

  • Variable Scope

    • Variables within the same scope could be "reuse"

  • Update Parameters

    tf.train(optimizer)
    minimize(cost)
  • Assign Device
    tf.device()

Machine Learning Framework

Putting All Thing Together

  • Video --> Inception-V3 (GoogleNet) --> 2048 dims features --> Attention RNN -->Match: small DNN

TensorFlow Examples

https://github.com/aymericdamien/TensorFlow-Examples

最後, 在一日的議程上其實感覺會結束得有點倉促, 私心慢慢覺得最近由社群所舉辦的 Conference 有逐漸疲軟的趨勢, 不如早期剛如雨後春筍般成立社群時的群眾參與度熱烈, 我想未來想藉由在這樣的舞台 Promote 自己也會愈來愈困難 囧>; 但意外的慶幸自己能在這次的議程上, 關於技術的分享比較少看到新的 Terms 了, 期許自己未來也能對被關注的技術保有更多的敏銳度。