Skip to content

Instantly share code, notes, and snippets.

@CYBAI

CYBAI/modern-web-2016.md

Last active September 15, 2016 22:21
Show Gist options
  • Save CYBAI/6d36ba8a94b33dcb9370b4cc47b6d796 to your computer and use it in GitHub Desktop.
Save CYBAI/6d36ba8a94b33dcb9370b4cc47b6d796 to your computer and use it in GitHub Desktop.
Download ZIP
Note for Modern Web 2016
Raw
modern-web-2016.md

Modern Web 2016

Modern web 2016 hackpad

8/24

Douglas Crockford - Typing

[slides]

Ian Matthew Lewis - Building and Deploying Scalable Microservices with Go & Kubernetes

[slides]

  • Monolithic Apps
  • Microservices
  • Shared Machines
  • Virtual Machines
  • Why we use container?
  • Fast, Portable, Efficiency
  • Large-scale cluster management at Google with Borg
  • Kurbernetes
  • Container orchestractor
  • Runs containers
  • Support multiple cloud and bare-metal environments
  • k8s services define access policy - load balance or headless
  • k8s services gets a stable virtual IP and port
  • virtual IP is managed by kube-proxy
  • k8s schedules workloads to resources and helps manage them

黃保翕 - 快快樂樂學會 Angular 2 網站開發框架 (Track B)

[slides]

李欣龍 - React Native For Web (Track B)

[slides]

董澤光 - 馭風 － 搜狗分散式追蹤系統的設計與實現 (Track B)

[slides]

  • Google Dapper
  • 系統設計目標
    1. 低消耗 - 可控性、服務性能
    2. 低侵入性 - 對開發人員透明、減少開發人員負擔以及進入門檻
    3. 時效性 - 數據的收集、計算及處理
    4. 海量數據 - 海量數據存取速度
  • 設計理念
    1. 調用鍊 - Trace tree、multi span
    2. 埋點時間 - Client Send/Receive、Server Send/Receive
    3. 埋點類型 - 單向、雙向
  • 數據存取
    1. 數據存取特點
    2. 寫多讀少
    3. 低延遲查詢
    4. 複雜條件查詢
    5. HBase
    6. rowkey 設計，無熱點存儲
    7. rowkey 由 trace id + span id 拼接而成
    8. Phoenix
    9. 增加索引
    10. 每個 span 一個紀錄
  • 馭風系統價值
    1. 可視性
    2. 快速故障定位
    3. 服務關鍵路徑
    4. 調用鍊路拓墣系統
    5. 趨勢預測與擴容
  • 未來展望: 智能化、提高資源利用率

呂行 - Servo 平行瀏覽器引擎 (The Servo Parallel Browser Engine) (Track C)

[slides]

  • servo, written in Rust

  • Why a new browser engine?

    • Performance
      • Parallelism
      • GPU (WebRender)
    • Memory safety
    • Embedding
    • Modularity

  • Performance: Parallelism

    • (CSS) Style calculation in parallel

  • Performance: GPU

    • 60 fps full screen animation
    • No WebGL, Canvas etc.
    • How does WebRender work?
      • On GPU instead of CPU
      • immediate mode vs retianed mode
      • servo demo

  • Security

    • Rust's Lifetime Check

  • What Rust can offer?

    • Ownership & move
    • Guaranteed memory safety
    • Threads without data races
    • Pattern matching
    • Type inference
    • C/C++ bindings
    • and more!

  • Test the Web Forward

呂昭寬 - 從 Guanyu 談設計 Serverless 服務 (Track B)

[slides]

  • : Micro-Services glued with managed services
  • Serverless Architectures
  • AWS Lambda
    • Managed Function as a Service
    • Pull and push model
    • Concurrency cap
    • No shared memory
    • Potentially shared /tmp
    • Burstable / Throttled CPU
    • 每個帳號每次只能跑100個process (在panel看不到)
  • Lambda Frameworks
    • Apex, created by TJ and written in Go
      • 講者認為較偏 CD tool
    • Claudia, written in Node.js
      • 相較 Apex 較完整
    • Serverless Framework (formerly JAWS), written in Node.js
      • Manual 不友善
  • 淺析 serverless 架構與實作 (in serverless v0.5)
  • Serverless Framework: Migrating to @1.0.0-beta
    • Manage IAM Role, API Gateway, Lambda with CFN
    • Abstract away API Gateway templates
    • Move metadata to S3
    • Functions can share the same folder
    • Plugin API changed..
  • Guanyu
    • 掃描信件等是否有毒再傳送給客戶
    • AWS Elastic Container Service
      • Support Application Load Balancing
        • GA August '16, extends ELB
        • Content-based routing
        • HTTP/2 and WebSocket support
        • Dynamic port
      • Prepare EC2 for ECS
      • Lacks transparent inter-container traffic
        • AWS is hard to communicate between containers
  • Guanyu in AWS
    • ECS on top of AutoScaling Group
    • Supports external cache w/ Redis & DynamoDB
    • Dynamic port behind ALB
    • Track logs in CloudWatch Logs
    • Periodic health check with ALB
  • Demo project in modern web 2016

8/25

Nick Shadrin - Tuning NGINX for High Performance

[slides]

  • All links in one page

  • Event-based system

  • Architecture approach

    • Design for scaling
    • Segment microservices out
      • Monolithic application
      • Separate from main application
    • Use caching and microcaching
      • memcache

  • Inside NGINX

  • OS Tuning

  • Overcoming ephemeral port exhaustion

    • Increase local port range
    • Split traffic across multiple IPs - split server traffic through separate those IPs
    • NGINX since 1.11.2 uses IP_BIND_ADDRESS_NO_PORT socket option when available - If use this option, server will not reuse the same resource
    • Overcoming Ephemeral Port Exhaustion in NGINX and NGINX Plus

  • Minimal NGINX configuration

    events {}

http {
  server {
    listen 80;
    location / {
      proxy_pass http://backend;
    }
  }

  upstream backend {
    server backend1.example.com:8080;
    server backend2.example.com:8080;
  }
}

  • NGINX core features

    • Use correct number of worker_processes
      • auto

      • of available CPU cores - If container lives with CPU, this configuration is important

    • Increase worker_connections - Setup different connectivity for corresponding usage, e.g. proxy, mobile device
    • Increase worker_rlimit_nofile
    • Turn off accept_mutex: accept_mutex off;
    • Turn on Sendfile: sendfile on;
    • Use thread pools if I/O needs offloading: aio threads;

  • HTTP Keep alive benchmark

    • HTTPS with NO keepalive (worst setup)
    • Plain HTTP
    • HTTP/2 with SSL

  • HTTP Keep alive

    • Keepalive on the Frontend
      • keepalive_requests 100;
      • keepalive_timeout 75s;

    • Keepalive on the Backend

      server {
    location / {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
  }    
  upstream backend {
    server backend1.example.com:8080;
    server backend2.example.com:8080;
    keepalive 32;
  }
}

  • HTTP Caching

    • Microcaching with NGINX
    • Cache placement strategies

  • HTTP/2

    • Major changes compared to HTTP/1
      • Binary headers with HPACK
      • Multiple streams
      • Prioritization
      • Server Push

  • Measure your results

    • extensive logs with custom variables

      • Configure log_format with:

        $upstream_response_time
$request_time
$upstream_ # <- 沒記完

    • simple set of metrics with stub_status module

    • NGINX amplify

程劭非 - 前端工程體系的變革

[slides]

  • 技術leader職責 = 工程體系建構 + 團隊成長 + 業務支撐
  • 舊的library
    • 沒人敢改
    • 難 debug
    • 太雜
  • Library 原則
    • 必要性
    • Reusability
    • Atomic
  • 工具演進 (狹義：命令行、廣義：流程)
    • 創建 - 開發 - 調試 - 測試 - 發布
    • 工具 => 工具鍊

史海峰 - 電商基礎架構之路 (Track A)

[slides]

  • 為什麼要建設基礎架構
    • 夯實基礎，事半功倍
    • 隔離業務代碼與框架、平台
    • 提高系統可控性
    • 降低技術債，提高管理效率
  • 緩存集群管理
  • 系統監控: Nagios vs ZABBIX
  • 自動化 deploy 平台 - 批輛發佈、自動、備份
  • 應用監控
  • 服務監控 - SLA
  • 組件 => 框架 => 平台
  • DubboX
  • elastic-job
  • Sharding-JDBC
  • Conclusion
    • 自動替代人工 (規範化、標準化後再自動化)
    • 小系統驅動大團隊 (ex. 各種監控系統)
    • 基礎平台支撐上層應用

梁宵 - 移動開發的銀彈 － React Native 探索與實踐 (Track A)

[slides]

  • 使用 React Native 的效果

    • 節約成本
    • 平台復用
    • 性能體驗
    • 快速迭代

  • JavaScript 與 Native 通信機制, ex. 華盛頓與乾隆

  • 組件化思路

    • 基礎組件 (ex. UIExplorer)
    • 工具組件封裝
    • 業務組件封裝
    • 原生組建封裝
    • 開源社區 (JSCoach)

  • RN 不追求完全抹平差異

  • Profile issue

    Q: Network 無法查看 Fetch 請求，其實 Fetch 是 polyfill 實現

    A:

    1. 恢復瀏覽器實現，關閉Chrome安全設置
    2. 使用Fiddler做代理

    Q: 調適深層次頁面,總是從啟動更新

    A:

    1. Reload
    2. Hot Reload
    3. Live Reload

    Q: 真機調試時頻繁修改Host

    A:

    1. Android Dev Setting
    2. iOS: react-native-debug-server-host

    Q: 第三方庫，Debug OK, real device crash, due to window.atob

    A:

    1. JS lib 無環境依賴
    2. 封裝Native lib

    Q: 前後單分離，開發 mock server

    A:

    1. http-server
    2. mockjs

  • 移動項目技術選型

    • Native 遊戲，炫酷交互
    • Hybrid 複雜業務應用
    • HTML5 展示型、分享型
    • React Native 體驗和效率平衡、創新型產品

林宜鋒 - 利用 Golang 架設 Line 機器人，作為網站的推廣大使 (Track B)

[slides]

  • Tools

    • Go Vet
    • Go Lint

  • GoRoutine and Channel: Multiple Thread in C

  • Golang has built-in

    • Test with Test prefix
    • Benchmark with Benchmark prefix

  • GoMobile

  • JSON with json tag in struct

    type Response1 struct {
   Page int
   Fruits []string
}

type Response2 struct {
   Page int        json:page
   Fruits []string json:fruits
}

  • LineBotTemplate

  • LineBot Example: PetNeedMe

  • Use LUIS to build smart Bot

  • Machine Learning for Go

  • Slides @ GoCon 2014

劉艾霖 - 無痛網站自動化測試 (Track C)

[slides]

劉恒兵 - 移動娛樂直播下監控與極限優化 (Track A)

[slides]

  • PGC 轉向 UGC
  • 深入理解極限優化
    • 明確方案適用場景
    • 對優化方案深入論證
    • 避免過度優化 (找到需優化的地方）
  • 加載監控體系 - 快速高效的 發現、定位、解決 問題
    • 速度監測
    • 版本覆蓋
    • 成功率
    • 性能監測
    • 錯誤日誌
  • 視頻流監控系統
    • 視訊加載過程監控
    • 視頻卡頓監控
    • 視頻播放異常監控
    • 單位播放異常監控
  • 機器性能指標監控體系
    • 低端機對性能的要求更高
      • 計算local FPS給機器評分
      • 不同動畫需要的 FPS 進行歸類
  • 基於監控體系的自動化平台
    • 測速自動
    • 實時告警
    • 前端染色
  • 移動端優化 - 網絡優化、文件優化、渲染優化
  • 優化HTML5互動延時
    • 3個HLS分片才能支持播放
      • 優化關鍵幀GOP間隔減少互動延時
      • 支持動態配置上行流關鍵幀間格
      • 圖片資源優化 - 減少請求、壓縮大小
    • 支持與Native結合體驗，採取RTMP播放
  • 減少直播加載時間延遲
    • 遵循15秒原則
    • 主動推HLS流到CDN並緩存3個分片
    • 預加載HLS視頻資源
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment