フロントエンドを楽にするために
フロントエンドを楽にするために Qiitaを支えたい技術 at 時雨祭 About HN: mizchi Qiitaの方からきました(入社半年たったらしい) Reactオジサンはそろそろ飽きてきた Angularに興味が無いのでこっちにきた 最近の業務 Kobito for Windows Closedβ中: もうちょい待ってろ お前らウェブエンジニアはWindows使わないのでβユーザー集めにくいんじゃ 省力モード 一昨日がClosedβリリースだったんで察してくれ！！！ ついさっきまでバグフィックス用のビルド作ってた Qiitaを支える技術? 4ヶ月ほどほぼソロ作業 正直カウボーイぎみ OSSでドキュメントガンガン書いてカバー(したい) 業務から派生したOSS mizchi/arda Flux フレームワーク mizchi/stone-skin IndexedDb ラッパー mizch
ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という 言葉を全く聴いたことがない方は少ないのではないでしょか。 すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しか し、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるで しょうか？この記事では、それを試みていきたいと思います。 デジタル部品の流通革命 # ソフトウェア部品の流通に今、大きな変化が起きてきています。 数年前のオープンソース環境を覚えているでしょうか？レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことな るバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送る のも面倒でした。 そんなオープンソースを取り巻く環境が、git や GitH
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
Shumpei Shiraishi's Weblog: Web開発を革命する（かも知れない）Web Componentsという仕様について
2012年12月25日火曜日 Web開発を革命する（かも知れない）Web Componentsという仕様について Web Componentsは、現在のところ余りまとまった日本語の情報がないようですが、Web開発を大きく、本当に大きく変える可能性を持つテクノロジーです。 Web Componentsは、現在のWebが抱える大きな問題点を解決する手段としてW3Cで仕様が策定中です。仕様策定を主導しているのはGoogleで、現時点ではGoogle Chrome（WebKit）がWeb Components（の一部）を実装している唯一のブラウザです。 Google Japanのエンジニアも、Web Componentsの実装には深く関わっているとのことなので、そのうち日本語の情報も充実してくると思われますが、本エントリはそれまでのつなぎ、ということで書いてみたいと思います。 しかし、Web Co
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
先週はサンフランシスコで勤務先の年次博覧会が催され、中には自分と近いプロジェクトを紹介するセッションもあった。 いい機会なので便乗して宣伝してみたい。自主会社員活動につき勤務先の見解と違っても見逃してください。 さて件の年次博覧会、ウェブ開発者向けの講演の一つで Polymer という新しい JavaScript UI フレームワークが公開された。 Closure, GWT, Angular ときて また別のフレームワークかよ…とぼやく人の気持ちもわかる。でもそれほど被るものでもないから見逃してほしい。 なるべく多くのブラウザで動かそうとする既存のフレームワークと違い、 Polymer は新しいブラウザの機能を使い倒すことで強力なフレームワークを作ろうとしている。 別に特定ブラウザでしか動かないわけじゃない。ただ将来そうした新しい機能が各種ブラウザに備わる日を見越し、 そのときベストに動く
Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい
この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらのスクリーンショットをご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，markdown ライブプレビューやカーソル位置での画像ポップアップ，組み込みブラウザなど謎の UI が見て取れます．本記事ではこれについてボトムアップで必要な知識から順を追って紹介します． 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます． 目次 Web C
そろそろ勉強しないトナーと思いつつもだるくなる原因列挙する 前提 お前はJS書いてればいいよと甘やかされてきたので仕事で書いた量は少ない リフロー、ペイント等の表示制御系とパフォーマンス周りだけはそれなりに知ってる position: absolute や visibility: hidden とか 簡単な装飾はできる 段組とかの知識があんまりない わからないこと 解法が一つではなく、最適解がわからない 数こなせばわかる気がするが時間かかってだるい すでにあるサイトを参考にするもそれが正しいのかよくわからない 正解が(プログラマ的感覚だと)醜くみえる たとえば中央寄せ たとえば段組 このrelative指定は本当に必要なのか…みたいな ググって引っかかる資料のレベルが低い 古のspacer.gifとか未だに引っ掛かる これはJSと同じ問題なので2010~の資料しかみないようにする 楽できそ
を晒すことで俺以外が試してくれるかもしれない！というのは置いといて、現在の知見です。 MV* React | A JavaScript library for building user interfaces Facebook製データバインディング。jsxという謎拡張子に目をつむれば未来を感じる設計。とにかく生DOM触りたくないという気概を感じる。 Welcome - Polymer Google製WebComponent。WebComponent使うならこれが有望株っぽい。 component/component MV* とはちょっと違うけどCSS/JavaScript/HTML まとめてライブラリにできる。JavaScript以外もライブラリに含む際は有望。 何がしたいかはt_wadaさんがまとめてくれたtogetterみてください。Web フロントエンド開発用パッケージマネージャ c
2016年6月14日 Webサイト制作, Webデザイン Webデザインのプロセスが変化しています。以前「実践で学ぶWebサイト制作ガイド まとめ」という記事でWebサイトの制作手順を紹介しましたが、この方法はまだ使えるものの、徐々に廃れていくでしょう。最近ではこの記事で書かれているように、画面にあるパーツ（部品）のみを用いてデザイン・コーディングするのではなく、あらかじめ様々なパーツを作っておいて、それを組み合わせて画面を構成していく方法に移りつつあります。今回はそんなパーツをまとめた「コンポーネント」について考えてみましょう。 ↑私が10年以上利用している会計ソフト！ コンポーネントとは？ Webデザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それ
[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol
![[deprecated] 今Polymerに乗っかると危ないと思う4つの理由](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビューライブラリ/フレームワーク モジュールバンドラ タスクランナー パッケージマネージャ テスティング トランスパイラ 2016年に使った: Babel。各ブラウザの JavaScript エンジンで ES2015~ES2017 の実装が進んでいるので、関わっている案件のブラウザのシェア次第なところもありますが、ES2015~ES2017 の仕様だけトランスパイルしたいのであれば、再来年あたりから要らなくなるんじゃないかな、という気持ち。 来年使いそう: 静的型付けがメインで、ES20XX から ES5 へのトランパイルは副次的で
customelements.io
customelements.io Coming Soon!
The web frontend scene is witness to many new frameworks and ways of working. It can be quite annoying when software becomes legacy quicker than ever. But actually, it's just good old innovation happening as it should, because the opportunities for improvement are there. Frameworks come and go, but what remains are the good ideas that they brought to the world. We're going to talk about the good i
Web Component概要
Introduction to JShell: the Java REPL Tool #jjug_ccc #ccc_ab4bitter_fox
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。
Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。 Cart に入れて Download カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせると
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
Hello 生成されるJSそのものはピュアな感じなので、たしかにbosonicを捨ててもWeb Componentsとして成り立ちそうではある。 瑣末だが、この記事を書いてる時点で試したらWeb Platform featuresのフラグをEnableにしたCanaryで、bosonic-pollyfillsがエラー吐いてる... 余談、実はえらいかも Polymerコンポーネントって、結局Polymer入れないと使えないなら、BackboneJSで使えないAngularディレクティブみたいなもんな気がしてきた。Bosonicのコンセプト、実は偉いかも。（出来る範囲は制限されるかもしれないけど） — あほむバーガー (@ahomu) June 30, 2014 結論 個人的にはふつうのPolyfillとして動いてくれるものを精査したかったのだけど、結果的に Polymer/platform
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
チームでコンポーネントを構築する : 開発者間でコンポーネントの一貫性を保つための、シンプルな練習問題 コンポーネントは 素晴らしい ものです。 HTML と JavaScript と CSS を、再利用もテストも可能なコードのパッケージとしてカプセル化できます。 コンポーネントにまつわる一つの問題として、 独断的 になりうる、ということが挙げられます。私が「これはコンポーネントだ」と分類するものが他の人にとっては違うこともありますし、逆もまた然りです。 チームで仕事をするときは、 意見 と 知識 を共有することが大事です。それでは、チームでコンポーネントを構築する場合、意見が一致しているかを確認するためにはどうすればよいでしょうか？ この投稿では、私たちがアプリケーションをコンポーネントに分解するときの思考プロセスを辿り、自分たちの考えと周囲の開発者たちの考えのギャップをどのように埋めて
Big Sky :: Web Component を簡単に作れる JavaScript ライブラリ「X-Tag」
某 slack で x-tag を教えて貰ったのでちょっと遊んでみた。 X-Tag ★ Web Components Docs Table of Contents Getting Started Registration - Where it All Begins The most important method ... http://x-tag.github.io/ X-Tag は Web Component を簡単きれいに作れるライブラリで、Microsoft からのサポートを受けている事をウリにしているらしいです。動作に必要なのはカスタムタグがサポートされているブラウザというだけで、polyfills も使う事が出来ます。 簡単なチュートリアルが Docs に書かれているのでパッと見ただけでだいたい API が予想できます。自前のメソッドや属性、イベントを定義する事が出来るのでコン
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfillとして適用するのは、もちろん platform.jsです。これを使って、複数のWebブラウザで動作検証をちょっとしてみようと思います。試してみたのは、以下の3つです。 基本的なWeb Componentsの動作確認 HTMLElement#createShadowRoot()の動作確認 Shadow DOMのCSSスコープ それぞれ見ていきましょう。 基本的
VimConfは、テキストエディタVimのユーザーと開発者のための国際カンファレンスです。2018年11月24日に東京 秋葉原でその6回目となるVimConf 2018が開催されました。 今回の目玉は、Vimの作者Bram Moolenaarさんの登壇です。運営の方によると、Bramさんの招致はずっと夢だったようで、何ヵ月もの交渉を経て講演が決まった際は嬉しかったそうです。 本レポートは、LTを除くセッションの内容を中心にお送りします。 オープニング キーノート『What is the next feature? - Who makes next feature of Vim』 ― mattn mattnさんは、日本のVimコミュニティ vim-jp のキャプテンとして活動を続けられている方です。書籍『Vimテクニックバイブル』や『Vim scriptテクニックバイブル』の執筆に携わり、雑
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
次世代 Web カンファレンス - connpassに参加してきたのでメモ。 このメモは文字起こしではなくあくまでメモなので、そのままの発言じゃなくて解釈や要約が混じっています。 詳細は動画をみてください 次世代Webカンファレンス 2019 - YouTube パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気にすることは減ったけど、結局は気になる likr: H2 Pushとかが気になっている? 1000ch: 実際に使ったことないけど、会場で使ったことある人? 2割以内ぐらい sisidovski: 「Pushで早くなる」ということ
Frontrend Conference - A conference for front-end developer（2015年2月21日開催） に参加してきたのでメモ 殆どCSS側のセッションにいたのでCSSが中心。 終わったあとに#ゴーヤsushiと#ルノアール_sushiをしたのでとても長かった。 Pragmatic Front-end Developer: From Artisan to Expert - 斉藤 祐也 基調講演 メンテンス性 WEBを構成するJS+CSS+HTMLはあんまりメンテしやすくない けど専門的な知識がなくてもかけてしまう学びやすさがある 言語的にシンプル コードスタイルガイドライン 多くの人が開発しても、一人の人が書いたように見えるようにしたほうがいい JavaScript IDOMATIC.js jQuery Code Style GuideLine
Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所から人様のライブラリを借りてツギハギして習作してみた次第。借りてきたライブラリ（HTML String パーサと Virtual DOM）は独自実装しても楽しそうなので、やる気があればやる。 もちろん実験品なので、実用には耐えない Files claylump.polyfill.js（webcomponents.js + window.fetch + es6promise） claylump.run
glitch-image の使い方 一番シンプルに glitch-image を使う方法は <script> タグで呼び出す方法です。 <script src="https://unpkg.com/@uit/glitch-image@0.0.9/dist/glitch-image/glitch-image.js"></script> <div style="width: 200px; height: 200px;"> <glitch-image src="..."></glitch-image> </div> Web Component なので、これだけで好きな画像にグリッチエフェクトを適応することができます。 一方で、React や Vue.js などのコンポーネント内で適用したいケースも勿論あるはずです。そういった時は、 NPM パッケージ `@uit/glitch-image` をイ
※ ○＝サポート済み、△＝開発中／予定あり、×＝開発予定なし Web Componentsの構成要素すべてをウェブブラウザがネイティブサポートしているのは、ChromeとOperaのみです。その他のウェブブラウザは、部分的なサポートにとどまっています。 Web Componentsを試したい時は、実際には上記の表で掲載されたすべてのウェブブラウザで既に試すことができます。数多くの×マークがついているウェブブラウザについても、その穴を埋めてくれる機構（Polyfill）を利用することによって、Web Componentsを試すことが可能です。しかし、そのPolyfillも完全ではなく、どうしてもネイティブサポートしているウェブブラウザとの挙動の差が出てしまいますし、動作スピードについても雲泥の差が出てしまいます。 やはりWeb Componentsは、主要ウェブブラウザがネイティブサポートし
電通デジタル エンジニアの おのきです。前回の記事は「SQLスクリプト上でのテーブルや共通テーブル式の依存関係を可視化する」でした。 今回はDentsu Digital Tech Advent Calendar 17 日目の記事になります。 私たちの開発チームでは、社内向け業務システム「EASI」においてデジタル広告のプランニングツールや過去実績のレポーティングツールを日々開発、運用しています。 「EASI」では MicroServices アーキテクチャーを採用し開発を進めており、バックエンドだけでなくフロントエンドについても Micro Frontends という仕組みを取り入れてサービス提供を行っています。 私たちのチームで Micro Frontends を導入してからちょうど一年になるので、ここで改めて導入の目的や選択した技術、導入手順、運用上の注意点や課題と対策をこの記事で覚書
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ Web Components はウェブ開発に革命を起こすのか
本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
DEFGHI1977のWEB技術まとめ・ツール等
『Web Componentsで行うHTMLのコンポーネント化』
Polymer Project
Polymer と Web Components - steps to phantasien
CSS勉強するだるさ - mizchi's blog
JavaScriptで最近試そうとしてるライブラリ - mizchi's blog
これからのWebデザインは、コンポーネント化を意識しよう
[deprecated] 今Polymerに乗っかると危ないと思う4つの理由
Web Components普及の夜明け！？Polymerを試してみた。 | OpenWeb
HTML Imports: ウェブのための #include - HTML5 Rocks
webcomponents.org - Discuss & share web components
2016年に使った&来年使いそうな JavaScript 関連のものと所感 - kitak blog
Reactive MVC and the Virtual DOM
Learn web development | web.dev
The State of Web Components
Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
Web Components を支えるPolyfillライブラリ
チームでコンポーネントを構築する : 開発者間でコンポーネントの一貫性を保つための、シンプルな練習問題 | POSTD
Web ComponentsのWebブラウザ別動作を調べてみた
生みの親が語る“Vimの27年”とこれから ―「VimConf 2018」レポート：レポート｜gihyo.jp … 技術評論社
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
次世代 Web カンファレンス 2019 アウトラインメモ
Frontrend Conference アウトラインメモ
Web Components(+Virtual DOM)ラッパー書いてみた
UIT 発の OSS コンポーネント glitch-image を公開しました
2017年のWeb Components | gihyo.jp
Micro Frontends導入の覚書｜Dentsu Digital Tech Blog