Slide 1

Slide 1 text

Qicoo app // Frontend Soichiro Kawamura @translucens Cloud Native Developers JP 9th 2019-01-30

Slide 2

Slide 2 text

$ whoami @ 1 … Cloud Immigrant    ❌ ⭕ 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 2

Slide 3

Slide 3 text

Qicoo 1. SPA 2. API (k8s/EKS) 3.  ; PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

React Facebook UI Virtual DOM JSX React const element =

Hello, world!

;  src: https://reactjs.org/docs/introducing-jsx.html 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 5

Slide 6

Slide 6 text

React Components 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 6 REST API JSON React ※React Developer Tools React

Slide 7

Slide 7 text

React + TypeScript 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 7 React TypeScript  TSLint: restrict-plus-operands  JS 

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

API URL   UI 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 9

Slide 10

Slide 10 text

#2 Web Amazon S3, CloudFront, CircleCI 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

& 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

Slide 13

Slide 13 text

GitHub push CircleCI JavaScript Python TypeScript  preview, master AWS CLI S3 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 13

Slide 14

Slide 14 text

CloudFront  CloudFront N. Virginia AWS CloudFront S3  2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 14

Slide 15

Slide 15 text

#3 w/o Bootstrap, Font Awesome, Adobe Color Wheel 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 15

Slide 16

Slide 16 text

 CSS Bootstrap 4.1.3 Font Awesome 5.5.0 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 Font Awesome    PNG 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Qicoo 1. SPA TypeScript React Starter 2. S3, CloudFront, CircleCI 3.  PC 2019-01-30 Cloud Native Developers JP #9 Twitter: #cndjp 20