Git Product home page Git Product logo

building-fullstack-webapp-with-kotlin-multiplatform's Introduction

Building a Full Stack Web App with Kotlin Multiplatform

본 저장소는 INFCON 2022에서 코틀린 멀티플랫폼 기반 웹 프로그래밍 핸즈온랩을 위해 작성된 템플릿 프로젝트가 있는 곳입니다.

핸즈온 과정에서 코틀린 멀티플랫폼을 기반으로 프론트엔드(front-end)는 Kotlin/JS와 리액트(React), 백엔드(back-end)는 Kotlin/JVM과 스프링(Spring)을 사용해 풀스택 웹 애플리케이션이 만듭니다.

코틀린 멀티플랫폼

코틀린은 멀티플랫폼을 지원하는 언어로 JVM 기반 Server-side 및 Android 뿐만이 아니라 JavaScript 엔진이 있는 브라우저나 Node.js, 그리고 iOS, Linux, Windows 등 여러가지 Native 플랫폼에서도 쓸 수 있습니다. 이를 이용해 코틀린 코드를 공유하는 단일 코드베이스로 모바일부터 웹과 데스크톱, 서버에 이르기까지 멀티플랫폼 애플리케이션을 작성할 수 있습니다.

코틀린 멀티플랫폼 프로젝트는 아직 알파 버전이지만 실용적인 가능성에 기대어 기업에서 여러가지 시도를 하고 있습니다. 넷플릭스에서는 TV프로그램과 영화의 제작을 혁신적으로 제공하기 위해 Prodicle 앱을 개발하면서 코틀린으로 작성한 비즈니스 로직을 Kotlin/Native를 통해 Android용 Kotlin 라이브러리와 iOS용 기본 유니버설 프레임워크로 컴파일함해서 사용하고 있으며, 필립스는 자사의 제품들이 클라우드를 기반으로 통합되어 제품간의 검색, 연결 및 상호 작용을 위해 Android 및 iOS, 그리고 임베디드 Linux를 지원하는 SDK를 개발하며 코틀린 멀티플랫폼을 사용했습니다.

프로젝트 구성

├── gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
├── settings.gradle.kts
├── build.gradle.kts                             # Gradle build script
└── src
    ├── commonMain                               # Common Kotlin, application code
    │   ├── kotlin
    │   │   └── todoapp
    │   │       ├── application                  # use-case module
    │   │       ├── domain                       # domain module
    │   │       ├── serializer
    │   │       ├── support
    │   │       └── web                          # web adapter module
    │   └── resources
    ├── commonTest                               # Common Kotlin, test code
    │   ├── kotlin
    │   │   └── todoapp    
    │   └── resources
    ├── jsMain                                   # Kotlin/JS, application code
    │   ├── kotlin
    │   │   ├── todoapp
    │   │   │   ├── application                  # use-case module
    │   │   │   ├── ui                           # react-app module
    │   │   │   └── TodoClientApplication.kt     # client entry-point
    │   │   └── external                         # exposes npm dependencies to kotlin
    │   └── resources
    ├── jsTest                                   # Kotlin/JS, test code
    │   ├── kotlin
    │   │   └── external
    │   └── resources
    ├── jvmMain                                  # Kotlin/JVM, application code
    │   ├── kotlin
    │   │   └── todoapp
    │   │       ├── application                  # use-case module
    │   │       ├── data                         # data adapter module
    │   │       ├── web                          # web adapter module
    │   │       └── TodoServerApplication.kt     # server entry-point
    │   └── resources
    │       ├── static                           # static resources (images)
    │       ├── application.yml                  # spring-boot externalized configuration
    │       ├── schema.sql                       # database schema create script
    │       └── data.sql                         # database data init script
    └── jvmTest                                  # Kotlin/JVM, test code
        ├── kotlin        
        │   └── todoapp
        └── resources

개발 환경

빌드 및 실행

저장소 코드를 내려받은 후 터미널에서 다음 명령어를 입력하고, 애플리케이션이 실행되면 브라우저에서 http://localhost:8080/?mode=remote 로 접속합니다.

❯ ./gradlew clean bootRun

> Configure project :
Kotlin Multiplatform Projects are an Alpha feature. See: https://kotlinlang.org/docs/reference/evolution/components-stability.html. To hide this message, add 'kotlin.mpp.stability.nowarn=true' to the Gradle properties.

> Task :bootRun

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.6.8)
 ...
todoapp.TodoServerApplicationKt      : Started TodoServerApplicationKt in 1.349 seconds (JVM running for 1.504)
o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'applicationAvailability'
o.s.b.a.ApplicationAvailabilityBean  : Application availability state LivenessState changed to CORRECT
o.s.b.f.s.DefaultListableBeanFactory : Returning cached instance of singleton bean 'applicationAvailability'
o.s.b.a.ApplicationAvailabilityBean  : Application availability state ReadinessState changed to ACCEPTING_TRAFFIC
<============-> 96% EXECUTING [34s]
> :bootRun

building-fullstack-webapp-with-kotlin-multiplatform's People

Contributors

arawn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.