Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Qicoo app Frontend

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for translucens translucens
January 30, 2019
Technology
0
570

Qicoo app Frontend

The implementation of question post web app "Qicoo"

Avatar for translucens

translucens

January 30, 2019
Tweet

More Decks by translucens

See All by translucens
12 Factor App on Kubernetes を12ヶ月実践して見えてきたもの
Avatar for translucens translucens
4
1.4k
The Twelve-Factor AppとKubernetes
Avatar for translucens translucens
6
1.4k
Go on lambda
Avatar for translucens translucens
2
640

Other Decks in Technology

See All in Technology
ビズリーチにおける検索・推薦の取り組み / DEIM2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
110
ブラックボックス観測に基づくAI支援のプロトコルのリバースエンジニアリングと再現 ~AIを用いたリバースエンジニアリング~ @ SECCON 14 電脳会議 / Reverse Engineering and Reproduction of an AI-Assisted Protocol Based on Black-Box Observation @ SECCON 14 DENNO-KAIGI
Avatar for chibiegg chibiegg
0
150
自動テストが巻き起こした開発プロセス・チームの変化 / Impact of Automated Testing on Development Cycles and Team Dynamics
Avatar for コドモン開発チーム codmoninc
2
1.2k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
340
聲の形にみるアクセシビリティ
Avatar for tomokusaba tomokusaba
0
120
LINE Messengerの次世代ストレージ選定
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
19
7.5k
まなび領域における生成AI活用事例
Avatar for Recruit recruitengineers
PRO
2
100
Claude Codeの進化と各機能の活かし方
Avatar for Oikon oikon48
17
7.5k
Kiro のクレジットを使い切る！
Avatar for otanikohei otanikohei2023
0
120
「ストレッチゾーンに挑戦し続ける」ことって難しくないですか？ メンバーの持続的成長を支えるEMの環境設計
Avatar for SansanTech sansantech
PRO
3
360
us-east-1 に障害が起きた時に、 ap-northeast-1 にどんな影響があるか 説明できるようになろう！
Avatar for Kazuki Miura miu_crescent
PRO
12
3.7k
Devinを導入したら予想外の人たちに好評だった
Avatar for Takafumi Omuro tomuro
0
930

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
250
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
760
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
95
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
980
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
660
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
380

Transcript

  1. Qicoo app // Frontend Soichiro Kawamura @translucens Cloud Native Developers

    JP 9th 2019-01-30

  2. $ whoami @ 1 … Cloud Immigrant   

    ❌ ⭕ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 2

  3. Qicoo 1. SPA 2. API (k8s/EKS) 3.  ; PC

    2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 3

  4. #1 React, TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter:

    #cndjp 4

  5. 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

  6. React Components 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp

    6 REST API JSON React ※React Developer Tools React

  7. React + TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter:

    #cndjp 7 React TypeScript  TSLint: restrict-plus-operands  JS 

  8. 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

  9. API URL   UI 2019-01-30 Cloud Native Developers JP

    #9 Twitter: #cndjp 9

  10. #2 Web Amazon S3, CloudFront, CircleCI 2019-01-30 Cloud Native Developers

    JP #9 Twitter: #cndjp 10

  11. 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 11 https://speakerdeck.com/cndjp/jkd-v18-dot-12-2w3?slide=31

  12. & 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

  13. GitHub push CircleCI JavaScript Python TypeScript  preview, master AWS

    CLI S3 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 13

  14. CloudFront  CloudFront N. Virginia AWS CloudFront S3  2019-01-30

    Cloud Native Developers JP #9 Twitter: #cndjp 14

  15. #3 w/o Bootstrap, Font Awesome, Adobe Color Wheel 2019-01-30 Cloud

    Native Developers JP #9 Twitter: #cndjp 15

  16.  CSS Bootstrap 4.1.3 Font Awesome 5.5.0 2019-01-30 Cloud Native

    Developers JP #9 Twitter: #cndjp 16

  17. 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. 18 Font Awesome  <i class=‘fas fa-clock’></i>  PNG 2019-01-30

    Cloud Native Developers JP #9 Twitter: #cndjp

  19. Adobe Color Wheel CNDJP #007395 https://color.adobe.com/ 2019-01-30 Cloud Native Developers

    JP #9 Twitter: #cndjp 19

  20. Qicoo 1. SPA TypeScript React Starter 2. S3, CloudFront, CircleCI

    3.  PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 20