Qicoo app Frontend

The implementation of question post web app "Qicoo"

Transcript

1. Qicoo app // Frontend Soichiro Kawamura @translucens Cloud Native Developers JP 9th 2019-01-30
2. $ whoami @ 1 … Cloud Immigrant    ❌ ⭕ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 2
3. Qicoo 1. SPA 2. API (k8s/EKS) 3.  ; PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 3
4. #1 React, TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 4
5. 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
6. React Components 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 6 REST API JSON React ※React Developer Tools React
7. React + TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 7 React TypeScript  TSLint: restrict-plus-operands  JS 
8. 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
9. API URL   UI 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 9
10. #2 Web Amazon S3, CloudFront, CircleCI 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 10
11. 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 11 https://speakerdeck.com/cndjp/jkd-v18-dot-12-2w3?slide=31
12. & 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
13. GitHub push CircleCI JavaScript Python TypeScript  preview, master AWS CLI S3 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 13
14. CloudFront  CloudFront N. Virginia AWS CloudFront S3  2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 14
15. #3 w/o Bootstrap, Font Awesome, Adobe Color Wheel 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 15
16.  CSS Bootstrap 4.1.3 Font Awesome 5.5.0 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 16
17. 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
18. 18 Font Awesome  <i class=‘fas fa-clock’></i>  PNG 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp
19. Adobe Color Wheel CNDJP #007395 https://color.adobe.com/ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 19
20. Qicoo 1. SPA TypeScript React Starter 2. S3, CloudFront, CircleCI 3.  PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 20