WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
次の時代のCSS in JSはWeb Componentsを従える
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
Custom Elements を正しく実装するのはとても難しい - ジンジャー研究室
React みたいなコンポーネント作る系フレームワークだと思って Custom Elements を使おうとすると、たちまち死んでしまう。まだ色々試している最中なのでアウトプットはないんだけど、とりあえず今考えてることを書いておく。役立たないし刺されたら困るからポエム宣言しとこうか。ポエムです。 Custom Elements やっていきたい Custom Elements の良さは特定のフレームワークに依存しないところだと思う。例えば React とか Vue とかだとそれぞれのフレームワークの世界にどっぷり浸かってしまい互換性がないが、 Custom Elements ならば普通の要素の延長線上でどこに持って行っても使える。 npm とか使わなくても script タグで CDN とかから持ってくればすぐに動く。夢のよう。もちろん、データフローはアプリケーション固有のものになるだろうか
Web Components で 社内 UI ライブラリを作っている 話
WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/
7 Tools for Building Web Components
The ecosystem is getting ready for web componentsSo lately there’s been much buzz around web-components. Here’s the gist of why: Components and widgets that build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. This means more reuse, better stability, abstraction and standardization, less work and pret
初心者向けWebComponentsまとめ - Qiita
概要 WebComponentsって何か聞いたことあるけど部品の再利用でしょ？UIライブラリで良くない？って人向けのざっくりまとめ。深いところはあまり書かずにざーっと流して「何となくわかった気になった」感じになってもらえたら良いなと思います。結構長くなる（と思う）ので、気楽に「にゃーん」とか言いながら流し読んでください。 まず試してみたいんだ！という方は「実際に使ってみよう」まで飛んで頂ければと思います。 今までのWebにおける部品再利用のアプローチ WebComponentsという言葉自体位は数年前から小耳に挟むことはありましたが、ここ最近は比較的良く聞く単語になりました。それはそれとして、今までWebにおける部品の再利用はライブラリやフレームワークに依存していました。依存していると言うことは依存しているものに準じる必要があり、そこから別のライブラリやフレームワークに移行するのであれば、
Lightning-fast templates and Web Components - lit-html & LitElement | Blog | Chrome for Developers
Today we're excited to announce the first stable releases of our two next-generation web development libraries: lit-html and LitElement. lit-html is a tiny, fast, expressive library for HTML templating. LitElement is a simple base class for creating Web Components with lit-html templates. If you've been following the projects, you probably know what lit-html and LitElement are all about (and you c
How JavaScript works: the internals of Shadow DOM + how to build self-contained components
This is post # 17 of the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript tool for developers to identify, visualize, and reproduce web app bugs through pixel-perfect session replay. If you missed the previous chapters, you can find
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cascading Style Sheet module scripts · Issue #759 · WICG/webcomponents
Web Components のリアル/ Realistic Web Components - Speaker Deck