Skip to content
This repository has been archived by the owner. It is now read-only.
main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vanilla-trello (en)

ko | en

demo.mp4

Implementing Trello application with Vanilla JavaScript.

Implementation was carried out centered on the front-end, and implemented according to the following requirements:

  • Frontend
    • Text-inputable and Draggable cards
    • Card list
    • Automatically sync with other Trello clients
    • Prohibition of use of external modules
  • Backend
    • When data is updated in one client, broadcast all other clients

And I wrote two articles about what I learned while doing this project, and you can check it out at the link below(korean):

Contents

  • Getting started
    • Dependencies
    • Vite
  • Features
    • Components
    • Functions

Getting started

vanilla-trello is configured as a 'Monorepo' based on the Yarn workspaces, and can be installed and run with the following command:

# clone this repository
git clone https://github.com/Gumball12/vanilla-trello
cd vanilla-trello

# install dependencies
yarn

# 1. start static web dev server (frontend)
yarn front-dev

# 2. start application web dev server (backend)
yarn back-dev

The order of Front and Back command execution works normally no matter which one is executed first.

Dependencies

The installed modules are as follows.

  • Share
    • babel, jest (unit test)
    • chalk, yorkie (verify commit message)
  • Backend
    • express (web framework)
    • compression (compression data)
    • ws (WebSocket server)
  • Frontend
    • vite (build tool)

Vite

I use the ViteJs build tool while developing the front-end application. Of course, vanilla-trello front-end is implemented to fully support Native ESM(EcmaScript-Module), so it is possible to run without errors only with Static Web Server.

So, why did I use the ViteJS? This has the following advantages:

  • Can be used as a Static Web Server
  • ESM-based fast HMR(Hot-Module-Replacement) possible
  • Automatically cache unmodified JavaScript sources (304 Not-Modified) => improve dev performance!

If I use the Vite with these advantages, can proceed with development quickly and easily.

Of course, no external modules are used except Google Material Icon CSS and Font files, as in the actual application, and all modules are implemented and written by hand.

Features

Components

Before development, prototyping of each component using Figma. It can be accessed throught the link below:

Components (Figma)

Implemented compoents are as follows:

CardBox components

CardBox components

CardBox component

CardBox component (contents)

AddCardPanel component

AddCardPanel component

  • CardBox: Card component with text contents (draggable)
  • AddCardPanel: Button to add a CardBox component

ListBox components

ListBox Components

ListBox component

ListBox component (card)

ListBox component (cards)

ListBox component (select)

AddListPanel component

AddListPanel component

Main components

TitleBox component

TitleBox component

Share components

InputBox component

InputBox

AddPanel component

AddPanel

  • InputBox: Input field component
  • TextareaBox: Textarea field component
  • IconBox: Icon button component
  • AddPanel: Button to add CardBox and ListBox components
  • SwapFieldBox: Component that swaps Input/Textarea field and Card when clicked

Functions

Based on the Vanilla JavaScript, the following functions are implemented:

vanilla-trello (ko)

ko | en

demo.mp4

Vanilla JS로 Trello 구현하기.

프런트엔드 중심으로 구현을 진행하였으며, 다음의 요구사항에 따라 구현.

  • Frontend
    • 텍스트를 입력할 수 있는, 그리고 드래그가 가능한 카드
    • 카드 목록
    • 다른 클라이언트와 자동으로 동기화
    • 외부 모듈 사용 금지
  • Backend
    • 하나의 클라이언트에서 데이터가 업데이트 되는 경우, 이를 브로드캐스팅

과제를 진행하며 알게 된 내용들에 대해 아티클 두 개를 작성하였으며, 아래의 링크에서 확인하실 수 있다.

목차

  • Getting started
    • Dependencies
    • Vite
  • Features
    • Components
    • Functions

Getting started

vanilla-trello는 Yarn workspaces 기반의 monorepo로 구성하였으며, 다음의 명령으로 설치 및 실행이 가능.

# clone this repository
git clone https://github.com/Gumball12/vanilla-trello
cd vanilla-trello

# install dependencies
yarn

# 1. start static web dev server (frontend)
yarn front-dev

# 2. start application web dev server (backend)
yarn back-dev

참고로 Front, Back 실행 순서는 어떠한 것을 먼저 실행해도 정상 작동함.

Dependencies

설치되는 모듈은 다음과 같음.

  • Share
    • babel, jest (unit test)
    • chalk, yorkie (verify commit message)
  • Backend
    • express (web framework)
    • compression (compression data)
    • ws (WebSocket server)
  • Frontend
    • vite (build tool)

Vite

프런트엔드 개발을 진행하며 ViteJS 빌드 툴을 이용함. 물론 Native ESM(EcmaScript-Module)을 완벽하게 지원하도록 구현했기에, live-server와 같은 Static Web Server만으로도 에러 없이 구동이 가능.

그럼 Vite을 사용한 이유는 무엇일까? 여기에는 다음의 이점이 있다.

  • Static Web Server로 이용이 가능
  • ESM 기반의 빠른 HMR(Hot-Module-Replacement) 가능
  • 수정되지 않은 JavaScript 소스는 자동으로 캐싱 (304 Not-Modified)

이러한 이점을 가진 Vite을 이용하면 빠르고 수월하게 개발을 진행할 수 있기에, 이를 이용함.

참고로 당연히 실제 애플리케이션에는 명시된 제한사항과 같이 Google Material Icon CSS 및 폰트 파일을 제외하고 외부 모듈을 일체 사용하지 않았으며, 모든 모듈은 모두 직접 구현하여 작성함.

Features

Components

실제 개발 전, Figma를 이용해 컴포넌트 단위의 프로토타이핑을 진행함. 아래의 링크로 접속이 가능.

Components (Figma)

구현된 컴포넌트는 다음과 같다.

CardBox components

CardBox components

CardBox component

CardBox component (contents)

AddCardPanel component

AddCardPanel component

  • CardBox: 콘텐츠를 갖고 있는 Card 컴포넌트 (draggable)
  • AddCardPanel: CardBox를 추가하는 버튼

ListBox components

ListBox Components

ListBox component

ListBox component (card)

ListBox component (cards)

ListBox component (select)

AddListPanel component

AddListPanel component

  • ListBox: CardBox 목록을 갖고 있는 컴포넌트
  • AddListPanel: ListBox를 추가하는 버튼

Main components

TitleBox component

TitleBox component

Share components

InputBox component

InputBox

AddPanel component

AddPanel

Functions

VanillaJS 기반으로 다음의 기능을 구현함.