JavaScript. The Core: 2nd Edition
Read this article in: Russian, German. This is the second edition of the JavaScript. The Core overview lecture, devoted to ECMAScript programming language and core components of its runtime system. Note: see also Essentials of Interpretation course, where we build a programming language similar to JavaScript, from scratch. Audience: advanced engineers, experts. The first edition of the article cov
なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか
最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
ついに jest の軍門に降った - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? もう駄目だ。ついに React 以外のプロジェクトでも Jest 一択になってしまった。 もともと自分の選択するテストツールは、むかしは jasmine、いまは mocha + chai（ときどき power-assert） をベースに周辺ツールと連携させていて、React を使うようになってしばらくして Jest を入れるようになった。ここ5年くらいのフロントエンド界隈では標準の一種だと思う。 それがどうしてこんなに Jest びいきになったのか。 その1. 楽 とにかく楽だからだ。 Jest の売りはオール・イン・ワンとゼロ・コンフ
Service Worker Offline Cache Techniques - Qiita
今回はService Workerを用いたオフラインキャッシュとそのテクニックについて紹介していきます。 Service Workerを用いたオフラインキャッシュを実装することで、インターネットに繋がっていない状態でWebページが閲覧可能になったり、高速でWebページを表示することが可能となります。 それでは順を追って解説していきましょう。 Service Workerとは まずはじめにService Workerとは、ブラウザとは別スレッドで動作するイベント駆動型のJavascript Workerのひとつです。 httpsプロトコルでしか利用できないものの、最近ではブラウザの実装も進み、広く利用され始めてきています。 元々はAppCacheの代替として、プログラマブルにキャッシュを扱えるAPIを目指して開発が始められました。 AppCacheには様々な実装上の問題点やセキュリティ上の問
Server.js
server.js for Node.js Powerful server for Node.js that just works so you can focus on your awesome project: // Include it and extract some methods for convenience const server = require('server'); const { get, post } = server.router; // Launch server with options and a couple of routes server({ port: 8080 }, [ get('/', ctx => 'Hello world'), post('/', ctx => { console.log(ctx.data); return 'ok'; }
Reactでパターンシーケンサを作った話 - Speee DEVELOPER BLOG
こんにちは、Speeeエンジニアの二社谷(nishaya)です。 先日開催されたSpeeeKaigi(詳細は以下の記事を参照)にて、Reactで使ったパターンシーケンサの発表を行いました。 tech.speee.jp 今回作ったもの DEMO ソースコード ブラウザで動くマルチトラックのステップシーケンサです 音楽の知識がなくても、なんとなく触っているだけでそれっぽい音が出ます サンプラーもついてます 使ったもの React/Redux FlowType Web Audio API/MediaDevices 発表資料 speakerdeck.com モチベーションと課題 前回のSpeeeKaigiではReactでシンセサイザーを作ったのですが、自分は楽器を弾けるわけではないので、ブラウザを使って音楽を楽しむところまでは到達できませんでした。 そこで、下記の3点を押さえたモノを作れば、楽器を
授業でFirefoxにコントリビュートした話 - /entry/yyyy/MM/dd/:id
本記事は東京大学工学部電子情報工学科の「大規模ソフトウェアを手探る」という実験の報告記事です 学校の授業でOSSにコントリビュート？ 東京大学工学部電子情報工学科にはあらゆる工学系学科の例に漏れず「実験」の授業があります。 実験の内容はいくつかのテーマの中から選択することができ、例えば 「OpenCV/OpenGLによる映像処理」 「情報可視化技術とデータ解析」 「AIロボットを作ろう」 などのテーマが用意されています。 私はその中から 「大規模ソフトウェアを手探る」 というものを選択し、 その結果としてFirefoxのJavaScriptエンジンである SpiderMonkeyにコントリビュートすることができました。 コミットログ1(私の名前のコミット): https://hg.mozilla.org/mozilla-central/rev/7371550c7fc5 コミットログ2(ペア
HolyJit: A New Hope
tl;dr: We believe there is a safer and easier way of writing a Jit. Current State Today, all browsers’ Jits share a similar design. This design makes extending the language or improving its performance time-consuming and complex, especially while avoiding security issues. For instance, at the time of this writing, our Jit relies upon ~15000 lines of carefully crafted, hand-written assembly code (~
Hypernova/Webpacker/Turbolinks でSSRできてSPA風に動くスケルトンを作った - Qiita
対象 Rails だけどSPAっぽく画面遷移したい SEO担保しないといけない 新規設計の参考 jQuery まみれの状態からこれと同等のことをするのは、不可能じゃないけど難しいです。 単にどう導入するか知りたいだけなら https://github.com/mizchi-sandbox/packnova/commit/447a91ea3a706c0bb0aac8570d1fbbaf6c9710f1 のコミットで 目指したモノ 最小限の設定で Rails エンジニアでもメンテ出来るSSR/SPAアプリの土台。 ただし土台をハックし始めるとその限りではない。。 スタック webpacker でコンパイル 画面遷移は hypernova-react/turbolinks で自動再マウント ルーティングはRails側に寄せてます。なので react-router は入ってないです。 入れる選択肢
Introducing Redux Zero
Redux Zero is a lightweight state container based on Redux with a single store and no reducers, 100% written in TypeScript. Less than 1kb (gzip). Made for (p)react ⚛️ By Concrete 💙 We all love Redux. It’s probably one of the few things that are adopted by React, Angular and Vue people. (Thanks, Dan Abramov) But for some cases, Redux is way too much. Maybe you don’t want to add all of that boilerp
Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス | POSTD
数週間前に、JavaScriptが実際どのように動いているかを掘り下げて紹介する記事の連載を始めました。JavaScriptがどのような機能で構成されていてそれらがどのように組み合わさって機能していくのかを知ることによって、さらに良いコードやアプリケーションを作ることができるのではないかと思ったからです。 連載の1回目では 、エンジンやランタイム、コールスタックについての概要を紹介しました。2回目となる今回は、Google V8 JavaScriptエンジンについて細かく説明していきます。また、より良いJavaScriptコードの書き方、すなわち私たちの開発チーム SessionStack がプロダクトを開発する際に意識しているベストプラクティスについても併せて紹介します。 概要 JavaScriptエンジン とはJavaScriptコードを実行するプログラムまたはインタプリタのことです。
jsに関する情報収集を淡々と話す
Transcript KTʹؔ͢ΔใऩूΛ୶ʑͱ͢ 8F�"SF�+BWB4DSJQUFST�!��UI !NLJ@TLU Ҫ࡙ਓ NVLBJ�TBLJUP 5XJUUFS w ݴޠɺϑϨʔϜϫʔΫͷ ެࣜΛϑΥϩʔɻ w Α͘ใΛᄁ͘ਓΛϑΥϩʔ ͯ͠ɺϦετʹ·ͱΊΔɻ w ࣗᄁ͘ʂ 2JJUB w ਓؾͷߘΛݟ͓͚ͯ ͦΕͳΓʹใ௫ΊΔɻ w ϑΥϩʔ͓ͯ͘͠ͱ ϑΟʔυʹϑΥϩʔͨ͠ਓͷ ετοΫͨ͠ߘ͕ྲྀΕΔɻ 2BMFJEPTQBDF w 2JJUBΛಠࣗΞϧΰϦζϜͰ ධՁͨ͠αΠτ w 2JJUBͱ߹Θͤͯ͏͜ͱͰ ΑΓྑ͍ใΛ௫ΊΔɻ ͯͳϒοΫϚʔΫ w ςΫϊϩδʔΧςΰϦʔΛ ݟ͓͚ͯྑ͍ɻ w ͨ·ʹ৽ணΛݟΔͱ ྑ͍ใ͋Δɻ 4MBDL w ༷ʑͳίϛϡχςΟʔͷ 4MBDLνʔϜ͕͋Δɻ w ࣭͢ΔͱͰ͖Δ
Flow導入して数ヶ月がたった所感 - tomoima525's blog
ReactNativeプロジェクトで、型がないことによるつらいシーンが多くなり(特に変数の解釈に起因するバグ)、Facebook製の静的型解析ツールであるFlowを数ヶ月前に導入しました。導入時の学びと、しばらく運用して感じていることについて個人的な感想を書きました。 Flow選定理由 Javascriptで静的な型付けをするといえばTypeScript(正確にはJavascriptのスーパーセット)がありますが、プロジェクト途中からの導入しやすさの観点からFlowにしました。Flowはお作法(行頭に @flow つける等)さえ押さえれば誰でも使えることから導入障壁はだいぶ低いといえます。導入のメリットについては以下のスライドがとてもわかりやすいです。 speakerdeck.com flow status でプロジェクトに対して静的型解析を走らせることもできますが、 コーディング時にワー
「やはりHTML/DOMは再発明されるべきじゃないか」に対する感想 - 余白
mizchi.hatenablog.com エモにはエモ。 わかる だいたいわかる。そもそもSPAの必須パーツであるクライアントサイドルーティングなんてブラウザ機能の再実装の極致だし、ブラウザ上でアプリケーション作るとなるとブラウザに足りてない部分はラップして、アプリケーションプラットフォームにしたてる必要がある。 Angularはアプリケーションフレームワークとして、HTMLの限界をカバーするために独自にHTMLのパーサーを積んでいる。 テンプレート構文をサポートするためでもあるが、おそらく中途半端にブラウザの機能に頼ってデータモデルからビューへの投影にノイズが含まれるよりは、 Angularという世界に閉じた一気通貫なフローを採用して、ブラウザとのコミュニーケーションを最小限にしたかったのも大きいと思う。 というか、Native ScriptとかWeb WorkerとかSSRとか、クロ
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
Reactアハ体験 - Qiita
Ryan Florence氏のReact Rally talkはこの原則をより深くカバーしているのでオススメです。 2つのコンポーネントがstateを共有したい場合、stateを同期させるのではなくstateを持ち上げる必要があります。 コンポーネントベースのアーキテクチャでは、stateの共有は自ずと困難になります。2つのコンポーネントが同じstateに依存する場合、そのstateはどこにあるべきでしょうか？これは最終的にReduxで決着した解決策のエコシステム全体を活性化するような人気のある質問でした。Reduxの解決策は「store」と呼ばれる別の場所にstateを集約することです。コンポーネントはstoreを必要な部分だけ購読でき、storeを更新するための「actions」をdispatchすることもできます。Reactの解決策は2つのコンポーネントの最も近い親を探し、そこで共有
4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them
In this article we will explore common types of memory leaks in client-side JavaScript code. We will also learn how to use the Chrome Development Tools to find them. Read on! IntroductionMemory leaks are a problem every developer has to face eventually. Even when working with memory-managed languages there are cases where memory can be leaked. Leaks are the cause of whole class of problems: slowdo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://alexn.org/blog/2017/10/11/javascript-promise-leaks-memory/
テクニックではなく、今、本気で取り組むべきWebパフォーマンス
