FEDC 2018 Front-End Workshop

FEDC 2018 Front-End Workshop

Front-End x Design Conference 不藏私推薦的前端工作坊

 

上午場
AMP 的魔法:做的時候幹聲連連,做完之後讚聲連連

活動時間

2018/07/15 09:00-12:00

活動地點

Appworks School

講師及議程資訊

Section 1 ( 30-40 分鐘 )
周鴻仁 Eric Chou
周鴻仁 Eric Chou
Google 資深行動技術顧問

Google 亞太區行動技術合作顧問 ( Mobile Solutions Consulting, MSC ) 團隊一員。

主要執掌為利用 Google 所推廣的技術( 如 PWA、AMP,以及 Firebase )提供客製化的解決方案,協助台灣、香港和東南亞的策略夥伴在行動事業上 ( mApps & mSite ) 的發展。

天下武功, 唯快不破

大家都想要寫出很快的網頁,但到底怎麼樣才能稱作「快」?

關於 AMP 的鄉野傳聞

AMP 上線後的優缺點每個人講的都不同,讓 Eric 幫你一次釋疑。

AMP 元件二三事

AMP 元件 ( AMP Components ) 是 AMP 網頁的基底,這個單元將為您介紹較常見、好用卻容易被忽略的元件。

AMP? PWA? 還是 PWAMP?

你一定聽過 PWA ( Progressive Web Apps ),但它到底跟 AMP 有什麼不同?

老闆叫我同時搞定,這是有可能的嗎?

Section 2 ( 80 分鐘 )
許承德 Ted
許承德 Ted
第一網站 前端攻城獅

喜愛評估新技術的優劣與背後的原理並將其用到產品上,因為工作性質對 SEO 略懂略懂。

也先說一下 AMP 不會影響 Google SEO page ranking,所以也不要抱持著想提升 SEO ranking 的心態來學習喔 XD

AMP 好嗎?好在哪裡?不好嗎?不好在哪裡?帶大家徹底了解 AMP。

上線就沒事了嗎?錯!它時時刻刻有新體驗與新東西!

搶先體驗踩雷大分享,讓大家了解事前準備與事後維護。

什麼樣的產品適合 AMP?

優異的效能:大量圖片的網站,所有的 lazyload AMP 都幫你做好了!

導入 AMP 之前需要做的心理建設

一行 js 都不能讓你寫,很多事情你需要依靠的是 server side render 來處理好,並且有很大的可能要去請後端為 AMP 修正 API 的資料格式

什麼?CSS 只能寫 50k!

AMP 頁面上線後需要注意的事情

務必上去 search console 看有沒有錯誤頁面出現,修正完然後呢?

那些年我們踩過的雷

Section 3 ( 30 分鐘 )
吳自勝 Mark Wu
吳自勝 Mark Wu
行動拍拍賣科技 前端工程師 / f2e.tw 工作人員

在 2017 年一月嘗試做出第一個通過驗證的 AMP 頁面後,體驗了 AMP 的速度就回不去了。

2017 年底跟主管提議在即將上線的電商產品導入 AMP,接著就是一連串在一行 JS 都不能寫的情況下,用 Hack 的心態實現了所有的互動功能。

AMP 怎麼做出複雜的互動效果

alert、confirm 這種類似 dialog 效果,AMP 是沒有的,該怎麼做到?

別懷疑,有種 Hack 的感覺是對的

如何做出一個可以增減的購物車?UI 行為搭配 API 去組合出來。

 

下午場
一次搞懂 GraphQL 基本應用與未來潛力

活動時間

2018/07/15 13:00-16:00

活動地點

Appworks School

講師及議程資訊

Jeremy Lu
Jeremy Lu
技術顧問 / FullStackRocks 講師 / Reactjs.tw 社團管理員

現於美國擔任技術顧問,協助客戶組建開發團隊、教育訓練、導入現代化開發流程與確保程式品質,主要服務對象為企業與新創公司。

同時在台灣主持 FullStackRocks.com 提供專業教育訓練,持續將北美最新技術訊息帶回與本地開發者共享。

目前也是 Facebook Reactjs.tw 社團共同管理員。

GraphQL 是 facebook 推出的資料存取套件,功能類似 REST API,但解決它大部份缺點,例如多層次資料可透過單個請求一次取回,而不像以往 REST 需發出多次請求。這代表存取資料速度更快,節省更多頻寬,用戶體驗也更好。

本課程透過親手實作一個小型 react app 來瞭解如何透過熟悉的的元件式語法操作 GraphQL 後台存取資料與完成畫面,課程範例只需透過瀏覽器與線上工具即可完成,不需安裝任何程式,讓你可專注在學習知識本身,而非手忙腳亂的浪費時間設定環境。

建議需有基礎 react 知識較適合參與本課程。

GraphQL 介紹

GraphQL 是什麼? / GraphQL 基本功能 / GraphQL 進階功能 / GraphQL 應用方式

GraphQL 語法

基礎文法介紹 / 使用 GraphiQL 工具

範例目標

實作一個 master / detail 程式

線上開發工具

client / server

react 基本概念

container/presentation component 概念

瞭解 Higher Order Component (HOC) 用途

瞭解 HOC 搭配 renderProps 的應用

GraphQL 基本概念

三種基本操作模式:query / mutation / subscription

差別在於可一次撈回所有需要資料,不需分多趟

認識 Apollo Client

設定方式

範例製作

<Query> 操作 / <Mutation> 操作

GraphQL 進階應用

local state management / REST API

 

購票資訊

  • 一般票 $3,000

    獨立報名參加,僅報名工作坊者無法參加 FEDC 相關議程。

  • FEDC 前端 VIP 票 FREE

    FEDC 2018 購買 前端 VIP 票 的會眾,可以透過邀請碼免費擇一( 上午場或下午場 )參加工作坊。

    2018/05/05 發放第一波邀請碼、2018/05/25 發放第二波邀請碼、2018/06/20 發放第三波邀請碼。

    請於 2018/06/21 12:00 前使用邀請碼完成報名,若未前往報名視同放棄參加工作坊。

Front-End Developers Taiwan

大會保有活動調整的權利,如議題或講者異動,將不另行通知。

AppWorks School / 台北市信義區基隆路一段 178 號

Event Tickets

Ticket Type Sale Period Price
一般票 (上午場) 2018/06/05 13:00(+0800) ~ 2018/07/08 12:00(+0800) End of Sale
  • TWD$3,000
一般票 (下午場) 2018/06/05 13:00(+0800) ~ 2018/07/08 12:00(+0800) End of Sale
  • TWD$3,000
FEDC 前端 VIP 票 (上午場) 2018/05/21 13:00(+0800) ~ 2018/06/21 12:00(+0800) End of Sale
  • Free
FEDC 前端 VIP 票 (下午場) 2018/05/21 13:00(+0800) ~ 2018/06/21 12:00(+0800) End of Sale
  • Free
贊助商優惠票 (上午場) 2018/07/01 13:00(+0800) ~ 2018/07/07 12:00(+0800) End of Sale
  • TWD$2,000
贊助商優惠票 (下午場) 2018/07/01 13:00(+0800) ~ 2018/07/07 12:00(+0800) End of Sale
  • TWD$2,000
Next Step