サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ合同フロントエンド勉強会

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

Hello！

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

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

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

早速開発！

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

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

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

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

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

一方で WEB開発の王道は JavaScript

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

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

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

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

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

なぜSvelte なのか

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

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

Jinja2(テンプレートのみ抜粋) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello, {{
name }}!</title> </head> <body> <main> <h1>Hello, {{ name }}!</h1> <main> </body> </html>

Svelte <script> let name = 'World'; </script> <main> <h1>Hello {name}!</h1>
</main>

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

Svelte <script> let count = 0; function handleClick() { count
+= 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button>

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

課題

JavaScript だれが作るの問題

デザイナーエンジニア

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

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

Resources

レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

More Decks by ニフティ株式会社

Other Decks in Programming

Featured

Transcript

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ合同フロントエンド勉強会

サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ合同フロントエンド勉強会

レバレジーズ x ココナラ x ニフティ合同フロントエンド勉強会