Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Qicoo app Frontend

translucens
January 30, 2019

Qicoo app Frontend

The implementation of question post web app "Qicoo"

translucens

January 30, 2019
Tweet

More Decks by translucens

Other Decks in Technology

Transcript

  1. $ whoami @ 1 … Cloud Immigrant   

    ❌ ⭕ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 2
  2. Qicoo 1. SPA 2. API (k8s/EKS) 3.  ; PC

    2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 3
  3. React Facebook UI Virtual DOM JSX React const element =

    <h1>Hello, world!</h1>;  src: https://reactjs.org/docs/introducing-jsx.html 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 5
  4. React Components 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp

    6 REST API JSON React ※React Developer Tools React
  5. React + TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter:

    #cndjp 7 React TypeScript  TSLint: restrict-plus-operands  JS 
  6. TypeScript React Starter TypeScript React https://github.com/Microsoft/TypeScript-React-Starter  $ create-react-app my-app

    --scripts-version=react-scripts-ts  $ npm run start   $ npm run build 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 8
  7. & Cloud Native Developers JP #9 Twitter: #cndjp 12 Preview

    Public AWS Cloud Region (Tokyo / JP) Dev. Users Region (Oregon / US) git push Static analyzers webhook Sync (AWS CLI) 2019-01-30
  8. GitHub push CircleCI JavaScript Python TypeScript  preview, master AWS

    CLI S3 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 13
  9. #3 w/o Bootstrap, Font Awesome, Adobe Color Wheel 2019-01-30 Cloud

    Native Developers JP #9 Twitter: #cndjp 15
  10. Bootstrap   jQuery jQuery DOM React Virtual DOM 

    React Bootstrap Bootstrap v3  UI Google Analytics :PC=2:1 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 17
  11. Qicoo 1. SPA TypeScript React Starter 2. S3, CloudFront, CircleCI

    3.  PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 20