Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rhiokim/large-scale-frontend

(WIP ๐Ÿ”ฅ) ๋ณต์žกํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์ƒ๊ฐ
https://github.com/rhiokim/large-scale-frontend

Last synced: 4 days ago
JSON representation

(WIP ๐Ÿ”ฅ) ๋ณต์žกํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์ƒ๊ฐ

Awesome Lists containing this project

README 

        



```

Development

 \_ Manage source code and local dev automation

 \_ Focus on code without additional work

```



## Purpose



Save your life with large scale frontend architecture



## Guide



Base -> Development -> Build -> Test -> Maintain -> Refactor



-> Workflow

  -> SCM

    -> Co-Working

      -> Code Quality

        -> Continuous Integration

          -> Continuous Delivery

            -> Versioning

              -> Documentation



### Workflow



#### Git



* Commit Message Convention

  * Side Effects

    * Easy to make release notes & Change logs

  * Good Convention Guidelines

    * ๐Ÿ˜€ [Angular Team Guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit)

    > This guide is quite awesome when you wirte any kind of open source libraries

    * ๐Ÿ˜Š [Erlang - Writing good commit message](https://github.com/erlang/otp/wiki/Writing-good-commit-messages)

    > And this is also good option

  * Tool to save your life

    * [Commitizen](https://github.com/commitizen/cz-cli)



#### Hooking



* Side Effects

  * Reduce human error immediatly when you work with git every time. In other words, you don't need to care of it at all

* NPM

  * [npm-scripts](https://docs.npmjs.com/misc/scripts)

* Git

  * [description] https://github.com/typicode/husky

  * [description] https://github.com/marionebl/commitlint

  * [description] https://github.com/okonet/lint-staged



#### Code Quality



* Typing

* Lint



#### CI(Continuous Integration)



* Google Cloud Build

* Gitlab Pipeline

* [AWS CodeBuild](https://aws.amazon.com/ko/codebuild/)

* Travis

* Circle CI



#### CD(Continuous Delivery)



* Cloud

  * AWS

  * Now.sh

  * Digital Ocean

  * Heroku

* Static Web Publishing

  * Netlify

  * Surge

  * Github gh-pages



#### Versioning



* Side Effects

* Tools

  * NPM

  * Yarn

  * np

  * semver

    * https://semver.org/

    * https://docs.npmjs.com/misc/semver



#### Documentation



* Manaual

  * Gitbook

  * Flybook

* README.md

  * https://github.com/jfmengels/all-contributors-cli

* CHANGELOG.md

* LICENSE.md

* Comments



### Application Architecture



* ์ฝ”๋“œ๋ฒ ์ด์Šค

  * Monorepo

    * What?

    * Why?

    * When?

    * How?

  * ๋ถ„์‚ฐ/MSA

  * ๊ณตํ†ต ๋ชจ๋“ˆ๋ผ์ด์ง•

* Universal Rendering

  * Next.js

  * Nuxt.js

  * Others?

* Serverless

  * zeit/now

  * google

* ํ™˜๊ฒฝ

  * ๋ชจ๋ฐ”์ผ

    * Native Interfaces with Web Application

  * ๋ฐ์Šคํฌํƒ‘

  * ๊ทธ์™ธ

  * ๋””๋ฒ„๊น…



#### WACQA(Web Application Consideration Tree)



> WACQA is just LGTM



* Client-side

  * Framework - How much time we can spend for that?

    * How to manages dependencies?

    * How to migrate version issue?

    * Learning costs

    * Pros & Cons for our goals

    * Tooling costs

  * Responseive

    * Browser

    * Mobile

    * TV

  * PWA

    * Service Worker

    * Web Push

  * SEO

    * Will we happy with SEO?

  * Universal Rendering - SSR

    * Really need this to archive our goal?

  * Static Typing

    * Can you answer me why we are need this thing on our project?

  * i18n - Internationalization

  * a11y - Web Accessibility

  * Testing - unit(snapshot), e2e and others?

  * Browers Capability

  * CSS - Pre-processor (SASS/Less/Stylus) and JSS

* Backend-side

  * coming up



### Modern Framwork



* Web Component

* Router

* React.js

* Vue.js



### Style



* CSS

  * css

  * inline style

  * CSSModules

  * styled-component



### State Management



๊ณผ๊ฑฐ MVC ํŒจํ„ด์ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„์˜ ๋Œ€๋ถ€๋ถ„์ด์˜€๋˜ ์‹œ์ ˆ์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๊ด€๋ฆฌ๋Š” ๊ฐ Model ๊ณผ Controller ์— ์˜ํ•ด์„œ ๊ด€๋ฆฌ๋˜์–ด์กŒ๋‹ค. ๋ฌผ๋ก  ๊ทธ๋•Œ ๋‹น์‹œ์˜ ์ƒํƒœ๊ด€๋ฆฌ๋Š” ๊ทธ๋ ‡๊ฒŒ ๋ณต์žกํ•˜์ง€ ์•Š์•˜๋‹ค. ์•„๋‹ˆ ๊ทธ๋ ‡๊ฒŒ ๋ณต์žกํ•œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์•˜๋‹ค.



ํ•˜์ง€๋งŒ ๋ชจ๋˜ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ์ˆ ์„ ๊ธ‰์†๋„๋กœ ๋ฐœ์ „ํ•˜๊ณ  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์กฐ๋„ ๊ธ‰์†๋„๋กœ ๋ณ€ํ™”ํ•˜์˜€๋‹ค.



์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌํ˜„ ํŒจํ„ด๋„ MVC ์—์„œ 2013๋…„์„ ๊ธฐ์ ์œผ๋กœ ๋งˆํฌ์—…, ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ๋‹จ์ผ ํŒŒ์ผ์— ๋‹ด์€ ์›น ์ปดํฌ๋„ŒํŠธ์˜ ํ˜•ํƒœ๋กœ ๋ณ€ํ™”ํ•˜๋ฉด์„œ ์ƒํƒœ๊ด€๋ฆฌ์˜ ๋ณต์žกํ•จ์„ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„(Uni-direction Data Flow)์œผ๋กœ ๊ทธ ํŒจ๋Ÿฌ๋‹ค์ž„์„ ๋ฐœ์ „์‹œ์ผœ์˜ค๊ณ  ์žˆ๋‹ค.



๋”๋ถˆ์–ด ๋‹ค์–‘ํ•œ ์–ธ์–ด์™€ ํ™˜๊ฒฝ์˜ ๊ฒฝํ—˜๋“ค์ด ์›น ์ƒํƒœ๋จธ์‹ ์˜ ํŒจ๋Ÿฌ๋‹ค์ž„์— ์˜ํ–ฅ์„ ์ฃผ๊ณ  ์žˆ๋‹ค.



* Flux

  * Uni-Direction Data Flow

* Redux

* React

  * [Context Provider](https://reactjs.org/docs/context.html)

  * [Hooks](https://reactjs.org/docs/hooks-intro.html)

* Vuex

  * Action

  * Getter

  * Mutation

  * Module

  * Computed

* Saga

  * [What is saga?](https://engineering.universe.com/what-is-redux-saga-c1252fc2f4d1)

* GraphQL

* Observable

  * Rx

  * MobX

    * TFRP(transparently applying functional reactive programming)



---



* We **have to** understand about general state machine - https://en.wikipedia.org/wiki/Finite-state_machine



### Testing



[Wikipedia](https://en.wikipedia.org/wiki/Software_testing##Testing_levels)



๋ชจ๋˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ…Œ์ŠคํŒ… ํ™˜๊ฒฝ์€ ๊ณผ๊ฑฐ์— ๋น„ํ•ด ์›”๋“ฑํžˆ ์ข‹์•„์ง€๊ณ  ์žˆ์œผ๋ฉฐ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋‚ฎ์•„์ง€๊ณ  ์žˆ๋‹ค.



2013๋…„ ์ดˆ๋ถ€ํ„ฐ ์›น ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ๋ฐ”ํƒ•์ด ๋˜๋ฉด์„œ ์ตœ๊ทผ 2015๋…„๋ถ€ํ„ฐ๋Š” ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ฒด๊ณ„๊ฐ€ ๊ฐ–์ถฐ์ง„ ํ…Œ์ŠคํŠธ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ํ…Œ์ŠคํŠธ์˜ ๋ฐฉ์‹๊ณผ ํ…Œ์ŠคํŠธ ๋ ˆ๋ฒจ์˜ ์ค‘์š”๋„๊ฐ€ ๋‹ฌ๋ผ์ง€๊ณ  ์žˆ๋‹ค.



ํฐ ์‚ฌ์ด์ฆˆ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„  ์•„๋ž˜์— ์ œ์‹œํ•œ ๋ช‡๊ฐ€์ง€ ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ ๊ตฌ์ถ•๊ณผ ํ…Œ์ŠคํŒ… ์ „๋žต์— ๋Œ€ํ•ด์„œ ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•˜๋ฉด ์ข‹๋‹ค.



* Unit(์Šค๋ƒ…์ƒท)

  * Jest

  * Mocha

* E2E

  * [Nightwatch.js](http://nightwatchjs.org/)

  * [Cypress.io](https://www.cypress.io/)

  * [Jest with Puppeteer](https://github.com/smooth-code/jest-puppeteer)



### User Analysis



* ์‚ฌ์šฉ์ž ๋ถ„์„ ์ „๋žต

* ํผ๋„(funnel) ๋””์ž์ธ ๋ฐฉ๋ฒ•



### Logging & Auditing



* for Debug

* for Tracing

  * Node.js

    * Morgan

  * Web Application

    * Sentry - [sentry.io](https://sentry.io)

  * Mobile



### Security



๋Œ€๋ถ€๋ถ„์˜ ๋ณด์•ˆ์€ ํ”„๋ก ํŠธ์—”๋“œ ์ฆ‰ ๋ธŒ๋ผ์šฐ์ € ์˜์—ญ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๊ทธ๋‹ค์ง€ ์ค‘์š”๋„๊ณ  ๋†’์ง€ ์•Š๊ฒŒ ๋Š๋‚€๋‹ค.

๊ณผ๊ฑฐ๋„ ํ˜„์žฌ๋„, ์ด ์„น์…˜์—์„œ๋Š” ๋ณด์•ˆ์˜ ์ค‘์š”์„ฑ, ํ•„์š”์„ฑ์— ๋Œ€ํ•œ ์ •๋ณด๋ณด๋‹ค ๋ณด์•ˆ ์ทจ์•ฝ์ ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”

๋‹ค์–‘ํ•œ ์œ„ํ—˜ ์š”์†Œ๋ฅผ ์ธ์‹ํ•˜๊ณ  ์˜ˆ๋ฐฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค์— ๋Œ€ํ•ด ํฌ๊ฒŒ 2๊ฐ€์ง€ ์˜์—ญ Node.js, Browser ๋‹ค๋ฃจ๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ํ•œ๋‹ค.



Node.js ์˜ ๊ฒฝ์šฐ ์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋„˜์–ด์„œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์—ฌ๋Ÿฌ ์˜ํ–ฅ์„ ์ฃผ๊ณ  ์žˆ๋‹ค.

๋”๋ถˆ์–ด ์‹œ์Šคํ…œ์„ ์ œ์•ฝ์—†์ด ์—‘์„ธ์Šค ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹จ์ˆœํžˆ ์›น ๋ณด์•ˆ์„ ๋„˜์–ด์„œ ์‹œ์Šคํ…œ ๋ณด์•ˆ์˜ ์ทจ์•ฝ์ ๊นŒ์ง€

๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.



#### Node.js



* 10 npm Security Best practices - https://snyk.io/blog/ten-npm-security-best-practices/

* npm audit - https://docs.npmjs.com/cli/audit

* nsp - https://www.npmjs.com/package/nsp



#### Browser



Google Web Fundmental - https://developers.google.com/web/fundamentals/security?hl=ko

* Content Security Policy - https://developers.google.com/web/fundamentals/security/csp?hl=ko



### Performance



* This! Good start point - https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

* PWA

* SEO

* Bundling

  * Code Splitting

  * Tree Shaking

* Minify

* NginX Configuration

  * This can help your server improve the SPA(Single Page Application) and web site's performance and security, while also ensuring that resources are served with the correct content-type and are accessible, if needed, even cross-domain.

  * [Configuration your web server to prevent caching](https://github.com/vuejs-templates/pwa/blob/development/docs/prevent_caching.md)

  * [Caching best practices & max-age gotchas](https://jakearchibald.com/2016/caching-best-practices/)

  * [HTML5 Boilerplate Nginx Configuration](https://github.com/h5bp/server-configs-nginx)

* Tools

  * Lighthouse - https://developers.google.com/web/tools/lighthouse/?hl=ko

  > Lighthouse ๋Š” ์›น ์•ฑ์˜ ํ’ˆ์งˆ ๊ฐœ์„ ์„ ์œ„ํ•œ ์˜คํ”ˆ์†Œ์Šค ์ž๋™ํ™” ๋„๊ตฌ



### Optimization



* Assets

  * Image

  * CSS



### The Design of Principles



* Design Ops

* Definition

  * token

  * element

  * component

  * pattern

  * template



#### Design System



* https://designsystemsrepo.com/design-systems/



#### Component Design



* Layout

  * Grid

* Motion & Animation

* Colors

  * Pattern

  * HEX

  * RGBA

  * HSLA

* Sizing



#### CSS



* Structured CSS

* Preprocessor

* CSS in JS



## Strategies & Methodologies



### Modularization



In every developer's life. We are considerating every day how to write high reusable code.



We **have to** understand about Separation of concerns (aka SoC) - https://en.wikipedia.org/wiki/Separation_of_concerns



* Common Regular Expression

  * Email

  * Name

  * Phone

  * Number Format

  * Time

  * Date

  * Zip Code



### DDD



### Etc



* Mobile Native Interfaces

* .well-known - https://www.mnot.net/blog/2010/04/07/well-known



## Diagram



## Contribute



## LICENSE