MouWorks

# JSDC 2017

# 001. (101)Turbo boost next Node.js Slides (opens new window)

  • Performance Features
  • v8 hot functions
  • run過次的code 再次運用會變成 hot function (optimized)
  • Crankshaft does not support new ECMA script.
  • Crankshaft 不支援 let/const, rese/spread 等等新的寫法
  • 因為JS支援動態型別, 所以

# Turbofan controller (new optimizer)

  • NodeJS 9 is 15~20% faster than NodeJS 8

# Http1.1 issues

  • Browser can only send 6 request at once,
  • If delayed, it will blocked
  • "Head of Line Blocking"　HoL Blocking
  • Http/2 解決了 HoL 問題

# Babel and Ayo.js

  • 新的支援 - Worker (目前 ayo 已有,node尚未支援)
  • Worker can use CPU better.

# 講者有Demo效能方面的差距

# 002. (101)前端廣告生態

  • 預算可以很低
  • 可以切到很細的市場(將受眾切分出來)
  • 數位廣告已經超過了平面媒體

# DSP: Demand side platform, buyer side

*廣告主上廣告素材

# SSP: Supply side Platform

*出版者提供流量-例如:去Pixnet, Xuite等取得版位流量

# ADX: Ad Exchange

  • Cookie Matching by DoubleClick

  • 使用一個 302 Redirect 指令去帶回　dsp_user_id

  • 分析: User Profile 切分受眾

  • 100ms 內要投遞廣告

  • 大快雜疑

    • 資料量大　(大)
    • 速度要求快 (100ms)(快)
    • 各種不同的資料來源 (雜)
    • 資料真實性存疑 (疑)
    • 廣告詐騙

*　前端的投遞: 需要讓廣告正確的呈現

*　Banner Ads *　Video Ads *　Display Ad *　Overlay in-video *　in-stream ads * pre-roll ads　劇前 * mid-roll ads　劇中間 * post-roll ads 劇後(通常預告下一級等等)

  • Native Ads

    • Keyword Search ads
    • Content ads (內容的中間夾雜廣告)
    • Recommendation widget (推薦欄位)
    • Promoted Listings

  • 蓋版廣告　並不是原生廣告！

# 003. (101)前端DevOps-DevOps for F2E

  • 講者使用 AWS

  • ITHome DevOps 系列文

  • Load Balancing - 解釋 Load balancing 功能

  • CI/CD: bitbucket + circleCI

  • Slack Notification

  • AutoScaling:

    • 監控CPU/RAM utility -> 決定擴展/縮減機器內容

  • Chaos Monkey: Chaos Engineering

  • 打log 到 Cloudwatch ->便可以建立 Dashboard 管理流程

# 004. (101)Web API - Mashape

  • Monolithic -> Microservices

  • Cow -> Milk, Butter, Beef

  • Running MicroService is like running a City

  • Ice cream scoop strategy

    • 逐步轉移

  • Nuclear bomb strategy

    • 一次全部轉移

  • 介紹KONG

    • API 管理工具
    • Microservices API gateway
    • Stateless server
    • Cassandra/PostgreSQL (recommend cassandra)

  • 介紹Mashape

    • API Explorer
    • Lots of Free API online

# 005. (101)原生/Web 共存 - HTML5 vs Native App

  • Speaker background

    • urAD founder, JSDC founder
    • FB Dev Circle Taipei Tech Leader

  • WeChat Mini apps

  • FB Messenger

  • Keep user inside their app (超級應用)

  • FB: Chat Extension

    • 類似WeChat小程序

  • Chat platform and SuperApps(超級應用)

  • 3B MAU - fb+whatsapp

  • 一鍵式安裝 - one click install

  • EarlyDay: 類似 Template/QuickReplies

  • Now: Hybrid:

    • FB Messenger platform v1.2
    • 開發者可以在WebView之內, 可以存取使用者的身分.
    • In-chat vs webview資訊Sync

  • 4 Types:

    • Facebook built-in template
    • Postback 機制, user 按下會觸發所定義的資料, 拋向 webhook url
    • WebUrl
    • Messenger Extension

  • WebExtension

    • Messenger 內嵌入一個 webview

  • 要將Domain加入白名單中

  • Page Access Token

    • 類似 User Access tokens.
    • 提供寫入/刪除　特定FB頁面的權限
    • 一旦拿到 User Access Token, 則可以用 GraphAPI 去取得PageAccess Token.

  • PSID: page-scoped User ID

    • 給Bot使用, 無法取得 User資料

  • ASID: app-scoped User ID

    • 可以取得User資料

  • WebView Extensions

  • Messenger Extensions JS SDK

# 006. (101)VanillaJS Data Binding

  • Speaker tech background: Angular/Typescript
  • Data Binding: Web 的資料綁定
  • Ideal Case:
<span>{post.upvotes}</span>
1

  • DOM operations are expensive defineProperty

  • WeakMap() ? what is that?

    • WeakMap can take object as keys.

  • Using 'Symbol'

  • 結論: data-binding 可用原生JS實現！ 只是會比較醜一點

  • Try to do a data-binding by yourself!

# 007. (201)GoogleCloud IoT

  • GoogleCloud IoT

  • GCPUG

  • Google Developers Experts

  • Google Spreadsheet

  • IoT: 感應溫度, 攝影機等等

  • 服務要收集從 IoT傳回來的資料

    • 被自己的Device DDoS

  • Google cache service

    • Cloud PubSub: 雲端的Queue (AWS SQS?)

  • BigTable/BigQuery

    • Storage

  • Cloud DataLab

  • DataStudio

  • IoT core: 提供一個端點

  • App Script - 類似 Excel VBA

# 008. (201)VueJS 3D VR

  • VueJS + aframe = 360 panorama VR
  • WebVR技術
  • A-frame: a framework by Mozilla
  • CubeMap: 全景是由六個圖所構成的
  • 進場動畫: 降低Loading
  • 用Vue-cli　建立 vue 模板
  • 內部引用a-frame
  • Fade-in/Fade-out
  • WebXR?? webVR+webAR

Day 2

# 001. (201) Mastering Bitcoin by Node.js

  • Bitcoin-Blockchain Tech

  • Blockchain, with functional programming

  • Bitcoin 類似現金的地方

    • 匿名交易/結果不可改變/雙方同意即完成

  • Payment (如支付寶)

    • 非匿名/結果可改(資料在第三方)

  • Bitcoin 三個重大技術

    • 匿名性
      • 密碼學 - (1970)
    • 去中心化
      • P2P網路 - (1970)
    • 資料不可竄改
      • 共識演算法 - (1990)

  • Bitcoin mainnet　中的區塊和交易資料

    • blockexplorer.com

  • 要假造交易必須掌握 51%　的結點

    • this makes it almost impossible

  • 地址開頭代表不同位置

    • 1　(mainnet)
    • m, n (testnet) - 測試用

  • 比特幣的交易會

    • 帳本會有別人的交易
    • 每個結點維護一份帳本
    • 每個結點存有一份副本

  • i.e. 商店提供 bitcoin address　讓人付帳, 但別人得知該地址可以去反查該 address 有多少錢

  • ECDSA Signature 數位簽章

  • Download blockchain

    • 每個 block 有之前區塊的 hash
      • 先去取得 Header(因為整個資料量太大)

  • Storage - LevelDB by Google (Local Storage)

  • 共識演算法:多個結點同時儲存同樣的資料? how ?

  • Nonce: 跟挖礦相關

  • POW: Proof-of-work

  • 最長鏈:機於POW安全性

  • POS: Proof-of-stack

  • 公有鏈:一人之力難敵眾人之力

    • POW
    • POS

  • 私有鏈:投票的方式.

    • RBFT
    • Raft

  • Why SHA256?　目前AES公認最安全的加密法

  • 多次SHA?　越多次被破解的機率越低

# 002. (201) Node.js for Content Generation and Fast Delivery

  • Flash is dying

  • Flash-> HTML5

  • Why NodeJS?

    • will tell you later!

  • Frame:

    • 24 frames/sec

  • 使用者的輸入 -> 利用 NodeJS 去 Renderer

  • 一張一張的圖片 -> 用 FFMpeg 去產出變成影片

  • automattic/node-canvas

  • Issues:

    • CanvasAPI 還不夠成熟
    • .currentTransform 有些未被支援
    • 直接調用底層(需要使用C++)

  • 挑戰:

    • 後端皮前端骨: 大部分都是前端為主 (canvas)

  • 例外處理:

    • Migration: 相接前版的 data

  • 舊架構:Flash(Client-side Rendering)

  • 新架構:HTML5(Server-side Rendering)

  • Preview Server

    • 分割影片
    • 分割完之後丟到Queue
    • Preview Worker (Renderer)

  • VideoMaker硬體要求降低

  • 結果更好更順暢

  • Ditch the flash

# Price

  • 營運成本上升(server/worker相關)

# Challenge

  • Scalability

    • Preview server/Queue/Preview Worker 有做Auto Scaling

  • 縮短 Wait Time (for all users)

    • Smarter Preview Queue

  • 編輯 / 預覽 /輸出

  • 採取先優化輸出, 在優化預覽, 目前處理編輯中

    • 優化輸出: Server-side rendering

  • Why NodeJS ?

    • 希望全公司都用 JS
    • JS based
    • JS/NodeJS 的彈性
    • 希望能Reuse Renderer

# 003. (201)網頁開發大型應用程式-Destructure Piconion

  • Made for Chromebook
  • like Photoshop for Web
  • Modularize 模組化
    • 降低耦合度
  • Hierarchical Structure
    • 多層式切割
  • Dirty code always exist
  • Glue Code:膠合程式
    • 模組化之外的Code, usually dirty
    • Flow Control, pass data between modules
  • Module Code: 模組程式
    • 模組化, Unit Testable
  • Balance:
    • Too much module is crazy
    • Java-like:too much
  • 只用一兩次 vs. 到處重覆用
    • 重覆性高 -> 模組化
  • 靜態資料 vs. 動態資料
    • 靜態:寫死 Hardcode
    • 動態:參數化可帶入新的資料
  • 探索未知 vs. 規劃已知
  • Google Drive API
    • Web介面: Ctrl+S　直接覆蓋本機檔案　-> 做不到
    • Ctrl+S　體驗很重要
    • Solution: Ctrl+S 直接存回雲端
  • Point-新的介面, 整合觸控, 並且有感壓
  • History:
    • 記錄動作 (節省資源)
    • 記錄圖片 (直接記錄當下的圖片) -　畫筆僅能如此記錄
      • 記憶體不夠清掉歷史紀錄

# 004. (201)Way to FantasyLand(Func programming)

  • Divide and Conquer
  • 抽象化: Play button
  • 數學
    • Array 的Concat 類似數學的結合率
  • 1950: Functional Programming
    • semigroup: 其中包含
      • value 數值
      • operation　操作

# Fantasyland Spec

  • 將數學的抽象概念, 放在js中
  • :: Type屬於
  • ->Function
  • daggy
    • Constructor
  • 平行運算的基礎就是semigroup
  • Complier 會檢查 Type,
    • 不需要 unit test
  • Monoid:
  • Reduce 隱含 monoid 概念

# Functor

  • Type中會處理 Error Handling
  • Type Signature --> what is this?

# 005. (201)後端架構API實做案例

  • Old Arch

    • Drupal+MySQL -> DB Conv -> NodeJS+Mongo
    • 前後分離

  • Issues

    • MySQL Conv to MongoDB 太過暴力:MySQL硬轉
    • 系統沒有持續更新
    • 開發環境難以重現

  • Feature Request

    • 後台上稿
    • 前台顯示
    • 跟外部合作-出API提供串連

  • Everything around API

    • Service around API
    • 專心調API效能
    • Scaling 容易
    • 模組化,可以抽換

  • ChangeLog: 記錄功能更動的部分

  • Validator: 驗證資料做一個 middleware

  • Read > Write && Json

    • use MongoDB

  • why MongoDB+Redis ?

    • Redis and MongoDB share the same schema

# Drawbacks

  • Node_modules is FAT
  • 架構肥大, 巢狀問題

# Why Cloud?

  • Reduce Ops cost and time
  • AWS/GCP/Azure? go with GCP because of Cost
  • UI: Azure > GCP > AWS
  • Feature: AWS > GCP > Azure
  • Price: AWS > Azure > GCP
  • 成本考量:選擇GCP

# 實做考量

  • async/await
    • 遠離 promise/callback hell
    • Babel 很大一包
  • 模組化:
    • 每個模組可以獨立運作
    • 程式碼單純　(<100 lines)
    • Easy to Read
    • Easy to Swap
    • but lots of files

# 大量使用 middleware

  • parse QueryString
  • validator
  • 資料驗證區和主要邏輯區拆離
  • Code簡潔

# Why Redis?

  • Read >>> Write
  • Easier to cache
  • Speedy
  • Cronjob handles longer times
    • Data update time gap
    • Harder to change previous data

# MongoDB

  • 小於兩層的巢狀結構(效能考量)
  • NoSQL定義Schema
  • 要下好 index
  • Find slow query
  • Explain

# Cloud issues:

  • Google 自動分配 Load balance
    • 自己開一台VM+NginX　配置
  • Mail Server
    • 自己做一台 Api server 界接
  • CDN is expensive
    • 自己做一個 image thumbnail server
    • 縮圖功能

# Concluction

  • SEO:建議還是改用 SSR
  • CMS:可用現有Solution,不必自幹後台 (Drupal, Wordpress)

# Q&A

  • API 一但設定完難以更改
    • API用替換方式
      • 先出新的, 新舊並存, 再加以抽換

# 006. (201)你全家都區塊鏈

  • blockchain 區塊鏈

  • Tech-heavy

  • blockchain 是個技術棧組合

    • 難得不是區塊鏈本身,而是後面的演算法

  • 用不同的手段滿足運用

  • 已經配置的Memory不能隨意改變大小

# LinkedList的基本概念

  • Linked-list 如何實做?
  • Linked-list 最後Append 一筆資料
  • linked-list 可以抽換中間的 block

# LinkedList走出一台電腦

  • Decentralized
  • Sync between servers
  • Problems:
    • 確保不同結點上面的資料一致
    • 不同電腦上記憶體位置不同
      • 更換一個方法去記錄block的位置
    • DataBlock上面的順序不變
    • Multiple server sync
    • Conflict: multiple transactions on nodes.
  • 確保兩地資料相同?
    • checksum是否相同
    • 各種Hash 演算法
      • 用 Crypto API 即可(cryptoJS or related API)
  • 如何識別Data block ?
    • 同樣用hash
    • 前後都用hash
  • 確保順序不可變
    • 用Hash, 而不用記憶體
  • Genesis Block (創世區塊)
    • 也就是第一個 block
  • 如何跨機器?
    • P2P Networking
  • 如何新增Block到所有結點?
  • Chain也會conflict
    • Consnsus 共識機制
      • 比鏈長:鏈長者贏
      • Other:PoW, PoS, Ripple, xBFT
    • ETH 用 xBFT共識機制
  • ETH:
    • 再資料內塞程式碼:可以執行: Smart Contract智能合約
  • Current Framework
    • No need to rebuilt all the shits