SwiftWasm으로 시작된 웹 애플리케이션 개발

이 글은 SwiftWasm의 웹 응용 개발을 시작하는 방법을 소개했다.SwiftWasm의 기술적 배경을 간단히 설명하고 로컬 환경에서 간단한 응용 프로그램을 만드는 것이 목표입니다.

SwiftWasm 소개

WebAssembly는 현대 웹 브라우저에서 현지인에게 접근하는 공연을 실행할 수 있는 조합식 언어이다.(생략) C/C++ 또는 Rust 등의 언어를 컴파일하는 객체로 네트워크에서 이러한 언어를 실행할 수 있습니다.
SwiftWasm은 Swift의 WebAssiembly 지원을 추진하는 프로젝트다.
WebAssembly를 컴파일하여 브라우저에서 Swift를 실행할 수 있습니다.
https://github.com/swiftwasm

간단한 앱을 만들어 보도록 하겠습니다.

0. SwiftWasm 설치

SwiftWasm 응용 프로그램을 구축할 때 carton 이 도구를 사용합니다.먼저 캐튼을 설치합니다.

$ brew install swiftwasm/tap/carton

Linux 환경의 경우 현재 상황에서 자체적으로 구축해야 하기 때문에 README.힘내세요.

1. 프로젝트 만들기

그럼 우리 프로젝트를 합시다.
프로젝트 디렉터리를 만들고 carton init 명령을 실행합니다.--template tokamak는 앞으로 사용될 Tokamak이라는 UI 프레임워크 생성 프로젝트를 위한 옵션이다.

$ mkdir SampleApp
$ cd SampleApp
$ carton init --template tokamak

프로젝트 구성은 다음과 같다.SwiftPM 패키지와 동일합니다.

$ tree
.
├── Package.swift
├── README.md
├── Sources
│   └── SampleApp
│       └── main.swift
└── Tests
    ├── LinuxMain.swift
    └── SampleAppTests
        ├── SampleAppTests.swift
        └── XCTestManifests.swift

main.swift의 내용은 SwiftUI와 유사한 코드입니다.

import TokamakShim

struct TokamakApp: App {
    var body: some Scene {
        WindowGroup("Tokamak App") {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

TokamakApp.main()

2. 시운전

우리는 방금 프로젝트를 하나 했으니, 우리 빨리 행동합시다.프로젝트 디렉터리에서 명령을 실행하면 프로그램을 실행할 수 있습니다.방문http://127.0.0.1:8080 후 실제 동작의 상황을 확인할 수 있습니다.
처음 실행할 때 공구체인을 설치하기 때문에 2~3분 정도 걸릴 수 있으니 주의하세요.

$ carton dev
...
[ NOTICE ] Server starting on http://127.0.0.1:8080

올바른 동작이 표시될 때 이 표시가 나타납니다.참 쉽네.

3. ToDo 어플리케이션 사용 시도

이러면 너무 쉬워요. ToDo 앱을 다시 태어나게 하세요.
프로젝트 작성 시 지정된Tokamak은 SwiftUI와 호환되는 UI 프로그램 라이브러리로 개발된 것으로 SwiftUI의 쓰기 스타일과 기본적으로 같아 프로그램을 조립할 수 있다.
기분 좋아졌네.

import TokamakShim

struct TokamakApp: App {
    var body: some Scene {
        WindowGroup("Tokamak App") {
            ContentView()
        }
    }
}

struct Item {
    var isCompleted: Bool = false
    var text: String
}

struct ContentView: View {
    @State var newItem = ""
    @State var items = [Item]()

    func addNewItem() {
        items.append(Item(text: newItem))
        newItem = ""
    }

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button("+", action: addNewItem)
                TextField("New todo item", text: $newItem, onCommit: addNewItem)
            }
            List {
                ForEach(0..<items.count, id: \.self) { i in
                    Toggle(
                        items[i].text,
                        isOn: Binding(get: { items[i].isCompleted }, set: { items[i].isCompleted = $0 })
                    )
                }
            }
        }
    }
}

TokamakApp.main()

총결산

이 글은 아래 창고의 README입니다.단지 일본어로 MD에 적힌 내용을 소개했을 뿐인데 프로젝트에 조금이라도 관심이 있다면 기쁘겠습니다.

https://github.com/TokamakUI/Tokamak

https://github.com/swiftwasm/carton

지금 정말 일손이 부족해요. 도와주세요.