#ModernWeb2016

08/24 Day 1

09:40 - 10:30 Typing

Douglas Crockford

  • Intro
  • This talk looks at the history of typing (指的是打字, 而不是資料型別), from the invention of the typewriter, to electrification, to computers, to poking pieces of glass with our fingers. It also looks at the special typographic requirements of programming, and uses typing as a metaphor for how we evolve our technologies.

  • Rebus Principle
  • 文字本來是表意的,但會拿它的音去標其他同音或類似音的字

    例如:用 bee 和 leaf 去標 belief

    用中文舉例則是:

    ”象“,本來是指大象,被借去表示 “樣子” 的意思

    而後來很晚才又創造出 “像” 這個字來表示 "樣子"  

  • 語言的形成 
  • 字母由來 (參考資料:http://news.gamme.com.tw/363852 感謝hubuki提供)

    Phoenicia --> Greece --> Rome

    ABCDEFZHIKLMNOPQRSTVX

    --> CG (表達不同音), IJ, UV (表達子母音), W (應該要稱作 double-V)

    --> & (e + t) 最後沒有納入字母

    --> 小寫字母的出現

    Excerpt from The Declaration of Independence

    Technology 

    - Marks on media

    - Printing

    - Typing

    - Digital Media

  • 打字機 
  • Shift key, Control key  的由來 

    Tab key (Ctrl + I (eye))

  • ESC
  • Crockford Keyboard

    等寬字型 vs 非等寬字型

  • Programma
  • http://programma.us

    寫程式用的typeface (垂直置中、空括弧中間有空隙)

    := += -> >< (x) [f] {w} f() <> \/ /\   ...etc.

    cwxvywz

    技術的演進多半不是憑空想像,而是透過改善先人成果,但也繼承了歷史包袱 (為了解決當時問題的解法,拿到今日看會是不好的設計)。所以要時時審視,時空背景一旦改變,過去的技術是否已經不合時宜,需要打掉重練

    從 keyboard layout 改變的歷史看 legacy 的恐怖影響,也是這就是他簡化 JS 的原因吧,去掉 legacy 不妙的地方。

    10:30 - 11:20 Building and Deploying Scalable Microservices with Go & Kubernetes (Ian Matthew Lewis / Google)

    Ian Matthew Lewis

  • Intro
  • As systems grow, using configuration management to pin applications to a specific host and use the host as the application unit doesn’t scale. Applications need to be broken up into smaller services. One application per host becomes increasingly inefficient.

    Containers have opened up many new possibilities in how we can deploy our applications. Containers enable us to run a service on any host at any time and we can deploy many containers onto a single host.

    Managing the containers is easy with a system like Kubernetes. This talk will help attendees wrap their minds around complex topics like distributed configuration management, service discovery, application scheduling, and resource management at scale. I will cover many concepts in Kubernetes, such as Deployments, ReplicaSets, and ConfigMaps and illustrate how developers can use these tools to deploy their services.

  • Monolithic Apps
  • Microservices (SOA)
  • Shared Machines
  • Virtual Machines
  • Containers

    - For the last 15 years, Google has been building the world’s fastest, most powerful infrastructure

    - Search / Gmail / Google Maps / Chrome / Android

    Cloud Technology Innovations

    - 2003 GFS

    - 2004 MapReduce

    - 2006 Big Table

    - 2007 ...

    Google has been running all our services in Containers for over 10 year, We start over 2 billion containers every week.

  • Containers Microservices
  • - packaging apps / libs together

    - on top  of kernel

    Reasons for using containers

    Container Management

    - How to deploy to multiple nodes?

    - How to deal with node failures?

    - How to deal with container failures?

    - How do you update your applications?

    - How can your containers discover and communicate with each other?

    Large-scale cluster management at Google with Borg

    http://research.google.com/pubs/pub43438.html

    Developer View

  • Kubernetes
  • Greek for "Helmsman"; also the root of the word "Governor"

    - container orchestrator

    - runs containers

    - supports multiple cloud and bare-metal environments

    - inspired and informed by Google’s experiences and internal system

    - open source, written in Go

    - manage applications, not machines

    A 10 years old system

    http://kubernetes.io/

    Support By CNCF (Cloud Native Computing Foundation) (https://cncf.io/)

    Borg: The Predecessor to Kubernetes

    Scheduler works similarly to Tetris.

    Deployments & ReplicaSets

    Rolling Updates

    Services

    a group of pods that work together

    - grouped by a selector

    Defines access policy

    - load balanced or headless

    Gets a stable **virtual IP** and port

    - sometimes called the service portal

    - also a DNS name

    VIP is managed by kube-proxy

    - watches all services

    - updates iptables when backends change

    Hides complexity - ideal for non-native apps

     

    Demo

  • Wrap Up
  • https://cloud.google.com/container-engine

    11:50 -12:30

    A - 報導者 -  一場開放原始碼的實驗 (簡信昌/ 報導者CTO)

  • Intro
  • 報導者,不只是臺灣第一個實驗非營利經營模式的媒體,更是一次臺灣媒體網站的開源革命。

    從推廣開放原始碼,籌辦研討會。到去年第四季正式透過『報導者』的成立,進行一場開放原始碼的革命跟實驗,從整個網站架構的原始碼全部以 MIT 授權釋出,到原生內容以『創意共享(Creative Commons)』授權開放使用,從這場實驗,可以讓一般企業看到一些不同的思考方向。

    講者資歷:P3Party、YAPC、OSDC、Yahoo

  • g0v
  •  報導者
  • (報導者)Why Open Source
  • Start
  • 技術
  • B - 快快樂樂學會 Angular 2 網站開發框架 ( Will 保哥 / 多奇數位創意技術總監 )

  • Intro
  • 在 Web 的世界裡,推坑是唯一不變的真理,有好的技術,就是要拿出來一起分享。想當年,AngularJS 的出現,帶給大家的是一次又一次的驚喜,但這高潮迭起的學習曲線,著實讓人又愛又恨。大家也見識過 React 的絢麗登場,效能優異的 VDOM 技術霎時震攝了不少前端攻城獅,不過能力越強,責任也就越大,隨之而來的便是架構上的混亂與不知所措。現在,Angular 2 的到來,不但挾帶強大的架構優勢與全新的元件化技術降低學習門檻,優異的 TypeScript 與各式開發工具的火力支援更是如虎添翼,如果再算上國內外龐大的社群基礎,可預見的必在這活熱的前端世界掀起一場絢麗的戰火。本堂講座,將帶大家快快樂樂上手 Angular 2 網站開發框架。

    Angular 2 開發框架介紹

    http://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2.aspx

    使用 TypeScript 開發,寫起來很像 C#。

    Webpack 會幫忙注入 Javascript

    網頁會自動重整,不用手賤按 F5 或是 Ctrl+R (建議大螢幕或雙螢幕開發)

    {{title}}

    (click)="title=’...’" event binding

    [title]="title" property binding - support both DOM property and HTML attribute

    {{ }} 的 binding 方式內建 HTML Encode

    {{ item.date | date: ’y-MM-dd’ }}

    建立directive:<app-article [item] = "item"></app-article>

    *

    http://www.slideshare.net/WillHuangTW/happy-leaning-angular-2-web-framework-modern-web-2016

    C - 寫出所有人都能輕鬆讀懂的測試程式 (Cucumber.js)

    https://github.com/cucumber/cucumber-js

    BDD:

    Cucumber.js是

    Gherkin

    https://relishapp.com/

    文件可以直接丟CI CD,也可以直接轉換成web網站

    Feature(功能):功能說明、使用情境

    Scenario(場景、劇本):操作的方式、特定的流程

    Step(步驟):流程步驟

    Given(假設):前情提要、初始化

    When(當)

    Then(那麼)

    火力展示: node.js+Cucumber.js+chai 

    測試不只是測試

    產表工具

    測試涵蓋率

    13:30 - 14:10

    A - 電子商務 Audience Marketing, Growth Hacking 自動化設計及成效報告

    情境:80 歲老奶奶在萬年打卡

    從台灣受眾推測日本受眾

    當消費者購買/點擊行為發生,貼標籤在消費者身上(產品類型/興趣/年齡/性別...)

    B - React Native for Web

    VDOM --> WEB VIEW

    React Native

    VDOM --> iOS View

    https://github.com/necolas/react-native-web

    C - 從圖資學出發,探索網頁與搜尋引擎的本質,一起好好寫好 HTML 吧! 

    14:20 - 15:00

    A - StreetVoice 自動化部署演進

    CD & 部署: https://www.ansible.com/

    CI: https://travis-ci.org/

    B - 馭風 - 搜狗分散式追蹤系統的設計與實現

    Google Dapper

    C - Rethink React in Elm (鄭遠祥 (LY) / Appier前端工程師)

    https://speakerdeck.com/yhsiang/rethink-react-in-elm (↑太帥了)

  • Programming History
  • Elm
  • coding style for UI design

    http://elm-lang.org

  • Elm Data structure
  • Ref: https://dennisreimann.de/articles/elm-data-structures-list-array-set-dict.html

  • Be Direct
  • pure function --> Stateless function

    easy to reason about --> easy to refactor

    safe --> reliable

    monad --> "callbacks"

    Elm Architecture

    view - 類似 React 中的 component

    model

    messages

    update

    15:30 - 16:10

    A - Dance with i13n (與 instrumentation 共舞)

    ru031l

    LauMu 啊不,是 Paul 的投影片 (感謝 Michael Huang 提供)

    http://mei.homin.com.tw/Keynote_dance_with_i13n.html#!p=0

    p B - 讓你的 PHP 開發流程再次潮起來

    投影片http://www.slideshare.net/shengyou/modern-web-2016-php

    探索歷程

    - PHP v5.3

    - CodeIgniter v2.2

    - Laravel v4.0 ~ v5.2

      

    Laravel 道場

    - www.laravel-dojo.com

    身為傳教士的反思

    - 先改善效益最大的地方

    - 一次改變一點不要太多

    - 每一歩都不會太難

    - 讓成員感受到好處

    - 自然而然

    優化方向

    - 本地端可以獨立運作

    - 新舊專案使用不同 php 版本

    - 開發時的環境就是上線時的環境

    - 降低新成員進入專案時的門檻

    PHP 為何不潮? 

    懶人包

    http://www.laravel-dojo.com/opensource/wagon

    Git

    工具選用

    除錯工具除錯工具

    Composer

    packagist

    composer init

    composer require

    composer update

    套件生態系

    awesome-php

    autoload psr-4

    composer repositories

    satis

    toranproxy

    導入 Migration 工具

    Phinx

    Propel

    LazyRecord

    C - Servo 平行瀏覽器引擎

    16:20 - 17:00

    A - 恰如其分的 MySQL 設計技巧

    B - 從 Guanyu 談設計 Serverless 服務

    C - Data Fetching 的過去與未來 - from REST to GraphQL + Relay

    slide: https://chentsulin.github.io/modernweb2016-graphql-relay-intro

  • Server side 服務以 REST 最熱門,但有些難解的問題
  • GraphQL - 針對 application 進行 query,不是對 DB 做 query

    GraphiQL - 測試 GraphQL schema 的工具

    避免 N+1 query,可以減少查詢次數

    Relay 的 cache 有做以下工作

    resources

    看投影片

    17:00~

    Drink Time :sunglasses: 

    08/25 Day 2

    09:40 - 10:30 Tuning NGINX for High Performance

    All link:https://shadrin.org/talks/

    ...how to handle more customers per single server.

     About NGINX, Inc

    Architecture approach

    HTTP Caching

    Ref: https://shadrin.org/talks/

    10:30 - 11:20 前端工程體系的變革

    前端工程體系的演進

    關於工程

    手機淘寶

    工程體系的目標

    研發效率  產出質量

    安全性 穩定性 性能 平台性

    大用戶量 圖片 Hybrid 多部門接入

    工程體系的型態

    11:50 - 12:30

    A - 電商基礎架構之路

    (講者重點在於理想(想像/規劃)與實際能力是有差距的,所以你真的有演練過異常狀況嗎?你真的有能力解決異常發生時並維持高可用嗎?)

    B - 深入 CSS3 動畫應用及模組開發方式

    延遲時間軸

    animation-name 

    animation-duration

    animation-delay

    animation-timing-function 速度控制

    animation-iteration-count 次數控制

    animation-direction 方向控制

    animation-fill-mode

    animation-play-state

    可以寫成一行

    使用具語意的命名

    避免css屬性衝突

    動畫盡量使用css3屬性製作

    避免transform設定値衝突

    建議使用效果疊加 (e.g. translate + margin)

    CSS可樂站長

    http://csscoke.com

    負値馬上動,或不讓它動

    倒帶 - transition 順序

    加減速設定

    C - 遠端團隊專案建立與管理

    軟體開發者可以遠距工作的特性,激發出了遠端團隊管理的想法。

    讓偏鄉(?) 開發者也能容易的參與開發團隊。

    遠端偕同工作

    一種遙不可及,但又不

    遠端管理者

    將發散資訊 - 經過整合集結 - 收斂為產品最後的執行方式

    開會工具

    zoom, skype

    線上編輯工具

    google doc,office 360 ,Quip

    工具只是形式,溝通才是重點

  • 遠端開發困難點
  • 遠端開發者必備特質
  • 訓練流程
  • 定義基礎溝通時機

    促進遠端者主動聯繫

    重新開始=>重心開始

    團隊注重有格局

    架構 骨幹

    (但也有模糊之處)

  • 程式開發需溝通的項目
  • 開發也有所謂的技術債 (該做而未做的技術調整,或是為了趕工而做的妥協)

    好/壞的味道

    有時候最敏捷的寫法

    不一定是最好讀的作法

    不是每個人都可以寫出神之程式碼

    定義DoD 清楚表達每個TASK最小完成定義

    遠端會議VS辦公室會議

    (開會就飽了)

    遠端會議

    排定可預期的會議時間與會議目標

    遠端會議

    遠則網路穩定,安靜或者收音清楚之場所

    為原遠端團隊,信心何其重要

     工具採用流程

     首先,管理者只能相信

    建立遠端規則

    新手須知規則

    會議必須要即時參與

    工作時間保持線上網路順暢

    什麼樣的訊息,多久時間要回應 ex(吃飯,長時間離開,需要跟團隊知會)

    排定定期會議

    IFTTThttps://ifttt.com/

    Task management - JIRA

    以週為單位,以功能完成為基準(並非程式碼數量)

    感想感想

    團對節奏違紀數管理之根本

    溝通為底 技術為輔 掌握成員特質

    身為管理者永遠要多看產品 多看TASK 多想三秒能夠省下一星期的悔恨

    建力信心與溝通,成員願意將問題曝光揭露

    工具只是輔助,遠端是一種手段,重點還是回到溝通成本

    13:30 - 14:10

    A - 移動開發的銀彈 -- React Native 探索與實踐

    銀彈技術銀彈技術

    可以提高生產力

    降低開發成本

    提高生產力 降低開發成本

    移動開發技術的發展

    移動開發技術對比

    使用 React Native 取得的成果

    -節省成本

     - 1名前端 = 1 ios + 1 android 工程師

    -平台復用

      - 無縫遷移奉

    -性能體驗

      - 性能提升、原生體驗

    -快速迭代

      - 即時響應

      - 隨時發布

    解決安裝痛點

    組件化思路

    平台復用原則

      - 學習一次,隨處可用

      - 不追求完全抹平差異

      - 他們自己使用的經驗,可達到 70%~85% 代碼復用率

    覆用組件邏輯,區分組件樣式

    分離複雜組件差異

    調適踩坑

    Chrome 裡 Network 無法查看到Fetch請求

    因為 React 的Fetch請求是透過Polyfill來實現

    解決方法:

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

    第三方庫,Debug OK真機環境下crash

    依賴window atob,真機無瀏覽器環境

    熱更新方案

    移動項目寄宿選行移動項目寄

    移動項目寄宿選型宿選型

    B - 電商平台與解離架構 CMS 整合開發

    CMS 走向前後分離

    以內容驅動的時尚產業電子商務為例

    Ex: citiesocial (找好東西) 好東西賣場 Unipapa

    三個類別

    Standalone, CMS Extension, Saas(shopify)

    What is CMS

    多用途,資料,DB端

    0資料庫 1編輯人員介面 2網站介面構成 3前端設計表現與互動

    0-1 Headless CMS

    Decoupled CMS - 專注在編輯人員介面和資料庫上,提供 API 供前端實作 end user interface。

    CMS常見應用:

    MVC JS Frameworks, Mobile Apps, Staic page generator

    常見 Decoupled CMS選擇:

    Drupal 7 + Service, Drupal 8, WP + JSON, Contentful Cloud...

    SWAGGER (不同api溝通)

    Content Integration

    Shopify <-> Drupal <-> Customer

    Content Driven Commerce

    導流 無縫接軌 社群內容

    CMX(講師籌備中的研討會):

    cmxconf.tw

    電子商務

    導流

    無縫接軌

    社群內容

    評論不單是評論,其實是在蒐集使用者的喜好資料。

    Ref: cmxconf.tw

    C - 用 Arduino 與 three.js 實作互動式全息投影網頁

    14:20 - 15:00

    A - 技術趨動用戶體驗優化在趕集的實踐

      - 因 crash 丟失用戶數 / crash用戶總數 (大約會有1/3的用戶因此流失)

    B - 利用 Golang 架設 Line 機器人,作為網站的推廣大使

    Slide: http://goo.gl/IYv1BU 

    C - Web 終將統治世界?用 JavaScript 打造的影像處理軟體!

    起源

    HTML5 Canvas

    http://www.betterphoto.com/home.asp

    作品集

    程式架構 (講者的感覺,實際的 code 不見得如此)

    Chrome app 可以直接存取檔案

    廣告收益

    台灣如果是1,日本大概2~3,美國4~5

    做web很容易全球化,只要翻譯就好了

    Chrome app 即將於 2018 Phase out

    用 Google Drive API 取代,並加上可讓使用者下載的功能

    自行開發,沒用框架,只用到 JQuery (主要是 selector 比較好寫)

    Repeated line: Follow your heart (or feeling...)

    比較賺錢的反而是看起來爛的東西 (e.g. 心理測驗)

    15:30 - 16:10

    A - Universal Angular 2 in FinTech

    B - 如何透過語意網路與使用者行為優化使用者經驗

    Slides: https://goo.gl/cZMf6C

    透過語意分析知道人民的想法

    也可以透過上一場的Bot做進一步的應用

    參考資料

    JSON-LD http://json-ld.org/

    Struture Data Plan https://schema.org/

    結構化資料驗證工具 https://search.google.com/structured-data/testing-tool

    C - 無痛網站自動化測試

    http://goo.gl/mp0NbA

    https://github.com/alincode/modern-web-2016-e2etest

    SDET(Software Design Engineer in Test) - 設計測試流程、調校測試流程

    Selenium 比較複雜,所以選用了框架 - WebDriverIO

    Chimp (另一個 tool) 可以做 hot reload,可以簡化測試流程。

    編寫前端測試時,愈省愈好!

    建構測試環境

    WebDriverIO 語法支援 jquery selector

    16:20 - 17:00

    A - 移動娛樂直播下監控與極限優化

    社交直播

    優化

    1. 明確的方案適用場景
    2. 對優化方案深入論證
    1. 避免過度優化

    web業務對優化方案選擇的影響

    實踐

    產品不能一味的放棄對低端機用戶的支持,對低端機用戶採取適當的降級

    圖片資源優化

  • 直撥優化 
  • ####  GOP (Good Of Picture)

  •  錄播優化
  • - 動態調整 GOP

    B - Modern HTML Email Development

    Slides: https://speakerdeck.com/othree/modern-html-email-development (by @lindsayrain)

    講師愛用帳號:othree

    speakerdeck.com/othree

    github.com/othree

    今天內容: 

    現況:

    資源:

    工具:

    C - Hexo 開發歷程

    選這堂課是不歸路,真後悔!!