Webpack チャンク最適 テクニック - Qiita
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - Qiita
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かすSeleniumselenium-webdriver 最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは？」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。 今回は node で。 name: xbrowser on: [push] jobs: e2e-ie: runs-on: windows-latest steps: - uses: actions/checkout@v1 - uses: warrenbuckley/Setup-Nuget@
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
Watchifyでbrowserifyを差分ビルド - Qiita
https://github.com/maxogden/wzrd はアクセスする度に変更を吐き出すのだが、watchify は差分を管理してくれる。 reactとか無駄に巨大なんで、require('react') しただけで1.2秒ぐらい待たないといけなくなって辛かった。そういう問題を解決できる。 簡単な使い方 npm install -g watchify これだけ。-v で verboseみないと動いてるのかよくわからなかったので付けたほうがよさそう。 某アプリのビルドが3.8秒から0.3秒になって最高 自分の使い方 一旦すべてをjsにして吐き出す。 gulpで src/**/* -> lib/**/*.js lib/index.js を基準にbrowserify する gulp-watchify を使った。 arda-starter-project では毎度のビルドの遅さが問題にな
JavaScriptのモジュールシステムの歴史と現状 - Qiita
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
俺のJSライブラリの世界観(2014末版) - Qiita
http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
minimongoでIsomorphic Storage - Qiita
minimongoは元々isomorphicフレームワーク(サーバーとクライアントのコードを同時に記述するパラダイム)のmeteorの中で使われてた使われた、コアとも言えるDB層であり、ブラウザでもサーバーでも動くように作られている。meteor触る時に一番特徴的な機能だと思う。 これがmeteorから単体で切りだされてForkされていた。meteorで使うのと多少APIが違うが、使える感じだった。(meteorは黒魔術的に非同期処理を隠蔽する機能があり、これをオミットしている) 良さ 元々meteorの中で使われたので、比較的実績がある mongo shell風のAPIがAPIがクライアントでも使える 僕はmongodb慣れてるのであのAPIでさっくりストレージを使いたい。 後者が目的でlokijs使ってたんだけど動作が不安定すぎて捨てた。 Isomorphic! purejsで書かれて
Loki.js: Mongo風APIを持ったクライアントJS/node両対応のストレージエンジン - Qiita
某アプリでストレージどうしようかなーという感じだったので適当に探してて、昨日echo.jsで偶然紹介されてたライブラリ、試してみたらチョット便利だったので紹介。 Lightweight javascript in-memory database: LokiJS 注意: 自分はnode環境下で試したので、以下のサンプルはnode用です。ブラウザでも動くはずです。 特長 Mongo風API。 var DB_PATH = process.env.HOME + '/.loki.json' var db = new Loki(DB_PATH); var items = db.addCollection('items'); items.insert({a: 1, b: 2}); items.insert({a: 2, b: 3}); obj = items.findOne({a: 1}) // sea
cortex.js: 監視可能なネストできるオブジェクト - Qiita
mquan/cortex 副作用が加えられるとコールバックを発火するオブジェクトを作れる。ネストしたオブジェクトもとれる。 Vue.jsの$dataを知っている人は、getter/setterが専用に置き換えられたそれだと思えばよい。逆に言えばそれだけしかしないのだが。 何に使うの JSのMVW用のミドルウェア。README見る限り、Reactと一緒に使うのを想定しているが、APIを見る限り、別にそれに限ったものでもない。役割はモデル層だけに限定される。 とはいえ、ViewModel的に使うのが一番適していると思われる。 使い方 var Cotex = require('cortexjs'); var c = new Cortex({a:1, b: [1], c: {d: 2}}); c.on('update', function(c){ console.log('updated', c.
AltJSの選び方フローチャート - Qiita
JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
