Before becoming an unprofessional Android developer, I did unprofessional front-end development. The general work is to write some Web pages, JS/CSS, write some Spring Servlet. I haven’t touched that much since Android, so the tech stack is still very old jQuery + Spring + Velocity.

Ever since IDEA dad came up with Kotlin and tried iOS development it has crashed. But the heart of the whole stack is ready to move, and I feel that I can do something. So I picked it up a little and recorded it for your reference.

Components of the front end

When we open an HTML page, we usually see the following types of elements.

DOM (page)

HTML is a nested structure of various tags, with the HEAD and BODY below the root element. Inside the BODY is the page structure. Modern Web development usually does not write content directly into the DOM, so there is usually only structure in the page, but no content.

CSS

Inside the HEAD is style and XYZ. CSS, which is called CSS (Cascading style sheets) and controls the style/layout of the content. It is important to note that CSS influences elements are also nested. You can check out which CSS influences an element’s style in Chrome’s developer tools. The CSS can be used in either of two ways. One is to refer to class: class=”style1 style2″ in a tag, or to write style: style=”xyz: ABC, ijk: def” in a tag.

JavaScript

It seems to be popular to put it at the end of the BODY, where the logic of the little front end is. If the browser as a client, DOM is the Layout of Android, CSS is the style of Android, JavaScript is the logic code of Android.

Ancient front-end development techniques

DOM

Velocity is a tool that you can use to dynamically generate pages, called a templating engine. The template engine allows developers to define variables that are replaced by the template when the server returns the page. The same code displays different contents, such as Hello, ${userName}, and different users.

CSS

I don’t know much about the latest, and as a developer I’m not really good at styling/typography. I recommend taking a look at BootStrap/ Chinese, an open source front-end development framework for Twitter developers that can be used to create visually decent pages without a UI.

Responsive layout & Raster system

One of the features of BootStrap is that it provides a simple way to support responsive layout, called a grid system.

Responsive layout means that the same set of code styles/layouts vary across screen widths. Try any of the official sample pages and change the screen width from the size of your monitor to the size of your phone. You’ll see amazing results.

BootStrap divides the display width into 12 equal portions, allowing you to easily split the page using the Container + Col class and ensure that the page looks good in a variety of resolutions.

JavaScript

The only one I’m familiar with so far is jQuery. Although it is an ancient library, it still has a large number of users, probably because it is easy to use. The main concepts are:

  1. Selector. You can filter DOM elements by ID or class, which is the Android findViewById. Once you have the element, you can fill it in/change the style/listen for events, etc.
  2. Ajax. In short, the asynchronous request to the server, get the data after part of the page refresh, so that the experience is better.

Ancient times x Kotlin

DOM x Ktor x FreeMarker

Kotlin has produced an official Servlet development framework called Ktor. I’m not going to do comparisons with Spring or anything like that, I don’t know where Spring is.

Ktor’s Quick Start uses FreeMarker as a template engine, which is almost the same as Velocity. Ktor also has support for Velocity, which is optional when creating a new Ktor project that needs to install the Ktor plugin in IDEA.

Attachment: a FreeMarker API

Response

The return template content is a response, and Ktor also provides responseText and Response (object), which conveniently serializes the object into a JSON structure.

Routnig

Routing is the mechanism Ktor uses to distribute requests. Any request from a client is routed through the Router to the corresponding code, thus grouping related code together and separating unrelated code. I don’t see anything like the concept of Controller in Spring in Ktor (although Spring does have the concept of routing, it uses Controller at the code level).

routing {
    get("/") {
        call.respondText("Hello World!", ContentType.Text.Plain)
    }
}
Copy the code

The static resource routing is as follows:

. static("/static") {
        resources("static")}...Copy the code

No dependency injection

Ktor currently has no built-in dependency injection, which means that dependencies need to be explicitly created, which is probably why Ktor doesn’t have the concept of a Controller.

CSS is the BootStrap

As a developer without UI support, BootStrap is the best choice.

JavaScript x Kotlin

Writing JS with Kotlin has solved most of my gripes with JS, although I hear that developing JS with VSCode is also cool now.

Kotlin Call JS

Kotlin provides several ways to call JS, such as JS (” Java-script code”), but not in a good way.

There is also Dynamic Type, which can be considered as JS specific. After a variable is declared as Dynamic, its subsequent calls will return Dynamic, and the relevant code will be copied into JS code unchanged.

A better approach is the external modifier. The external modifier can be used to declare an existing JS method/class as a type Kotlin can check, such as external Fun Alert (message: Any?). : Unit corresponds to a browser’s own window.alert() method. After declaring the external method above, you can call alert() directly in the Kotlin code

Using the External approach, Kotlin can directly use many third-party JS libraries, such as jQuery. The ts2kt tool does this by generating a series of external files for third-party JS libraries, called headers, similar to the header files required when using third-party C/C++ libraries. This tool essentially converts TypeScript headers into Kotlin headers.

With this header, we can call JS directly from Kotlin code, such as:

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

Attachment: the jQuery API

Afterword.

With that knowledge in hand, you, who write Kotlin, can do simple front-end development, and maybe one of your ideas can take the first step.

Kotlin has an official FullStack Demo that uses React as a front end, if you’re interested in learning something new.

@Uraka.Lee