Giters

umezo / web-sample

Modern Stack Web Application

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Web Sample

日本語

It is a sample for web application with recent tech stacks. I want to keep making this repository simple and easy understanding.

Screen Shot

  • Home page(/) supports full Server Side Rendering(SSR).
  • About page(/about) and Users page(/users) support dynamic(lazy) import. It does SSR for App Shell part but doesn't support SSR with contents area.

Stacks

  • Main Libraries
    • express
    • react
    • react-router
    • redux
    • redux-thunk
    • @loadable/component
    • styled-components
    • react-intl
  • Dev Tools
    • webpack
    • typescript
    • eslint
    • prettier
  • App Features
    • Server Side Rendering
    • i18n
    • Code Splitting

Getting Started

For development.

$ npm install
$ npm start
// Open localhost:3000

For production.

$ npm install
$ npm run build
$ npm run server
// Open localhost:3000

Roadmap

  • Make dev environment faster
    • Support Hot Module Replacement
  • Setting up jest for snapshot tests

Why I do so / Why I don't do so

Q. Why don't I use Atomic Design?
A. Actually, it is really difficult to categorize component. If your team still have a solid design system or a team that has only engineers, it is a good sign to use Atomic Design. But if you have to say no, it is a bad sign to do so. Some ideas about design like OOUI have many models like implementation model, meta model, expression model and so on. I can not make sure which component is atoms, which component is molecules, which component is organisms.

Q. Why don't I do SSR with dynamic import?
A. @loadable/component needs babel plugin to do SSR. If I do it, I need to install and set up babel with typescript. Actually, it got easy. But I think it is too much. If you need to support SSR for SEO, please use babel plugin or stop to use dynamic import for target pages. In addition, multi transpile make optimization difficult like needless codes.

Q. Why don't I use ts-node for development?
A. It is too slow for development.

Q. How should I handle auth?
A. It get too big as sample. This link(Redirects(Auth) - React Router: Declarative Routing for React.js) will help you.

Dependencies of Application

Dependencies of Application

Refs

About

Modern Stack Web Application

Languages

Language:TypeScript 84.5%Language:JavaScript 15.5%