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.2k
The Twelve-Factor AppとKubernetes
translucens
6
1.3k
Go on lambda
translucens
2
580
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
450
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
460
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
190
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Automating Front-end Workflow
addyosmani
1365
200k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Embracing the Ebb and Flow
colly
84
4.4k
It's Worth the Effort
3n
183
27k
Faster Mobile Websites
deanohume
304
30k
Code Review Best Practice
trishagee
64
17k
Music & Morning Musume
bryan
46
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
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