App 工程師有時候也得要點一下前端開發技能。

1. 給 iOS ⼯工程師的
Vue.js 開發
zonble

2. 最近我在做網站
• 因為我的 iOS App ⼀一直被蘋果退件，總點做點別的
• iOS ⼯工程師最好還是學⼀一些 Web 開發技能
• iOS 不不會被 Android 取代，但是 Native App 很有可能被
Web App 取代
• 做了了 Web 版本，包在 Electron 裡頭，等於做好了了所有的
Desktop 版本

4. 連上去就直接聽 KKBOX 歌單
https://www.kube-app.com

6. 成果

7. 成果

8. SPA?

9. 起初 Web 是很單純的
• 瀏覽器器就是個「可以透過網路路抓取、閱讀某種可以互相連
結的⽂文件」的軟體
• 瀏覽器器對 Web Server 發送 HTTP 連線，取得 HTML ⽂文件
• 瀏覽器器將 HTML ⽂文件直譯成 DOM
• 瀏覽器器將 DOM 渲染成在螢幕上顯示的結果

10. Server Side 動態網⾴頁
• WWW Server 接受外部傳⼊入的參參數數，根據參參數數，回傳不不同
的 HTML ⽂文件
• 可以⽤用 GET、POST…等⽅方式傳⼊入參參數數
• ASP、PHP…還有⽬目前各種 Web Servre
Framework（Rails、Laravel、Django）都在做這種事情

11. 但是偏偏有⼈人想在⽂文件格式裡頭搞
應⽤用程式開發
• 最早的作法是，在 HTML 裡頭挖⼀一塊可以塞⼊入執⾏行行 Native
Code 的 drawing context，讓瀏覽器器 Plug-in 渲染內容
• Java Applet、ActiveX、QuickTime…最後 Flash 稱霸了了將
近⼗十年年的時間
• 但是在 2007 年年，有⼀一⽀支⼿手機問世，徹底打倒了了 Flash

13. 動態改變 DOM
• DOM 的內容除了了可以從 HTML 當中產⽣生外，也可以由
JavaScript 動態修改（getElementById、addChild…）
• JavaScript ⾃自⼰己也可以發送網路路連線（AJAX），然後⽤用抓
到的資料料改變⾴頁⾯面中部分的資料料
• 最後 DOM 都可能不不是從 HTML 產⽣生，⽽而都是⽤用
JavaScript 產⽣生的，只⽤用 JS 與 DOM 產⽣生的應⽤用，稱為
Single Page Application（SPA）

14. 這年年頭的 SPA
• 你可能不不是直接去寫直接讓瀏覽器器閱讀的 HTML 與 JS
• ⽽而是先寫某個其他格式的東⻄西，然後由特殊⼯工具打包成最
後發⾏行行的版本
• 瀏覽器器不不認得 ES6、TypeScript…所以⽤用 Babel 翻譯成瀏覽
器器認得的 JS
• 然後把分散的 JS、Asset…透過 Web Pack 打包成⼀一⼤大包
JS

15. 對 iOS ⼯工程師來來說
• ES6、TypeScript -> JS 可以想成
• Objective-C -> C -> LLVM Bitcode -> Machine Code
• 打包 Asset
• xib -> nib、storyboard -> storyboardc、xcassets-
>Assets.car

16. VUE.js

17. 我是從這裡開始的
https://github.com/
SimulatedGREG/electron-vue

18. Vue.js 的檔案組成
• ⼀一個 Vue.js 專案，是由很多個 .vue 檔案組成的
• 每個 .vue 檔案可以想像成類類似 UIKit 的 View Controller 的
東⻄西，每個 .vue 檔案掌控⼀一部分的 DOM 元件與邏輯

19. ⼀一個 .vue 檔案
// 這部份像是 .xib 檔案
<template>
</template>
<style>
</style>
// 這部份像是你的 View Controller
<script>
</script>

20. <script>
export default {
name: 'my-view',
data () { // private properties
return {
'data_key': 'data_value'
}
}
props: ['prop_key'], // public properties
watch: { // KVO
data_key: () => {
}
},
created: () => { // init
}.
methods () { // private methods
login() {
}
},
computed: { // 晚點說
}
}
</script>

21. <template>
<div>
<p> {{ data_key }} </p>
<button @click=“login”>Action</button>
</div>
</template>

22. // 另外⼀一個檔案想要使⽤用 my-view
<template>
<my-view></my-view>
</template>
<script>
import MyView from ‘MyView.vue’
export default {
components: {MyView}
}
</script>

23. // 另外⼀一個檔案想要使⽤用 my-view
// 綁定 prop
<template>
<my-view v-bind:prop_key=“prop_value”></my-
view>
</template>

24. // iOS 的 view state pattern？
// 可以使⽤用 v-if 搭配 data
<template>
<loading v-if=“state==‘loading’”><loading>
<error v-if=“state==‘error’”><error>
<div v-if=“state==‘completed’”></div>
</template>
<script>
import Loading from ‘Loading.vue’
import Error from ‘Error.vue’
export default {
components: {Loading, Error},
data: {
return {
state: ‘completed’
}
}
}
</script>

25. // 呼叫 API
<script>
export default {
…
methods {
callAPI() { axios.get(‘https://..’).then(
data => { // 要⽤用 nextTick
this.$nextTick(
() => { this.state = ‘completed’ }
)})
}
}
}
</script>

26. // Collection View 與 Table View?
// 可以使⽤用 v-for
<template>
<div v-for=“item in items”>
</div>
</template>
<script>
export default {
data: {
return {
items: []
}
}
}
</script>

27. 跨 Vue 檔案之間的溝通？
• 要⽤用 Vuex
• Vuex 是⼀一個超⼤大的共⽤用物件，每個 .vue 檔案，可以⽤用
this.$store 拿到這個物件
• 所有 .vue 檔案都透過 this.
$store.dispatch(‘function_name’) 改變 vuex 的狀狀態
• vuex 被修改之後，⽤用到某個共⽤用狀狀態的 .vue，會透過
computed 收到修改

28. ⽤用⼒力力給他跑下去
• npm install
• npm run dev
• npm run build // 編譯 electron 版本
• npm run build:web // 編譯網⾴頁版

29. ⼀一些對應
• UITableView -> HTML Table
• UICollectionView -> CSS Grid
• UINavigationController、UITabBarController -> Route
View
• NSURLSession -> XHR（XMLHttpRequests）、Axois…
• NSUserDefaults -> Local Storage

30. iOS ⼯工程師的進⼊入障礙

31. JavaScript 的⾏行行為
跟你想的完全不不⼀一樣
• JS 的 for..in 不不是給 Array ⽤用的，⽽而是對所有物件都可以
⽤用，是列列舉某個物件的所有 property…
• JS 的 let 是產⽣生 block scope 的變數數，var 是產⽣生 function
scope 的變數數…

32. CORS
• Cross-Origin Resource Sharing
• 簡單講，寫 app 可以直接打 API，但是網⾴頁上⾯面預設不不允
許抓取跟你不不在同⼀一個網域的 API 的資料料
• 除⾮非對⽅方 API server 帶了了像「Access-Control-Allow-
Origin: *」的 HTTP Header，即使有，遇到了了 302
redirect，也⼀一樣抓不不到
• 所以就算你寫⼀一個 JS App，但是 API 跟你不不在同⼀一個網
域，你還是往往得準備⼀一台 Server 幫你代打 API

33. 學了了 Vue，你也可以拿來來
寫 iOS app

34. 眉眉⻆角⻆角

35. Safari 瀏覽器器的問題
<template>
// ⽤用 anchor 會讓 Safari 爛爛掉，但是其他瀏覽器器沒事
<a @click=“doSomething”>Test</a>
// 可以改⽤用 span
<span @click=“doSomething”>Test</span>
</template>

36. ⽀支援可以變成⼿手機桌⾯面圖示的
Web App
• iOS 要加⼊入 apple-touch-icon metatag
• Android 要寫個 Manifest
• Firefox top site 需要個 <link rel=“icon” href=“…”>

37. iPhone X 的 CSS =_=
• https://webkit.org/blog/7929/designing-websites-for-
iphone-x/
• 要在 HTML 加⼊入 <meta name='viewport' content='initial-
scale=1, viewport-fit=cover’> 才能使⽤用 iPhone X 全螢幕
• 要在 CSS 使⽤用 env(safe-area-inset-left) …等，⽀支援 Safe
Area，如 margin-left: env(safe-area-inset-left)
• margin-left: calc(env(safe-area-inset-left) + 20px)

38. SEO
• 純粹⽤用 JS 產⽣生出 DOM，沒有 HTML，搜尋引擎認不不得
• 搜尋引擎找不不到的網站沒⼈人來來
• 所以你還是得做⼀一個讓搜尋引擎抓取資料料的網站