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
530
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
600
Other Decks in Technology
See All in Technology
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
900
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
810
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.9k
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
100
MIMEと文字コードの闇
hirachan
2
1.5k
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
300
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
530
クラウド食堂とは?
hiyanger
0
130
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
It's Worth the Effort
3n
184
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Side Projects
sachag
452
42k
RailsConf 2023
tenderlove
29
1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
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