Slide 1

Slide 1 text

サービスにSvelteを 採用した経緯とその理由 三社合同フロントエンド勉強会 By たけろいど

Slide 2

Slide 2 text

Hello!

Slide 3

Slide 3 text

ニフティからきました たけろいどです

Slide 4

Slide 4 text

お客様に最も近く、 感動されるISPへ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Svelteとは? コンポーネントをコンパイルすることで、 パフォーマンスの向上とコードのサイズを 小さくしている。 直感的かつシンプルな構文が特徴で、学 習曲線が緩やか。

Slide 10

Slide 10 text

早速開発!

Slide 11

Slide 11 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 12

Slide 12 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 13

Slide 13 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 14

Slide 14 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 15

Slide 15 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 16

Slide 16 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 17

Slide 17 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 18

Slide 18 text

FlaskとJinja2がたちはだかった! > たたかう にげる

Slide 19

Slide 19 text

お客様への 価値提供スピード低下

Slide 20

Slide 20 text

よりよいUXを提供するために よりよいUIが求められる

Slide 21

Slide 21 text

WEB開発へのコストは 増加傾向

Slide 22

Slide 22 text

Jinja2はPythonでつかえる テンプレートエンジン

Slide 23

Slide 23 text

一方で WEB開発の王道は JavaScript

Slide 24

Slide 24 text

エコシステムが使えないため 開発者の負担増加

Slide 25

Slide 25 text

加えて Flask+Jinja2は コンポーネント指向でない

Slide 26

Slide 26 text

E2Eテストが増え テストに対するコストが増加

Slide 27

Slide 27 text

提供価値を良くしていくには 時間がかかる エコシステムやテストを使い スピード・品質を向上

Slide 28

Slide 28 text

FlaskとJinja2がたちはだかった! > たたかう にげる モダンフロントエンドで 価値提供スピードをあげる

Slide 29

Slide 29 text

なぜSvelte なのか

Slide 30

Slide 30 text

お客様に最も近く、 感動されるISPへ

Slide 31

Slide 31 text

お客様に寄り添い わかりやすいUIを提供する

Slide 32

Slide 32 text

Svelteのモットーは シンプルであること

Slide 33

Slide 33 text

Svelteのモットーは シンプルであること

Slide 34

Slide 34 text

Jinja2(テンプレートのみ抜粋) Hello, {{ name }}!

Hello, {{ name }}!

Slide 35

Slide 35 text

Svelte let name = 'World';

Hello {name}!

Slide 36

Slide 36 text

React import React, { useState } from 'react'; function CounterButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} {count === 1 ? 'time' : 'times'} ); } export default CounterButton;

Slide 37

Slide 37 text

Svelte let count = 0; function handleClick() { count += 1; } Clicked {count} {count === 1 ? 'time' : 'times'}

Slide 38

Slide 38 text

関わる全員に 優しいフレームワーク と感じた

Slide 39

Slide 39 text

関わる全員に 優しいフレームワーク と感じた

Slide 40

Slide 40 text

課題

Slide 41

Slide 41 text

JavaScript だれが作るの問題

Slide 42

Slide 42 text

デザイナー エンジニア

Slide 43

Slide 43 text

デザインシステムを みんなで学ぶ会

Slide 44

Slide 44 text

お客様に最も近く、 感動されるISPへ