来自远古时代的 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