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
560
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
4
1.3k
The Twelve-Factor AppとKubernetes
translucens
6
1.4k
Go on lambda
translucens
2
620
Other Decks in Technology
See All in Technology
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
170
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.4k
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
Observability — Extending Into Incident Response
nari_ex
1
270
Wasmの気になる最新情報
askua
0
190
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.3k
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
270
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
260
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
350
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
PRO
32
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Facilitating Awesome Meetings
lara
57
6.6k
Context Engineering - Making Every Token Count
addyosmani
8
300
YesSQL, Process and Tooling at Scale
rocio
173
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Cult of Friendly URLs
andyhume
79
6.6k
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