來自遠古時代的 Kotlin 前端開發入門

在成爲一名不專業的 Android 開發以前, 作的是不專業的前端開發工做. 大體的工做就是寫點 Web 頁面, JS/CSS, 寫點 Spring 的 Servlet. 搞 Android 以後這塊就沒怎麼摸過了, 因此技術棧仍是很是古老的 jQuery + Spring + Velocity.

自從 IDEA 爸爸搞出了 Kotlin, 試了一下開發 iOS 很是崩潰. 但全棧之心蠢蠢欲動, 感受仍是能夠搞點事情. 因此就稍微揀了一下, 記錄下來供你們參考.

前端的組成部分

打開一個 HTML 頁面, 咱們一般能看到以下幾類元素.

DOM (頁面)

HTML 是各類 tag 的嵌套結構, 在根元素之下是 HEAD 和 BODY. BODY 裏面是頁面結構, 現代的 Web 開發一般不會直接把內容直接寫到 DOM 裏, 因此通常來講頁面裏只有結構, 沒有內容.

CSS

HEAD 裏面會有 style 和 xyz.css, 這類東西叫 CSS (層疊式樣式表), 用來控制內容的樣式/排版. 須要注意的是 CSS 對於元素的影響也是嵌套的, 能夠在 Chrome 的開發者工具中查看一個元素的樣式究竟受到哪些 CSS 的影響. CSS 的用法有兩種, 一種是在 tag 上引用 class: class="style1 style2", 另外一種是在 tag 上直接寫 style: style="xyz: abc, ijk: def".

JavaScript

如今好像流行放在 BODY 的最後面, 這裏就是小前端的邏輯. 若是把瀏覽器看成客戶端, DOM 是 Android 的 layout, CSS 是 Android 的 style, JavaScript 是 Android 的邏輯代碼.

遠古時代的前端開發技術

DOM

上文提到的 Velocity 就是能夠用來動態生成頁面的工具, 這類工具叫作模板引擎. 模板引擎容許開發人員定義一些變量, 在服務器返回頁面時它會把變量的值替換到模板中, 實現了同一份代碼顯示不一樣的內容, 好比: Hello, ${userName} 會跟不一樣的用戶打招呼.

CSS

最新的不太瞭解, 並且做爲一個開發人員其實也不太擅長樣式/排版的東西. 我建議你們看一下 BootStrap/中文版, 是 Twitter 的開發人員開源的前端開發框架, 在沒有 UI 的時候能夠用這個作出視覺上過得去的頁面.

響應式佈局 & 柵格系統

BootStrap 的一大特點是提供了支持響應式佈局的簡單方法, 被稱爲柵格系統.

響應式佈局的意思就是在不一樣屏幕寬度下同一套代碼樣式/排版不一樣. 能夠試一下官方樣例中的任何一個頁面, 嘗試改變屏幕寬度從顯示器大小到手機大小, 會看到神奇的效果.

BootStrap 把顯示寬度等分爲 12 份, 能夠經過 container + col 的 class 簡單的分割頁面, 並在各類分辨率下保證效果.

JavaScript

目前我用的比較熟的只有 jQuery 了. 雖然是一個遠古時代的庫, 但目前仍有大批用戶, 多是由於用起來簡單吧. 主要概念有:

1. selector. 能夠根據 id 或者 class 篩選 DOM 元素, 能夠理解爲 Android 的 findViewById. 拿到元素以後能夠填充內容/更改樣式/監聽事件等.
2. ajax. 中文翻譯忘了... 總之就是異步的向服務器發請求, 拿到數據以後部分刷新頁面, 這樣體驗比較好.

遠古時代 x Kotlin

DOM x Ktor x FreeMarker

Kotlin 出了一個官方的 Servlet 開發框架叫 Ktor. 和 Spring 對比之類的我就不作了, 不知道 Spring 發展到什麼程度了.

Ktor 的 Quick Start 裏使用的模板引擎是 FreeMarker, 簡單用的話和 Velocity 差很少, 我就沒有折騰直接用了. Ktor 也有對於 Velocity 的支持, 在新建 Ktor 項目(須要在 IDEA 中安裝 Ktor 的 plugin) 時可選.

附: FreeMarker API

Response

返回模板內容是一種 response, Ktor 還提供 responseText 以及 response(object), 後者會把 object 序列化爲 json 結構, 至關方便.

Routnig

Routing 是 Ktor 用來分發請求的機制. 任何一個來自客戶端的請求經過 router 分發到對應的代碼, 經過這樣的方式把相關的代碼聚到一塊兒, 把不相關的代碼分開. 在 Ktor 中沒有看到相似 Spring 中的 Controller 的概念(印象中 Spring 雖然也有路由的概念, 但代碼層面上是用 Controller 的).

routing {
    get("/") {
        call.respondText("Hello World!", ContentType.Text.Plain)
    }
}
複製代碼

靜態資源的 routing 形如:

...
    static("/static") {
        resources("static")
    }
...
複製代碼

沒有依賴注入

Ktor 目前沒有內置的依賴注入, 也就是說依賴須要顯式建立, 也許這也是爲何 Ktor 沒有 Controller 概念的緣由.

CSS 仍是 BootStrap

做爲一個沒有 UI 支持的開發人員, BootStrap 就是最好的選擇.

JavaScript x Kotlin

能用 Kotlin 寫 JS 解決了我對 JS 的大部分怨念, 雖然據說如今用 VSCode 開發 JS 也很爽.

Kotlin Call JS

Kotlin 提供了幾種調用 JS 的方法, 好比 js("java-script code"), 固然這不是一個好的方式.

還有 Dynamic Type, 能夠認爲是 JS 專用的, 變量聲明爲 dynamic 以後, 其後續調用都會返回 dynamic 類型, 相關代碼會原封不動的拷貝成 JS 代碼.

比較好方式是 external 修飾符. 使用 external 修飾符能夠把一個已有的 JS 方法/類聲明成 Kotlin 可檢查的類型, 好比: external fun alert(message: Any?): Unit 對應了一個瀏覽器自帶的 window.alert() 方法. 聲明上述 external 方法以後, 在 Kotlin 代碼裏能夠直接調用 alert()

經過 external 這種方式, Kotlin 能夠直接使用不少第三方的 JS 庫, 好比 jQuery. 使用方式是爲第三方 JS 庫生成一系列的 external, 被稱爲 header, 有點相似於使用第三方 C/C++ 庫時須要的頭文件. ts2kt 工具能夠作這個事情, Thanks TypeScript, 這個工具其實是把 TypeScript 的頭文件轉成了 Kotlin 的頭文件.

有了這個頭文件以後, 咱們就能夠直接在 Kotlin 代碼裏調 JS 了, 好比:

fun main(args: Array<String>) {
    jQuery("#clickMe").click {
        jQuery.get("/path", { data, textStatus, _ ->
            println("$textStatus")
        })
    }
}
複製代碼

附: jQuery API

後記

有了上述知識以後, 會寫 Kotlin 的你, 就能進行簡單的前端開發了, 也許你的某個想法能夠就此實現第一步.

Kotlin 有一個官方的 FullStack Demo, 使用的是 React 作前端, 若是你有興趣學點新技術的話也能夠試試.

@Uraka.Lee