Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Streamlit Meetup Workshop:Streamlitのコントリビューションに...
Search
Toru Hiyama
December 24, 2023
Programming
0
120
Streamlit Meetup Workshop:Streamlitのコントリビューションに挑戦してみよう
2023/12/21 開催のStreamlit Meetupにて開催したワークショップの投影資料
Toru Hiyama
December 24, 2023
Tweet
Share
More Decks by Toru Hiyama
See All by Toru Hiyama
Snowflake ✕ LangChain でできること
toru_data
0
190
Snowpark for Python を効率的に使いこなすスタートライン(UDF)
toru_data
0
88
SPCSでエンドツーエンドな深層学習に挑戦してみた
toru_data
1
120
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
開発生産性を上げるための生成AI活用術
starfish719
1
170
Model Pollution
hschwentner
1
180
dynamic!
moro
9
6.5k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
Catch Up: Go Style Guide Update
andpad
0
170
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Unsuck your backbone
ammeep
671
58k
GraphQLとの向き合い方2022年版
quramy
49
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualization
eitanlees
148
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Rails Girls Zürich Keynote
gr2m
95
14k
A better future with KSS
kneath
239
17k
Transcript
ワークショップ: Streamlitのコントリビューションに 挑戦してみよう SnowVillage - Team Streamlit 2023/12/21 (木)
本日の仕掛け人 Toru Hiyama Data Engineer @NTT DATA X(Twitter):@toru_data Qiita:@toru_hiyama Akira
Sakatoku Core Staff @KDDI Corporation. X(Twitter): @AkSakatoku Qiita: @ak-sakatoku Yuki Yamanaka Data Engineer @NOVASELL X(Twitter): @yamnaku_ Kohei Komiyama Data Engineer @GENDA Inc. X(Twitter): @kommy_jp Zenn: @kommy339 Mizuho Yashiro Data Engineer @truestar X(Twitter): mizuhoruisui
ワークショップでやること / 流れ • OSSコントリビューションの一連の操作を確認します • Streamlit 自体の開発環境を、GitHub Codespacesに構築します •
Streamlit のソースコードをいじって遊んでみましょう! • 最後に、Pull Request までの流れを確認します これでみんなも、OSS コントリビュータ!👑
早速ですが・・・、開発環境を構築しておきましょう セットアップに時間がかかるため、先に開発環境を構築していきます🔧 下記のGitHubリポジトリにアクセスして、「1. Codespacesの起動」と 「2. Streamlit Contribute環境の構築」の操作を行います https://github.com/THiyama/codespaces-st-contribute 2.の操作を最後まで実行すると10分ほどパッケージの インストールが始まるので、それまで解説をします。
Streamlit 開発環境について Streamlit にコントリビュートするために、Streamlit リポジトリの CONTRIBUTING.mdに開発環境の構築方法が記載されています🖊 • 今回用意した環境は、この CONTRIBUTING.mdに則っています。 •
Ubuntu 20.04 / Node.js / CRACO(Create React App) / Python 3.8 / などなど ❏ GitHub Codespaceについて ❏ 今回みなさんに構築いただいた環境は、 GitHub Codespaceという開発環境です ❏ クラウドベースのインスタントな開発環境なので 素早く・再現性高く・簡単に構築できます ❏ ぜひ今後の開発でも使ってみてね!
OSS コントリビュートって? OSS へのコントリビュートには、コードを書くだけでなく様々な形があります。 • 📢Issueの報告:バグや提案を報告 • 📃ドキュメントの改善:利用ガイドの更新や、セクションの追加 • コードの実装:Issueのバグや提案の実装
• 🤝コミュニティサポート:チャットルームなどでの質問への回答 どれも重要なのは「プロジェクトに価値を提供すること」です。 まずは、ドキュメントの修正や見つけたバグをIssueで登録することなどから 始めてみましょう!🚀
OSSプロジェクトへのコントリビュートは、以下のステップに沿って行われます • プロジェクトのガイドライン、コントリビュートドキュメントを読む • Issueの確認、報告、ディスカッション • コードの実装、Pull Request • コードレビュー、承認
/ 拒否 OSS コントリビュートの流れ 共有リポジトリ フォークリポジトリ フォーク Pull Request クローン Push 🙋 Issue プルリクの確認 メンテナンス
今回のStreamlit コントリビュートの対象 Streamlit コントリビュートというと、大きく分けて2つの種類があります 1. Streamlit 自体へのコントリビュート 2. Streamlit カスタムコンポーネントへのコントリビュート
今回は、1. Streamlit 自体へのコントリビュートを確認することで、いつも使っているOSS のバグや機能拡張、ドキュメント執筆を行う方法を理解します🎓 ➔ カスタムコンポーネントについては、Yuichiroさんや公式ドキュメントその他 Webから情報収集してみましょう!🔍
Streamlitへのコントリビュートをはじめる コントリビュートをはじめるにしても、題材がないとはじまりません。 そこで、今回のテーマを、 「st.snow()❄ があるなら st.fires()🔥 があってもいいじゃないか!」 というものにしましょう。
StreamlitリポジトリにIssueを立てる そうと決まれば、まずすべきことは何でしたか?👀 そう、プロジェクトガイドラインやリポジトリのIssueを確認することでしたね Issueを確認して、同じアイデアを持った人がいれば、アイデアを共有したり、 実装方法を一緒に考えたりしましょう💡 今回はIssueを立てることはしませんが、リポジトリのIssueを確認しておきます https://github.com/streamlit/streamlit/issues
Streamlit の開発をはじめる 開発環境は手元にあるので、早速開発をはじめていきましょう! • メモ「3. Streamlit Contribute作業の開始」に従って作業を進めます • ここでは、ビルドサーバーの起動と、Streamlitアプリの起動を行います ターミナル1:ビルドサーバー
ターミナル2:ビルドサーバー ブラウザ(自動で起動してくるはず)
時間の限り、Streamlit のソースコードをいじってみる ここからは時間の限り Streamlit のソースコードを修正して遊んでみましょう! (15:25まで) • 修正内容/方法は、メモ「4. Streamlitの開発」を参考にしてみてください •
メモ:https://github.com/THiyama/codespaces-st-contribute • コードの修正は、今回のテーマや、上記のメモに縛られなくても大丈夫。 • 気になったことは、どんどん質問・相談・雑談してみましょう • 今日は、Streamlit に興味がある人、Streamlitで開発を行っている人、 さらには、Streamlit コントリビューター、Streamlit Co-founderが集まる不思議な機会です。
st.fires()の実装例と動作の様子 下記のファイルを編集・追加します🔧 • TypeScript ◦ streamlit/frontend/lib/src/components/elements/Fires ◦ streamlit/frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx • Python
◦ streamlit/lib/streamlit/elements/__init__.py ◦ streamlit/lib/streamlit/elements/fire.py ◦ streamlit/lib/streamlit/__init__.py ◦ streamlit/lib/streamlit/delta_generator.py • Protocol Buffers ◦ streamlit/proto/streamlit/proto/Fire.proto ◦ streamlit/proto/streamlit/proto/Element.proto 追加方法は、「4. Streamlitの開発」のパターン2 を参考にしてください
実装が終わったら・・・ ソースコードのテストやリント、Push、そしてPull Requestを行います • 「5. StreamlitにContributeする」を参考に行います • このとき、Pushまでは実施して大丈夫です ◦ Push先は、あくまでみなさんがフォークしたリポジトリです
• しかし、今回は、Pull Requestは行わないようにしてください⚠ ◦ 今回のワークショップでは、Issueでの議論やテストをしっかり行えていません
ワークショップ後のお掃除について • 今回使ったGitHub Codespacesは停止した状態(無課金)で残るので、 適宜削除してください。 • また、自分のGitHubアカウントにフォークしたリポジトリも 適宜削除して問題ありません。
おわりに 今回のワークショップで、OSSにコントリビュートするための流れを一通り学習しました。 また、Streamlitの実装の中身も少しだけ確認することができました。 • お世話になっているOSSのバグを見つけたら、報告してみよう 📢 • まずは、ドキュメントの追加や修正からでも大丈夫 📃 •
これからの OSS Journey⛵ を楽しんでいきましょう!🎉