1.8K Followers
·
Follow

Image for post
Image for post
JS 開發者熟悉的 NPM 最對味

這兩年來 LIFF 的推出,啟發了許多開發者,在原有的 Chatbot 對話式框架之外,可以透過 WebVIew 加入更多有趣的互動。

值得開心的是,LINE 的開發團隊也一直在傾聽開發社群的反饋,持續做出產品上的改善之外,也針對 DX (開發者體驗)有了很多增強。

LIFF 推出 NPM 可以安裝的 SDK

Image for post
Image for post
@line/liff on NPM

在今天 LINE 正式宣佈推出了 LIFF 的 NPM SDK,讓開發者可以透過 NPM 的方式安裝、引入 LIFF 的相關功能。

相較於過去需要透過 CDN 的方式載入,用 NPM SDK 有諸多優點:

  1. 在開發編輯過程當中,也可以得到自動補完等(auto-complete)等功能
  2. 與其他專案相依套件一同用 packages.json 管理版本
  3. 可以與 JavaScript 的打包(bundle)工具有更好的整合
  4. 呈上,也就可以將 LIFF SDK 與自己的程式碼邏輯做成一包,加快網頁前端讀取速度

操作與 API 介面的部分則是與過去相同,一樣可以參考同一份文件API 說明

注意:liff 跟 @line/liff 是不同的

要特別注意的是,在 NPM 上有另外一個同名 liff 套件,並非這次推出的 SDK,而是由社群維護的 CLI 工具,方便開發者可以在 Shell 下調整 LIFF 的設定。

TypeScript 的定義也同步推出!

Image for post
Image for post
這個文件與自動補完真是太舒適了!

LINE 官方的 node.js SDK 中可以看到官方對於 TypeScript 的積極支援,所以這次在 NPM 版的 SDK 當中也不意外地支援了 TypeScript 的型別定義。

這個是我個人最期待的部分,因為就算在專案當中不使用 TypeScript,只是用一般的 JavaScript 開發,有了 TS 的型別定義,在 Visual Studio Code 等編輯器當中,就可以有如上截圖般的文件與型別提示,開發起 LIFF 就更方便容易了!

馬上試試看吧!

個人目前已經著手將專案的 LIFF SDK 進行轉移,也推薦各位可以嘗試看看!有任何的使用上的問題,也歡迎留言與我交流討論。


而當代軟體開發中,使用開放原始碼(Open Source)的專案已經成為必須,然而我們可以發現,多數的開放原始碼專案都是由歐美的公司如 Google、Facebook 等主導,很少是來自亞洲的企業。

在這次的 LINE Developer Day 2019 中,便有一個關於 LINE 工程師與開源文化的分享,讓我特別感到興趣:

What’s happening at LINE developer culture with open source?

Seoyeon Lee — LINE Plus Developer Relations Open source manager

企業要擁抱開源文化的困難

Image for post
Image for post
開放原始碼要考慮的事情很多

雖然多數個人開發者已經相當熟悉使用開源軟體,然而對於企業而言,要將公司內部的軟體開源,其實牽涉到很多商業問題,包含:

  • 專案命名及商標的使用
  • 資訊安全問題
  • 要使用什麼授權開放
  • 文件要用什麼語言及如何維護
  • 如何跟外部開發者合作並進行管理

即便如 Facebook 如此擁抱開源的企業,也仍然因為 React 及相關專案的授權問題被社群大幅抨擊,而完全以開放原始碼為基礎的企業 MongoDB 也在去年因為授權問題上了新聞版面

但仍持續積極開源

雖然有上述等等的困難,但 LINE 仍然相當積極的將自家專案以開源形式釋出,在這次 LINE DevDay 分享當中,就有數個議程的分享的內部工程經驗,最終解決方案已開源放在 GitHub 釋出!

以下列舉幾個我在議程當中有聽到的:

  • lich — 因應 LINE Android app 從 RxJava 2 轉換到 Kotlin Coroutine 所產生的一些公用函式
  • feature-flag-android — LINE Android 團隊釋出的套件,用來快速開發、測試大量功能
  • conflr — 資料科學團隊釋出的套件,讓 R Markdown 的內容可以方便轉換成 Confluence 的 Wiki 格式
Image for post
Image for post
除了使用專案,也回饋專案

除了開源自家軟體之外,LINE 團隊也積極參與外部開源專案,在 Zipkin、Presto 和 Gerrit 等專案當中,都可以看到 LINE 工程師的貢獻。

連 Slack 也都愛用的 LINE 開源函式庫

Image for post
Image for post
今年 Slack 團隊於 gRPC conf 分享使用 LINE 的開源專案 Armeria

在 LINE 的眾多開源項目之中,最著名的莫非是 Armeria 這套 Java 函式庫,提供了非同步的 RPC/REST 的呼叫功能,此一函式庫甚至也受到 Slack 使用及公開推薦,而今年的 LINE DevDay 中也邀請到 Slack 工程團隊來分享使用心得

結論:擁抱開源是個好主意

雖然 LINE 初期也是有很多工程師們會擔心,將自己的程式碼開放出來給大家看很有壓力,或是貢獻到其他專案擔心會被拒絕等等,但最終都同意這也是從社群網友當中學到更多的好機會!包含怎麼樣子寫出更好的程式碼、如何去描述、說服所要做的變更,以及從互動中學習不同公司的工程文化都讓團隊成長不少。

因應著公司內部對於開源文化的重視,甚至也在近期開始招募開放原始碼經理的職位,有興趣的人或許也可以挑戰試試看。


Image for post
Image for post
LIFF v2 強勢登場!

在 LINE 的開發者產品當中,我個人最感興趣的不外乎就是 LIFF 了,讓開發者可以在聊天界面當中嵌入網頁進行更複雜的 UI 互動,達成很多傳統 Chatbot 介面中無法實現的事情。

而在今年 LINE Developer Day 2019 當中,當然也是有大量相關的議程,甚至還準備了實體攤位與大家交流,就讓我們一起來看看今年 LIFF 有什麼新發展!

以下是這次 LIFF 相關演講議程以及與 LIFF 攤位交流後的各項心得彙整:

LIFF v2, the latest Webview SDK lets you leverage LINE

Takuya Okamoto — LINE Kyoto Developer Division, UIT Team Frontend Engineer

What’s New in LINE Front-end Framework

Daisuke Shimizu — LINE UIT Department1 Product Manager / Front-end Engineer

LIFF 是什麼?

Image for post
Image for post
LIFF 有三種大小樣式

LINE Front-end Framework 簡稱 LIFF 框架,讓開發者可以建立輕量型的應用在對話視窗當中,並且提供取得使用者基本資訊、或是發送訊息的功能。

Image for post
Image for post
LIFF 推出一年半後有了 LIFF v2 大改版

這過去推出的這一年半之中,也有各式各樣的應用,包含遊戲、付款、付款跟電商等。

Image for post
Image for post
日本星巴克的隨行卡便是透過 LIFF(右二)

LIFF v1 為人詬病的問題

然而在 LIFF 剛推出的第一版,有不少小毛病是讓開發者和使用者都感到困擾的:

  • 只能透過 LINE deeplink 開啟 LIFF,若使用者沒有安裝 LINE 或者是在電腦就無法點擊連結
  • 在 LINE WebView 下幾乎沒辦法用常見的瀏覽器除錯工具來開發,只能藉用一些第三方套件

LIFF v2 全新登場!

於是在今年的 10/16 時,LINE 正式宣佈推出了 LIFF v2 版本,針對以上問題都有了具體的改善!

  • 可以透過 https://liff.line.me/{liffid} 這樣的網址來分享 LIFF,在手機跟電腦上都可以正常瀏覽
  • 呈上,所以不需要受困於 LINE WebView 的限制,可以使用各式瀏覽器來開發除錯
Image for post
Image for post
一個網址,各種情境都支援

除此之外,更有新功能:

  • 可以在 LIFF 當中開啟 LINE 掃描 QR Code…

About

Richard Lee

Cofounder & CTO of @icooktw. LINE API Expert. #ForbesU30Asia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store