Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Qicoo app Frontend
Search
translucens
January 30, 2019
Technology
0
520
Qicoo app Frontend
The implementation of question post web app "Qicoo"
translucens
January 30, 2019
Tweet
Share
More Decks by translucens
See All by translucens
12 Factor App on Kubernetes を12ヶ月実践して見えてきたもの
translucens
3
1.3k
The Twelve-Factor AppとKubernetes
translucens
6
1.3k
Go on lambda
translucens
2
590
Other Decks in Technology
See All in Technology
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
160
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
SSMRunbook作成の勘所_20241120
koichiotomo
2
140
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
640
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
AGIについてChatGPTに聞いてみた
blueb
0
130
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
How to Ace a Technical Interview
jacobian
276
23k
Unsuck your backbone
ammeep
668
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Building an army of robots
kneath
302
43k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Six Lessons from altMBA
skipperchong
27
3.5k
Fireside Chat
paigeccino
34
3k
Faster Mobile Websites
deanohume
305
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Transcript
Qicoo app // Frontend Soichiro Kawamura @translucens Cloud Native Developers
JP 9th 2019-01-30
$ whoami @ 1 … Cloud Immigrant
❌ ⭕ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 2
Qicoo 1. SPA 2. API (k8s/EKS) 3. ; PC
2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 3
#1 React, TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter:
#cndjp 4
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
React Components 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp
6 REST API JSON React ※React Developer Tools React
React + TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter:
#cndjp 7 React TypeScript TSLint: restrict-plus-operands JS
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
API URL UI 2019-01-30 Cloud Native Developers JP
#9 Twitter: #cndjp 9
#2 Web Amazon S3, CloudFront, CircleCI 2019-01-30 Cloud Native Developers
JP #9 Twitter: #cndjp 10
2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 11 https://speakerdeck.com/cndjp/jkd-v18-dot-12-2w3?slide=31
& 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
GitHub push CircleCI JavaScript Python TypeScript preview, master AWS
CLI S3 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 13
CloudFront CloudFront N. Virginia AWS CloudFront S3 2019-01-30
Cloud Native Developers JP #9 Twitter: #cndjp 14
#3 w/o Bootstrap, Font Awesome, Adobe Color Wheel 2019-01-30 Cloud
Native Developers JP #9 Twitter: #cndjp 15
CSS Bootstrap 4.1.3 Font Awesome 5.5.0 2019-01-30 Cloud Native
Developers JP #9 Twitter: #cndjp 16
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 Font Awesome <i class=‘fas fa-clock’></i> PNG 2019-01-30
Cloud Native Developers JP #9 Twitter: #cndjp
Adobe Color Wheel CNDJP #007395 https://color.adobe.com/ 2019-01-30 Cloud Native Developers
JP #9 Twitter: #cndjp 19
Qicoo 1. SPA TypeScript React Starter 2. S3, CloudFront, CircleCI
3. PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 20