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
CarelyでBuefy使ってみてどうだった?
Search
yasudatoshiyuki
January 15, 2020
0
72
CarelyでBuefy使ってみてどうだった?
yasudatoshiyuki
January 15, 2020
Tweet
Share
More Decks by yasudatoshiyuki
See All by yasudatoshiyuki
襲来する課題の山に立ち向かう開発体制づくり
yasudatoshiyuki
0
180
エンジニア採用戦略で変わったこと、変わらないこと
yasudatoshiyuki
1
2k
エンジニアリングマネジメントでいかに事業をドライブするか?
yasudatoshiyuki
0
120
iCAREという組織にVPoEが必要になった理由とVPoEが果たす役割
yasudatoshiyuki
0
56
Rails開発者向けGraphQL入門
yasudatoshiyuki
0
37
Kubernetesでの環境構築および運用フロー構築のはなし
yasudatoshiyuki
0
84
GraphQLを導入してよかったこと大変だったこと
yasudatoshiyuki
0
99
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Embracing the Ebb and Flow
colly
84
4.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Transcript
CarelyでBuefy使ってみて どうだった?
自己紹介 2
名前:安田俊之 関わってきた技術: Linux, Docker, K8s, Terraform, Ansible, Chef, Ruby On
Rails, Vue.js, AngularJS, Symfony, FuelPHP, CakePHP Androidアプリ, Spring(Java), Perl/CGI PostgreSQL, MySQL, Oracle, PL/SQL Vim, Zsh, etc. 3
本題 4
みなさん、Buefyってご存知で すか? 質問 5
https://buefy.org/ Buefyとは 6
https://buefy.org/ Buefyの特徴 7
https://bulma.io/ ではBulmaとは? 8
https://bulma.io/ Bulmaの特徴 9
ではなぜBuefyを導入した か? Buefy導入の経緯 10
ではなぜBuefyを導入した か? Buefy導入の経緯 11
Buefy導入前、Carelyでは Material Design Lite を利用していました。 Buefy導入の経緯 12
https://material.io/ Material Designとは 13
Material Design Lite 14
Material Design Liteプロジェクトが Material Componentsに移行したの に伴い、Carelyもどういう方針をとる かの判断を迫られた Material Design Liteの後継
15
1. 見て見ぬ振りをする 2. Material Design Componentsを採用する 3. ゼロベースでその他のCSSフレームワークを検 討、採用する Material
Design Liteの後継 16
1. 見て見ぬ振りをする 2. Material Design Componentsを採用する 3. ゼロベースでその他のCSSフレームワークを検 討、採用する Material
Design Liteの後継 17
CSSフレームワーク検討資料 18
Buefy採用決定! いろいろあって 19
Buefyが適用されたCarelyの画面 20
ただ、選定にあたったメンバーが既にいないため、 数ある候補の中からBuefyを選定した詳しい事情 はドキュメントに残っておらず・・・ 21
選定にあたっての詳細な事情が最も期待されてい たのかもしれませんが、そのご期待には沿うことが できないので、エンジニアにBuefyに関するアン ケートをとり、赤裸々な真実を語ってもらいました! 22
Buefyアンケート in iCARE!!! 題して 23
Buefyのファーストインプレッション(はじめて使った ときの感触、感動)を教えてください ファーストインプレッション 24 いっせい 旧来使っていたCSSのフレームワークより 楽に実装できて感触よかった。 すん ほとんどのUIコンポーネントが揃っていて cssを書く手間が減った
。 たかさん (デザイナー) ほう、ようするにbootstrapですね(小並感) まさきち Element UIをよく使っていたが、使い勝手はそんなに変わらない かな、という感じ スタイル部分のドキュメントが Bulma側なので、ちょっと全体の把握はしづらかった きはら propsさえ正しく与えれば綺麗なボタンが実装できる って素敵やん おきな Bulma自体は結構良いなと思ってたけど、全コンポーネントを自分で書くの結構めんどくさいなと思ってました。 Buefyはbulmaベースで出来の良いコンポーネントを作っといてくれる ので、とても良いと思いました。 また、bulmaベースなので、Buefyにはないオリジナルな奴も bulmaのルールに乗って書くだけで作れるので、 スピード・柔軟性・スケーラビリティ全て兼ね備えていると思います。
Buefyを使うようになって(もしくはBuefyをCarelyに 適用して)何が変わりましたか? 何が変わったか? 25 いっせい 旧来のものはCSSのスタイルが長くなっていたので 見通しがよくなった気がします。 すん UIコンポーネントdefalut cssをカスタマイズ(cssのoverride)も可能だが、、
全体デザインの統一性を考えるとなるべくしない方がいいと思った。 たかさん (デザイナー) パーツの一貫性を意識するようになった 。 まさきち Buefyを使うようになってからしか知らないが、 MDL部分はつらみの塊な感触はある きはら いい感じのデザインの Buefyコンポーネントが多数用意されているので、 CSSに関する心配事が減った 。 おきな やはり実装速度ですね。 Buefyのコンポーネントをそのまま使うだけでも大体の画面は作れる所とか。
Buefyを使って良かった(良くなった、楽しくなった) と思うことを教えて下さい 良かった点 26 いっせい 当たり前ですが、Vue との相性がいいのでフロントの構築が楽 になったと思います。 すん ・各UIコンポーネントでVue.js
dataハンドリングがしやすい。( template側のコードが短くて済む ) たかさん (デザイナー) デザイン的な具体的な指示がなくても、 頭ん中でイメージをもって話せるようになった 。 まさきち UIやコンポーネント設計にある程度一貫性が出てきたのでは? エンジニア側から、こういうデータ構造ならこのコンポーネント使うのが良さそうですね、という提案がしやすい と思う きはら Buefyコンポーネントの中身の実装を考えることで、コンポーネント間のデータのやりとりに対する理解が深まった。 おきな スピード・簡潔さ・柔軟性のある開発ができてる ところ
Buefyに関して不満に思うことは何ですか? 不満な点 27 いっせい 各コンポーネントでオプションや slotがたくさんあるので、見つけられず車輪の再発明をしてしまうことがある。 ドキュメントが日本語であるとうれしい すん ・バージョンアップが早い が、古いバージョンとの互換性はどうなのか。。(不満というより懸念)
たかさん (デザイナー) とくに今のところはありません! まさきち CSSフレームワーク、UIフレームワーク全般に言えることだが、 気軽にバージョンアップ、などはしづらい とはいえ追随しておかないと、後々苦しくなる 特にCSSフレームワーク側の命名ポリシーとか、そもそもの UIの方向性が変わると厄介( Bootstrap3→4みたいな)なので、その辺りは今後懸念される 特にBuefyはBulmaに依存しているので、ちょっとややこしそう きはら b-table&slot-scopeの実装例を公式ドキュメントに載せておいてほしい 。 おきな 凄く良いところしかないので、 コンポーネントカタログをもっと増やしてくれても良いかな と思います。
アンケート結果ではUIコンポーネントライブラリを導 入すると、こんな風に変わるよ、ってところはわかっ ていただけたかと思います。 ただ、他のコンポーネントライブラリとの比較みた いな点を浮き彫りにできませんでしたので、その点 はおまけとしてお話させてください。 おまけ 28
なんとなくVue.jsのUIフレームワークを紹介する https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607 上記サイトでは、おすすめ度が Bootstrap-vueが★★★★★ Vuetify, Buefyが★★★★ でした。弊社メンバーの評価はどうなんでしょうね? そこは、この後の懇親会で聞いてみてください! おまけ 29
https://www.npmtrends.com/bootstrap-vue-vs-buefy-vs-v uetify もうひとつおまけ 30
Buefyがんばれ! ご清聴ありがとうございました! 最後に一言 31