GDG DevFest Taipei 2016

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

議程筆記

Personal 會議整理

Material Design / 實感設計

@Takuo Suzuki / 鈴木拓生

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

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

Hackpad

The details can be found at
- https://material.google.com/
- https://material.io/
Showcases:
- g.co/materialshowcase

Introduction

Tangible Surfaces
- Depth focuses attention and provides structure.
- Interaction cues
Rich Imagery and Bold Colors
- Primary + Accent
- Color density depends on content
- Noto Fonts https://www.google.com/get/noto/
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)

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

Web Frameworks

Polymer: paper elements https://elements.polymer-project.org/browse?package=paper-elements
Angular Material https://material.angularjs.org/latest/
Material Design Lite https://getmdl.io/

Tools

Google Fonts https://fonts.google.com/
Device Metrics https://material.io/devices/
Material icons https://material.io/icons/
(svg is recommanded!)
Resizer http://material.io/resizer/

Downloads

ai template https://material.google.com/resources/layout-templates.html#

What's Next?

Material Design Codelab https://github.com/googlecodelabs/android-design-library
Plaid App plaidapp.io
12/8 Google Developer Day Livestream

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 開發者可以做什麼?

do nothing
fix UI/UX bug (解決廣告欄被移除內容的顯示問題)
Shut down App (not good)
Limitation might be a good way (限制部分功能提示解除 Adblock 黑名單)
以顯示客製 AD 取代
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

http://activity-net.org/
辨識整體影片內容
偵測片段活動內容

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

Hypotheses-->Inference-->Training
Deep Learning
- Course by Hung-Yi Lee http://speech.ee.ntu.edu.tw/~tlkagk/coursesMLSD152.html
  +我自己推薦 Course by Stanford https://www.youtube.com/playlist?list=PLkt2uSq6rBVctENoVBg1TpCC7OQi31AlC
Neural Network
- Logistic Regression
- Many neurons
- Different Activation function
- More Layers
Deep Neural NetWork
- ImageNet http://image-net.org/
TensorFlow Playground http://playground.tensorflow.org/
DNN Example: autoencoder
- MNIST data http://yann.lecun.com/exdb/mnist/
- Auto-encode: DNN as Encoder and Decoder
- Unsupervised (Dimension reduction)
- "Representaion" of the image
Neural Network With Memory
- Recurrent Neural Network
  - Memory cell
  - Reuse
  - Sequence
  - Hard to train
  - Cannot "connect the dots"
- Long Short-Term Memory (LSTM)
  - Gate Mechanism
  - http://colah.github.io/posts/2015-08-Understanding-LSTMs/
Convolution Neural Network
- http://cs231n.github.io/convolutional-networks/
Attention Mechanism
- http://distill.pub/2016/augmented-rnns/

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 了, 期許自己未來也能對被關注的技術保有更多的敏銳度。

Menu

議程筆記

Material Design / 實感設計

Hackpad

React Native Performance Tuning

Anti-Anti-AD / 反反廣告

Prototype 與 UI 狀態間的測試

Reference Keyword

Activity Recognition with TensorFlow

Hackpad