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
540
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
610
Other Decks in Technology
See All in Technology
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
470
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
320
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
1
200
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
220
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
120
Prox Industries株式会社 会社紹介資料
proxindustries
0
180
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.5k
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
10
3.6k
Welcome to the LLM Club
koic
0
130
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
200
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
140
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Scaling GitHub
holman
459
140k
Side Projects
sachag
455
42k
KATA
mclloyd
29
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Statistics for Hackers
jakevdp
799
220k
Done Done
chrislema
184
16k
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