How to transter form Front-end developer to Client-side developer

最近在準備整理該如何教一位 Front-end developer 快速上手成為一位 Android/iOS Developer,以下整理個幾個同事問我的問題:

記憶體管理

但是 objective-c arc/java gc/ swift 雖然看起來差不多(不需要去處理 retain count/ pointer),但還是有很多最佳實踐方式不同。

看的到,选不到

在web上只要看得到的元素都可以用 selector 找到然後修改,在 native 上卻是要找到相對應的記憶體才可以修改,不管是 xcode 還是 android studio 之類的 IDE 對這方面其實都有很強大的索引功能,只是需要花點時間習慣。

档案碎片化,找不到到你是哪個檔案

一般 web 開發可能全部寫在一個檔案或分成幾個 js 載入,看先後順序就知道能不能用,native 上使用的語言都比起 js 看起來更結構化,如果習慣 AMD 架構的 js 可以更快上手。


HTML/CSS/JS 好像被組合起來了,想要調整樣式找不到位置

native 所提供的 SDK UI 組件可以看做是 web component,不論在 iOS, android 都有提供大多數基礎的 UI 組件,但這些組件也都會和原本系統的 UI 樣式相同,因次該如何 hack 他就會成了你非常常去查詢的問題,大多數原生的組件都有提供非常可靠的客製化功能,遠遠比起自己重寫可靠。


不知道該從哪裡切入?

這問題應該是最常聽到,就如同作事一樣,如果沒有目標,作起事來完全沒效率,關於這點目前是參考 Mozilla 相同的作法,每個版本都會有些小 bug,小如圖片放錯、顏色調整,這類的 bug 就很適合給新手來切入,順便在了解過程中就一併開始看架構,就像寫書法一樣,在開始創作前肯定有臨摹的階段。


環境、環境、環境

web 算是個相對成熟的架構,對前端來說不論你用 nginx, apache, nodejs, python, ruby, go 都可以很方便的幫你起一個 server 來開始工作,甚至只要有瀏覽器就可以馬上開始工作,環境這塊還是建議交給專業的來,請專業的人先幫你配置好,或有文件可以參考來靠自己建立起來,這就依賴時間緊迫程度來變動,簡單還是一句話「讓專業的來」。


專業分工

我認為大多數的前端都是對於畫面有一定程度的美感,對細節體驗有一定程度的要求,尤其是有「圖層」的觀念,從這方面出發我認為陣痛期是最短的,因為你負責的還是 UI 相關的事,底層的事可以讓原本熟悉框架的專業人士來負責,一來有成就感(作完馬上可以看到畫面,別再老是看 Hello world!),二來在前端的追求細節精神可以連貫下去。如果不小心寫出興趣還可以往圖學發展XD


Multiple thread

這就牽涉到語言的特性,需要搞清楚點觀念,只要作過 UI 的都知道,main thread 絕對不要處理任何會卡住的事情,任何 http request, 大量運算處理都要做 async 處理,這道理就像你做一個 web application 但是你絕對不會等到所有東西都載入完成後才出現畫面。



最後我想要說的是,最近身邊、老闆總是在談 native 吃掉 web 這回事,我本身是完全不認同,web 不會消失,市場也不會縮減,目前唯一可以跨平台的方案就是 web ,只是他在手機上的方式還不比在 pc 上成熟,效率上無法跟 native 相比,我認為最大原因就是歷史包袱,ios 只需要考慮在 iphone 的使用狀況,不需要考慮在 android, windows phone, browser 上跑起來的狀況,自然可以效率高許多,就像一把瑞士刀肯定不比菜刀好切菜。

多學一種技能也是挺有趣的,可以讓你有不同觀點來切入一件事情,思考上也可以更靈活,在我看來換個語言、平台都是差不多的,就像你會用中文罵「幹」會用英文罵「Fuck」一樣,沒什麼了不起,熟能生巧罷了。多學一點對自己肯定不會吃虧的,如果真的不知道該從哪種語言、平台開始,就找的自己看順眼喜歡的吧,我相信再過不久前端(Front-end) 就會變為客戶端(Client) 或終端工程師跑出來,把控這與使用者接觸的最後一哩路。

html5 video player full screen issues

這問題被問許多次,就是 iPhone/iPad 上的影片是不是可以不要全畫面播放,這問題其實官方已經寫的很清楚,以下節錄至 Safari developer

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

Note: Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later, on all devices.

最後這段重點就是,為了給小畫面最好的瀏覽品質,所以在 iphone 使用 mobile safari 或 webview(APP 中) 會用全畫面播放,而 iPad 因為畫面夠大,所以可以提供使用者/開發者選擇是否全畫面播放。

但是在 App 中還是有例外,因為小畫面無法非全畫面播放這件事情在 iOS SDK 中是一個參數,可以提供給開發者修改,在 webview 可以修改「allowsInlineMediaPlayback」參數,預設 iPhone 設定為「NO」,也就是強制播放影片時都是全畫面播放,如果設定為「YES」就可以在 webview 中直接播放影片,交給開發者自行配置。

相關連接 http://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

iOS AFNetworking error 1005

iOS AFNetworking error 1005

Error Domain=NSURLErrorDomain Code=–1005 “The network connection was lost.”

When you got this message can restart your simulator to solve this problem.