Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
最近流行りのRemixとは何か
ryubb
February 26, 2022
Programming
1
140
最近流行りのRemixとは何か
ryubb
February 26, 2022
Tweet
Share
More Decks by ryubb
See All by ryubb
Reactの設計概論 ~おてつたびの事例に添えて~
ryubb
0
300
Other Decks in Programming
See All in Programming
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
1.9k
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
410
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
150
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
900
Modern Android Developer ~ 안내서
pluu
1
640
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
250
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
110
Jetpack Composeでの画面遷移
iwata_n
0
170
CSE360 Tutorial 07
javiergs
PRO
0
100
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
540
競プロのすすめ
uya116
0
670
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Infographics Made Easy
chrislema
233
17k
Writing Fast Ruby
sferik
612
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
The Power of CSS Pseudo Elements
geoffreycrofte
47
3.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Code Review Best Practice
trishagee
43
9.2k
Transcript
←マイページ登録 ←Twitter 最近流行りのRemixとは何か Presented by 橋本龍之介
←マイページ登録 ←Twitter 自己紹介 橋本龍之介 株式会社おてつたび フルスタックエンジンア エンジニア4年目 ◦使用したことがある言語 PHP, JS,
TS, Java, Python, Ruby ◦使用したことがあるフレームワークやライブラリ FuelPHP, React, Vue, Play Framework, Django, Ruby on Rails ◦その他 ReactとTSが大好き 最近はSwiftに挑戦中 超最近はRemixやSSR, エッジコンピューティングなど に触れている
←マイページ登録 Remixをご存知ですか?
←マイページ登録 ←Twitter Remixとは 1. 2021/11/23にリリースされたReactベースのフレームワーク 2. react-routerの制作者であるMichael Jackson氏とRyan Florence 氏が開発
a. React Tesing libraryの作者でもあるKent C. Dodds氏も参画 3. フロントエンドのフレームワームでもあるが、サーバーサイドのフ レームワークである Next.jsとは違い、本当の意味での「フレームワーク」であると言える ※VSする場合はBlitz.jsの方が正しい比較になるのかもと思いました
←マイページ登録 ←Twitter 今日話すこと 1. Remixの概念と哲学 2. Remixちょっとハンズオン 3. Remixの今後
←マイページ登録 ←Twitter 1. Remixの特徴と哲学
←マイページ登録 ←Twitter Remixの特徴① 1. Next.jsと同様、ファイルシステムルーティング a. ただし、NestedRoutingをサポート 2. SSG機能は提供せず、SSRのみをサポート 3.
ViewとController層のみを提供 a. Model層は開発者に委ねられている b. UIベースなフレームワークならでは 4. クッキーとセッション管理機能を提供
←マイページ登録 ←Twitter Remixの特徴② Reactベースのフレームワークであることの意味 そもそも、「データ」の使われ方 1. アプリケーション(UI)を構築すること 2. 分析して何かの判断材料にすること Rails等のサーバーサイドのフレームワークはModel(データ)層中心の設計が
なされるが、Webアプリケーションフレームワークである以上、View層へ最終的 にデータが渡される。 Reactベースであることにより、View層中心にアプリケーションを構築するの で、必然的にデータやロジックを構築することができる。
←マイページ登録 ←Twitter Remixの哲学 1. Server/Client Model サーバー・クライアント(ブラウザ)分離モデル 2. Web Standards,
HTTP, and HTML HTTPやHTMLなどのWebの標準と一緒に 3. Progressive Enhancement 可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供するこ と 4. Don’t Over Abstract HTTPやJSなどの抽象化を行わない https://remix.run/docs/en/v1/pages/philosophy
←マイページ登録 ←Twitter Remixの技術的な説明 1. Compiler コンパイラーであるが故に、どのようなサービスにでもデプロイすることが可能 2. HTTP Handler and
Adapters 3. Server Framework 多くのRemix APIはサーバーの機能を提供する 4. Browser Framework Remix APIもReact APIもブラウザで動作する https://remix.run/docs/en/v1/pages/technical-explanation
←マイページ登録 ←Twitter 2. Remixちょっとハンズオン
←マイページ登録 ←Twitter create-remixとファイル構成①
←マイページ登録 ←Twitter create-remixとファイル構成②
←マイページ登録 ←Twitter ページの追加とリンク①
←マイページ登録 ←Twitter ページの追加とリンク①
←マイページ登録 ←Twitter ページの追加とリンク②
←マイページ登録 ←Twitter ページの追加とリンク②
←マイページ登録 ←Twitter データの取得
←マイページ登録 ←Twitter データの取得
←マイページ登録 ←Twitter データの取得
←マイページ登録 ←Twitter 3. Remixの今後
←マイページ登録 ←Twitter ぶりぼんの考え ドキュメントを読み始めた頃は、これは来る!と思ったものの …… Next.jsや他のサーバーサイドフレームワーク同様、一つの選択肢でしかない Node.jsの知識がある程度必要で、 JS独自のライブラリ選定技術も必要。 他のフレームワークと比較したパフォーマンス計測が難しい。 つまり、開発者を選ぶフレームワークであると言える
Remixのパフォーマンスが安定して出せることが一般論になり、 Fly.ioやCloudflareなどのRemix実行環境を簡 単に作成してくれるPaaSが増えることで、多くの開発者に使われるようになる …気がする Remixの今後
←マイページ登録 ←Twitter まとめ 1. UIベースのフレームワーク 2. フロントエンドかつバックエンドのフレームワーク 3. ファイルシステムルーティング a.
NestedRoutingをサポート 4. SSG機能は提供せず、SSRのみをサポート 5. ViewとControllerの機能のみを提供し、Model層は公式から提供されてい ない 6. 素晴らしい技術で個人的には積極的に使いたいが、世の中を席巻するほ どではない
←マイページ登録 ←Twitter 参考文献 • Remix公式ドキュメント https://remix.run/docs/en/v1 • Remix という 考え方
https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86 • Remix vs Next.js https://remix.run/blog/remix-vs-next
←マイページ登録 ←Twitter 仲間募集中!
←マイページ登録 ←Twitter 仲間募集中! おてつたびでは、新しい旅の形を一緒に作っていく仲間を募集中です。 募集ポジションは以下の通りです。 • iOSアプリエンジニア • Webフルスタックエンジニア まずはカジュアルにお話ししましょう!
その後、おてつたびに興味を持っていただけたら、是非ご一緒しましょう。 Notion Wantedly iOS Wantedly フルスタックエンジニア
←マイページ登録 ←Twitter SNS SNSもやっています! 今後はZennをメインに発信しつつ、noteやTwitterも活用しています。 フロントエンド中心に発信しているので、興味ある方は閲覧 && フォローをお 願いします! Twitter
Zenn note