FacebookのFluxアーキテクチャの始め方 Part 1 | POSTD
私のように、Reactを使ってより進んだことがしたいと考えたなら、おそらく Flux に注目した経験があると思います。ざっと目を通してタブを閉じ、JavaScript開発者としての自分の人生を見直したことでしょう。 もしReactになじみがなければ、私の記事 「React入門」 を読んでみてください。 Fluxとは？ Fluxは、遠目には始めるために複雑な手順を踏まなければいけないように映ります。しかし、 GitHubにあるexample を見てみれば、これがどのように機能するのかが実に明確になってきます。 簡単に言うと、Fluxは美化された 出版-購読型モデル のアーキテクチャです。データはシステム内を一方向に流れ、そこから様々な利用者が必要に応じてデータを取得します。これについて考えるには、私たちの体に例えてみると簡単です。 イベント – 血液 血液は私たちの体内を一方向に流れています
20+ JavaScript libraries to draw your own diagrams (2024 edition)
20+ JavaScript libraries to draw your own diagrams (2024 edition) by Jordi Cabot | Jan 10, 2024 | tools, cloud & web engineering, Model-driven Engineering | 55 comments You can draw and model anything in your browser with JavaScript. Indeed, there is a vast array of user-friendly online modeling tools available to create UML (or ER, BPMN, …) diagrams right in the browser. But what if you want to c
AJAX クロール: ウェブマスターおよびデベロッパー向けガイド - ウェブマスター ツール ヘルプ
概要 検索結果に表示したいコンテンツで AJAX アプリケーションを実行している場合、Google が新しく作成したプロセスを実装すると、Google によるサイトのクロールとインデックス登録が可能になります。このプロセスは、Google 以外の検索エンジンでもうまく機能する可能性があります。AJAX コンテンツはブラウザによって動的に生成されるためにクロールで検出することができず、検索エンジンで AJAX アプリケーションを処理することは困難でした。この問題に対応するメソッドも既にありますが、このメソッドでコンテンツを最新の状態に保つには、手動で定期的に保守を行う必要があります。 一方、以下のスキームでは、検索エンジンでスケーラブルにコンテンツをクロールし、インデックスに登録できます。また、ウェブマスターが継続的に手動で保守を行わなくても常に最新のコンテンツがインデックスに登録されます。
React Native · Learn once, write anywhere
function HomeScreen() { return ( <View> <Text> Hello World 👋 🌍!</Text> </View> ); } Written in JavaScript, rendered with native code. React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do. Native development for everyoneReact Native lets you create truly native apps and doesn't compromise your users' experiences. It provides a core set o
JS自動レビューツール"jswatchdog"を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
アセットパイプライン | Rails日本語ドキュメント | Ruby STUDIO
このガイドでは、アセットパイプラインについて説明します。 このガイドを読むことで、次の事が学べるはずです。 アセットパイプラインとは何か、何が出来るのか アプリケーションのアセットの適切な構成について アセットパイプラインを使用するメリット パイプラインにプリプロセッサを追加する方法 アセットをgemパッケージにする方法 1. アセットパイプラインとは? 2. アセットパイプラインの使用方法 3. 開発環境での使用 4. 本環境での使用 5. パイプラインのカスタマイズ 6. アセットのキャッシュストア 7. Gemにアセットを追加する方法 8. ライブラリまたはGemのプリプロセッサの作成 9. 古いバージョンのRailsからのアップグレード 1. アセットパイプラインとは? アセットパイプラインは、javaScriptとCSSの連結・圧縮をフレームワークとつなぎ合わせる機能を提供します
やってみよう Flux + React | コラム | MDMによる端末やスマートフォン管理ならMobiConnect
FluxとはFacebookが提唱しているReact向けのアーキテクチャです。(フレームワークではないとのこと) Reactとは同じくFacebookが開発しているJavaScriptクライアントアプリケーションのビューのライブラリです。 Virtual DOMという仕組みを持っていて、ビューの変更差分だけを実際のDOMに反映するため高速に動作する特徴があります。 Reactはビューの機能しかないので、Reactだけではアプリを組めません。そこをカバーするのがFluxです。 Fluxの概念図は下記のとおりです。 Fluxの三大要素はViews(React)、Dispatcher、Storeです。 これらの間をデータは一方向に流れます。(unidirectional data flow) Viewで発生したユーザー操作はActionを経由してDispatcherを呼び出します。D
Facebook の決断：MVCはスケールしない。ならば Flux だ。
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
Promiseを複数組み合わせる時の基本パターン（直列、並列、分岐） - Qiita
ES6形式のPromiseを使うときに頻出する3つのパターン。直列パターン、並列パターン、分岐パターンを説明します。 最近、Promise周りが盛り上がっていて、reduceを使ったほうが良いとか、ライブラリがどうとか・・・いう話を聞くのですが、そもそも「ベタに書いたときにどうするのが基本なのか」という情報が見つからないので書いてみました。 直列パターン 一番良く使うのは、複数の処理を直列につなげるパターンでしょう。#1が終わってから、#2、#2が終わってから#3というパターンです。 Promise.resolve() .then(function(){ return new Promise(function(fulfilled, rejected){ asyncFunc(function(){ fulfilled(); }); }) }) .then(function(){ return
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
Visual StudioがNode.jsの開発ツールに。「Node.js Tools 1.0 for Visual Studio」が無料公開。ブレークポイントやステップ実行も可能
マイクロソフトの統合開発ツールVisual Studioを、Node.jsの開発ツールとして使えるようにする拡張ツール「Node.js Tools 1.0 for Visual Studio」（以下NTVS）が無料公開されました。 NTVSはオープンソースとして開発されたツール。Visual Studioの無料版となるVisual Studio CommunityやVisual Studio Express for Webでも利用可能ですので、無料でNode.jsのビジュアル開発環境を揃えることができます。 主な機能は、IntelliSense対応、その場で命令を実行して試せるInteractive Window、パッケージ管理ツールnpmとの統合、ブレークポイントやトレースポイントなどのデバッグとプロファイリング対応、ユニットテストなど。 Interactive Windowでは、Nod
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
A Baseline for Front-End [JS] Developers, 2015
23 Mar 2015 edit It's been almost three years since I wrote A Baseline for Front-End Developers, probably my most popular post ever. Three years later, I still get Twitter mentions from people who are discovering it for the first time. In some ways, my words have aged well: there is, shockingly, nothing from that 2012 post that has me hanging my head in shame. Still, though: three years is a long
TDD & CI for JavaScript [Karma][Mocha][Travis CI]TDD & CI for JavaScript [Karma][Mocha][Travis CI] – inet-lab
諸事情により研究で使うシミュレータを変更せざるを得なくなってしまった森です．心が折れたので，気分転換に昨夏某所で少しだけ弄ったNode.jsを勉強がてら一年ぶりに触っています．一年も経つと様々な新しいモジュールも公開されており，やはりこの界隈は発展が目覚ましいなと感じています．なかでもテスト環境はかなり整えやすくなっているのではと個人的に思いました．そこで今回はJavaScriptでの簡単なテストやその自動化の方法について紹介したいと思います． テストツールの紹介 見て分かるように，主要なものだけでも色々な選択肢があります．ここで挙げられているJasmineやMocha, BusterJSなどがいわゆるxUnitとよばれるようなテスティングフレームワークになります．もちろん全て紹介するわけにはいかないので，今回は MochaやChaiなどを使ってテストを行いたいと思います． node.js
![TDD & CI for JavaScript [Karma][Mocha][Travis CI]TDD & CI for JavaScript [Karma][Mocha][Travis CI] – inet-lab](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fb85709910f40fff26e38398d3681ecb64af169/height=288;version=1;width=512/http%3A%2F%2Finet-lab.naist.jp%2Fblog%2Fwp%2Fwp-content%2Fuploads%2F2014%2F09%2F703cd43fa85a4ad1211f2945c67fefac.png)
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ext.ux.window.Notification - Examples and documentation
React.js + Flux
GitHub - Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript
フロントエンドを楽にするために
