用 React Native 開發鉅亨網 App 的經驗分享

React Native 讓前端工程師可以站在巨人的肩膀上更快速的開發,雖然到目前為止在實作中還是有許多地雷,但相信在 Open Source 的基礎下會更加的茁壯,若您在開發的 App 功能都沒有跳脫 UI Explorer 的範例,相信要用 React Native 來開發可以相對的降低開發的時間與成本。
評論
評論

作者為 Bingo Yang,一位在前端打滾十年以上,曾任 UrMap、HTC 前端工程師,目前在鉅亨網服務。 本文 獲作者授權轉載。

身為一個 Frontend Developer,在看到 React Native 問世之後,一直對 React Native 很有興趣,最近終於有機會可以碰到了,也因此才有這篇  勸世文 心得。本文主要想記錄一下開發到目前為止所踩過的坑,為還在 Survey 技術的團隊開路。

適合用 React Native 開發嗎?

在接觸 React Native 之前,其實我們對開發 App 是還沒有信心的,一來這東西太新,二來我們也沒有實際開發過 App 的經驗,很多 UI 效果都要 Survey 才知道到底做不做的到,就算 Native Support 也不知道 React Native 有沒有 Support?一直到我們真的把 App 上架之後,才覺得比較有一點信心。但在開始之前,先確認一下是否有對 React Native 誤解:

不是 Write once, run everywhere,而是 Learn once, write anywhere

在大多數的情況下,你可以讓 Android / iOS 共用同一份 code,但這不代表你可以爽爽的不管平台問題就可以實作出功能。兩個平台畢竟還是有一些不樣的 user experience,例如 iPhone 沒有 back button,所以你需要為了 Android 多處理 back button 的 behavior(BackAndroid)。也因此在程式裡頭還是免不了得判斷 Platform

例如:

const styles = StyleSheet.create({
height: (Platform.OS === ‘ios') ? 200 : 100,
});

不過很方便的地方在於因為 React 本身就是個 View 的 Engine,因此要將 Component 拆開是輕而易舉的事情,而 React Native 可以讓你很輕鬆的將程式分開。

例如原本我們有一隻 NewsDetailPagger.js 的 component,但由於在實作上 Android 和 iOS 上面的行為遇到不同的問題。後來就將這個 component 拆成:

  • NewsDetailPagger.android.js
  • NewsDetailPagger.ios.js

就可以讓兩種平台在 compile 時就只 build 相對應的程式,也許之後也會有:

  • NewsDetailPagger.ms.js
  • NewsDetailPagger.tizen.js

註:Facebook’s React Native gets backing from Microsoft and Samsung

總之,用 React Native 開發也是得考慮不同 platform 的問題,雖然 React Native 官方已經解決大多數的繁瑣的部分,但你仍須思考不同平台是否適合同一套 UI / 邏輯。

React Native 不是 Webview

不要以為你原本就用 React 開發行動版網站之後就可以移植到 React Native, 基本上可共用的部分可能只有 Pure 的商業邏輯,跟 View 有關的部分都會需要重寫。

React Native 的優點

整理一下用 React Native 開發的優點:

1. Debug 非常方便:

基本上如果只是 View 的 update,React Native 都已經做好 hot reload 了,只要程式碼修改就會局部 rerender。

2. React 大幅降低學習成本

如果你原本就熟悉 React 的開發流程,從 React 跳進 React Native 很快,因為原本的經驗是可以繼續累積的,包含 React, Flux, Redux, 各種 React performance 調效的經驗都是有用的。

3. 感受不到跟寫 Web 有太大的差別

一開始最讓我驚喜的其實是用 React Native 開發我真的不覺得我在開發 App,反而就像是多了一種特異的瀏覽器而已,而且 debug 也是用熟悉的 console 在 debug。react-native-debugger 也可以看到 jsx 的 tree。

4. 專心寫你的商業邏輯

基本上 React Native 已經處理掉大部分的效能問題,例如 listView 已經處理了大量列表只會顯示使用者看到的部份而已。這讓開發者可以專注於產品功能的實現,不用花費太多心力在調整 UI 上的效能。

5. React Native 的生態圈非常完整

awesome-react-native 有整理了幾乎目前有的 resource ,包含教學,components 等等,看也看不完的東西。開源的世界就是這麼迷人,based on 全世界工程師的開發與回饋造就健壯的社群。

6. Frontend resource

藉由 React Native,自此前端工程師可以支援 App 的開發,開發 UI 上的經驗可以共用,對於組織內人力的配置也可以更加靈活彈性。

7. UI Explorer

UI Explorer 列出了幾乎所有 React Native 支援的 component 與範例,看 UIExplorer 有時比文件寫得更完整。

react-native 的缺點

雖然開發到現在覺得很滿意,不過還是得列一下缺點。

1. 掰咖的 style

React Native 用 javascript 來實現 css 的設計 (style),但並不是支援所有的屬性,例如 z-index (0.29 之後支援 ios)。

沒有 image-background,沒有 background-repeat 等等。不過雖然少了這些東西,大部分的需求還是可以想辦法實現的,也可以藉由 react-native-svg 做到很多漂亮的 UI。

2. 各種踩坑

一開始在用 navigator 時用了 NavigationExperimental,但由於是 experimental,每次 React Native 更新都有 API change,因此每次都要隨著更新。

像是這個新聞內頁左右翻動的功能,看似很簡單,但因為資料是動態的,所以嘗試了好幾種 pagger 的實作,最後是用 react-native-viewpager

3. 升級總是很痛苦

React Native 每兩週就會 realease 一個版本,這使得我們在開發到第一次上架成功之間就升級了無數次,第一個版本是 0.21,到目前為止已經是 0.30,中間有幾次升級是非常重大的更新,很多相依的 package 也要跟著更新才能順利更新上去。

小結

React Native 讓前端工程師可以站在巨人的肩膀上更快速的開發,雖然到目前為止在實作中還是有許多地雷,但相信在 Open Source 的基礎下會更加的茁壯,若您在開發的 App 功能都沒有跳脫 UI Explorer 的範例,相信要用 React Native 來開發可以相對的降低開發的時間與成本。最後,鉅亨網的前端團隊目前也在徵 資深前端開發者 喔!


資訊世代網紅當道,2022 你不可不知的《網紅行銷手冊》

亞洲最大網紅行銷平台 Partipost 彙整 2022《網紅行銷手冊》,內容源自過去數千檔網紅經驗,從口碑行銷、網紅 GPS、行銷心法,以及各大 NG 場景示範。擁有它讓你的網紅行銷事半功倍!
評論
Photo Credit:Partipost
評論

現今資訊爆炸的時代中,每個人一天會接觸近 40,000 個品牌、平均一分鐘會看到 2.5 個廣告內容,海量的訊息企圖抓住大家眼球,消費者該為誰停留?

根據 2022 年 Influencer Marketing Hub 最新調查指出,所有廣告管道中,高達 9 成企業相信「網紅行銷」具備強大效益、8 成企業每年編列網紅行銷相關預算。在這巨大商機下,大至制訂策略、挑選網紅,小至邀約與溝通,皆是品牌主與行銷人每天要面對的課題。亞洲最大網紅行銷平台 Partipost,彙整 5 國團隊、超過 3,000 檔網紅行銷執行經驗,分享其中的關鍵洞察!

明明都是「網紅」,他們到底有何不同?

Photo Credit:Partipost

從網紅行銷成為主流廣告模式後,「網紅」二字的定義也一直眾說紛紜,許多專家各持己見。Partipost 認為,可以從「行銷目的」去分辨其中差異,市場上不同網紅分別負責不同階段的行銷節點,大致上可以分成五類三區:

  1. 明星、大型網紅:公信力強、話題性高,適合作為品牌重點項目的曝光與宣傳。
  2. 微型網紅、奈米網紅:屬性定位明確,適合分眾溝通,由於內容更真實且親近粉絲,推薦用來助攻提升品牌的消費者好感度。
  3. KOC 關鍵意見消費者:你、我身邊的朋友,適合分享創意有趣的微型廣告內容。透過 KOC 宣傳能解決現今消費者對贊助廣告疲乏的困境,能有效匯聚話題與討論度。

現今 18 至 35 歲的新世代族群,因自媒體發達,對於資料來源的信賴已從傳統新聞媒體,轉移至社群口碑與親友推薦,有些網紅經營的自媒體也早已超越品牌官方的社群媒體。例如 Tesla 特斯拉品牌執行長 Elon Musk 的追蹤數已超越 Tesla 特斯拉近 10 倍,可見網紅口碑對年輕人的傳播,已展現巨大影響力。

行銷資源勻稱分配,「頭、胸、腰、足」缺一不可

Photo Credit:Partipost

Partipost 形容網紅行銷就像一個人,大型網紅為身體的頭部;微型網紅為胸部;奈米網紅為腰部,而最多的關鍵意見消費者(KOC)是支撐整體最重要的足部。過往許多品牌會把所有資源與預算投放在大型網紅上,這種方式有很高的機率會出現頭重腳輕的狀態,使得整體行銷體驗失衡。Partipost 建議,品牌可以透過「網紅混搭」方式達到最佳的口碑宣傳,進而提高網紅合作的整體效益。精確的內容與真實的使用感受,更能夠深入不同類型的同溫層引起話題,掌握網紅行銷的平衡,最終達到數萬筆的社群討論熱度!

網紅跟你想的不一樣!5 大要點讓合作更順暢

Photo Credit:Partipost

Partipost 也提及與網紅合作有「五大雷區」需避免誤觸。首先,必須了解「每個網紅吸引的受眾不一樣」,這就像找貝多芬或是畢卡索開直播拍賣一樣,有話題、有流量,不等於會買賣。接著是「合作檔期與內容需要再三確認」,因為網紅多數為斜槓,並非全職,因此手上肯定有許多案子同步進行。品牌應抱持著正式合作的心態看待網紅合作,臨時修正會帶給雙方困擾,且不利於後續的合作關係維護。

同時也需注意,活動成效並非唯一指標,行銷管道眾多,社群口碑僅是其中一環,如需大量曝光,也建議可以搭配聯播網等相關管道。最後,所有網紅產出的內容都是創作作品,不是免費的素材,如需使用必須要進一步確認授權與使用的時間,只要做到以上這些要點,在部署長期網紅行銷上會更加事半功倍!

數千檔網紅活動執行經驗,彙整出 2022《網紅行銷手冊》

從社群內容、廣告行銷到公關活動,品牌與網紅合作的每一步都至關重要,Partipost 擁有數千場的活動執行經驗、超過 80 萬筆的網紅資料庫,彙整出了最完整、系統的《網紅行銷手冊》。在品牌的每一個行銷節點中,提供相對的合作內容,選擇最適合自己的網紅宣傳方式。從前期的「口碑行銷 5T」、中期的「網紅 GPS」與「網紅行銷攻略」再到後期各大場景的「NG 示範」。藉由經驗的累積,協助品牌順利的完成每一個階段的行銷任務,不只將品牌社群價值最大化,更將同溫層的驚人傳播力發揮到極致,給予品牌更多重的選擇與服務。想了解完整內容,歡迎點我免費下載 2022《網紅行銷手冊》。

想知道更多品牌行銷的趨勢,歡迎點此閱讀更多資訊,或是免費下載 Partipost 2022 年《網紅行銷手冊》

本文章內容由「Partipost」提供,經關鍵評論網媒體集團廣編企劃編審。