Architecture with Ivy: A possible future without Angular Modules - ANGULARarchitects
Architecture with Ivy: A possible future without Angular Modules For Ivy, NgModules are optional. This allows us to structure Angular applications with pure EcmaScript techniques like barrels and packages. This article is part of an series: Part 1: A possible future without Angular Modules (this one) Part 2: Higher order and dynamic Components As there is already a module system in EcmaScript, the
stencilがよさそうな話
ionicチームによるWeb Components/PWAコンパイラ Custom Elementsライブラリをビルド PWAなアプリケーションをビルド Version 0.12.0-3 AngularとReactを混ぜたみたいなシンタックス VirtualDOM TypeScript製 # npm 6 or higher # create component library $ npm init stencil component my-components # create stencil application $ npm init stencil app my-app # 2018/8/22時点ではこれがないとbuildでこける :innocent: $ npm i -D request $ npm start $ npm test $ npm build import { Com
Web Components を本番投入する（2018年春）
2018.02.16 Web Components を本番投入する（2018年春） とあるプロジェクトの技術監修をして、大まかに Web Components + Payment Request API な構成で進めてみたのでその話を思い出しながら書く。ちなみに FRESH! ではないです。 決済基盤をサービスで使うための SDK Payment Request API でお察しの通り、新たな決済基盤のプロジェクトで、それを使うための SDK を読み込んでボタンを配置すれば決済できる…みたいなものを作った。Payment Request API は、対応している環境ではそれで、対応していない環境では旧来の通り決済代行業者が用意しているフォーム付きページへ遷移させるという形でビジネスサイドへ提案した。 技術面に関しても、FRESH! で導入済みだったこともあり、いざとなればサポートできるとい
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
進化するWeb Componentsの今、2016年最新情報
Web Componentsが変えるWeb開発の未来から、はや二年が経ちました。コミュニティでの議論やフィードバックを経て2016年現在、Web Componentsの仕様は大きくアップデートされています。先日行われたDevFest Tokyo 2016でもWeb Components 2016 & Polymer v2 と題してWeb Componentsの最近についてお話しました。 これまでGoogleを中心に策定されてきたv0の仕様を元に、新しい仕様はMozillaやAppleなどの各ブラウザベンダーの合意を改めてとりながら策定が進められています。今日はアップデートされたWeb Componentsの仕様を説明していきます。 基本概念については割愛しますが、えーじさんのShadow DOM – Web Componentsを構成する技術:Tender SurrenderとCustom
Custom Elements v1 - Reusable Web Components | Articles | web.dev
Custom Elements v1 - Reusable Web Components Stay organized with collections Save and categorize content based on your preferences. Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components. With Custom Elements, web developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored.
webcomponents v1 libraries
class MyElement extends Polymer.Element { static get is() { return ‘my-element’; } static get config() { properties: { //the properties you know and love from Polymer }, observers: [ //the observers you know and love from Polymer ] } constructor() { super(); … } } customElements.define(MyElement.is, MyElement);
Hayato.io
Hayato.io This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Top 10 Luxury Cars Best Penny Stocks Online classifieds music videos High Speed Internet Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Do Not Sell or Share My Personal Information
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
What is shady DOM? - Polymer Project
Blog What is shady DOM? Why do we need a new kind of DOM? 2015-05-28 Table of ContentsWhy a new kind of DOM?DOM PollutionTree ScopingShadow DOM EncapsulationShadow DOM is awesome, why is there a shady DOM?Shady DOM is BornSummary Why a new kind of DOM? Encapsulation is at the core of web components. Web components aim to provide the user a simple element interface that is rendered with complexity
Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic
Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic 泉水翔吾 この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第5回目になります。今回は、先日発表されたPolymer 0.8の変更点、MozillaのWeb Componentsへの関わり方やX-Tag、Brick、BosonicといったPolymer以外の周辺ライブラリについて紹介します。 Polymer 0.8のリリース 先日、Polymerのバージョン0.8がリリースされました。 0.8 Released! – Polymer Blog 0.8は1.0のリリースに向けたアルファリリースと位置付けられています。APIも正式版への提案として大きく変更が加えられており、これまでとの互換性も保たれていません。既に実践でPolymerを使って
Web Components における依存ライブラリの断片化とエコシステムのコロニー化
あくまで可能性のはなし あまりポジティブな意味で捉えられないのでタイトルですが、あくまで可能性の話であり、直面するかもしれない問題についての一次考察って感じです。 コンポーネントが依存するライブラリの断片化 ラッパーライブラリによるロックインまたは断絶 その他の妄想 ここでは上記の3点について、つらつら書いてます。 1. コンポーネントが依存するライブラリの断片化 これまで開発者は自身がすべてのコンポーネントを管理するつもりで、ときにミニマルに、ときに富豪的に、依存するライブラリを選定していました。 いつの日か Web Components を前提にしてコンポーネントを選定するときも、個々が依存しているライブラリまでコントロールしきれるかは定かではありません。 依存関係の肥大化は避けたい 例えば npm であればさほど気にならない依存関係の肥大化も、ブラウザで実行されるコンポーネントの場合
HTML Imports - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 Template や Shadow DOM、Custom Elements を使うことで、機能ごとの UI コンポーネントが実現できるようになることはこれまでに説明してきました。しかし、それらを使ったコンポーネントの HTML、CSS、JavaScript を別々に呼び出すのは、非効率です。 依存関係の解決も容易ではありません。jQuery UI や Bootstrap を思い出して下さい。JavaScript、CSS、Web Font といった各種リソースを、必要に応じて別々のタグに記述しなければなりませんでした。特にタグごとにコンポーネントとして扱うことが想定されている Web Components の場合、状況が複雑化することは簡単に想像できます。 これらのリソースを、ひとつの HTML ファイルにまとめて
Polymer と Web Components の違い9選（もとい Polymer の便利機能）
違い、または付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。（つい最近、それに加担したような気もする） 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> が自動で Shadow DOM に放り込まれる Shadow DOM内の <link> をインラインの <style> に展開 repeat のサポート {{interpolate}} のサポート <element> のかわりを <polymer-element> としてサポート on-click とかイベントハンドラの宣言 this.$ による idが付加された要素のコレクション observe に
<github-card>: A web component to show a profile-card for your Github account.
A web component to show a profile-card for your Github account.
[webkit-dev] Web Components development will continue in a branch in near future
[webkit-dev] Web Components development will continue in a branch in near future Ryosuke Niwa rniwa at webkit.org Sat Feb 15 16:07:32 PST 2014 Previous message: [webkit-dev] CQ was hosed for the last 14+ hours Next message: [webkit-dev] Web Components development will continue in a branch in near future Messages sorted by: [ date ] [ thread ] [ subject ] [ author ] Hi all, Now that we've removed a
X-Tag - Web Components Library
Getting Started The most important method in the X-Tag library is xtag.create(). The create function on the X-Tag object is what you'll use to create new custom element definitions, which can include things like lifecycle callbacks, attribute-linked getters/setters (accessors), and event listeners. Here's what defining a simple custom element looks like with X-Tag: const Frank = xtag.create('x-fra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Components で 社内 UI ライブラリを作っている 話
su-shi Demo