株式会社エフコード様でお話させていただいた内容です https://medium.com/@terrierscript/nostalgic-frontend-8a502220ce48
frontend-history
株式会社エフコード様でお話させていただいた内容です https://medium.com/@terrierscript/nostalgic-frontend-8a502220ce48
FromJS の黒魔術を読み解く
var greeting = f__StringLiteral("Hello") greeting = f__add(greeting, " World!") var el = document.getElementById("welcome") el.innerHTML = greeting { action: "Concatenate String", value: "Hello World!", stack: `Error at f__add (http://localhost:1234/from.js:93754:22) at http://localhost:1234/example.js:2:12`, inputValues: [ { action: "String Literal", value: "Hello" stack: `Error at f__StringLiter
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
Vue.jsのmixinをslotで代用する - Qiita
Vueにはmixinという機能がある。 同一の機能を複数のコンポーネントに適応させるというものだ。 共通の機能を提供する便利なものだが、あまり楽観的に使えるものではない。 例えばReactでも過去には存在していたが、既に廃止されている。 なぜ廃止されたかは理由を読めばmixinのどのような点が危険な点かが見えてくるだろう。 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 ざっくりと要約するとこのへんが上げられている 暗黙の依存関係を導入してしまう 名前の衝突を起こす 複数のmixinがあり、それらがプロパティを上書きす
AyoでWorkerの実装が進んでいる - 技術探し
Chrome Dev Summitのため、サンフランシスコで書いています。 Ayo側 Node側 Workerとは？ メソッド・変数 isMainThread postMessage(value[, transferList]) threadId workerData クラス MessageChannel MessagePort postMessage(value[, transferList]) Worker new Worker(filename, options) filename options Worker内の大きな違い postMessage(value[, transferList]) terminate([callback]) threadId 最後に さて、最近、Ayo側でWorkerの動きが活発なのでそろそろまとめてみた。 昨日一日でこれだけ出ている...! Ayo側
Node.jsのビルトインモジュールに名前空間が使われるかもしれない - 技術探し
console.log(fs.readFileSync(__filename, "utf8")); このように、@nodejsという名前空間でビルトインモジュールを保護する案が出ています。 もちろん、過去のコードに影響はありません。 PR は一旦、閉じられました。 WIP: tools: add core files to @nodejs namespace by cjihrig · Pull Request #20922 · nodejs/node This is probably not the ideal solution, but I wanted to at least get the ball moving after the little bit of 'worker' module naming drama. This commit allows all o
『プログラミングの基礎』を読んだ - 30歳からのプログラミング
ゴールデンウィークを使って読み進めて、ようやく読み終わった。 浅井健一『プログラミングの基礎』サイエンス社 タイトル通り、プログラミングの基礎を学んでいく。言語はOCaml。 リストや木構造などの簡単なデータ構造やアルゴリズムについても学んでいく。 Gitを使って内容をまとめながら読んだ。 赤黒木の挿入の説明がよく分からなかったのと、最後のヒープについては飽きてしまったので、やってない。 それ以外は一通りやった。 読もうと思ったキッカケとなったのは、この記事。 19: 読んでよかった技術書 – kdxu – Medium 憧れているプログラマが「プログラミングの作法の9割はこの本から学んだ」と言っていたので、興味を持った。 OCamlというのもいいなと思った。 プログラミングが上手くなるためには関数型言語をやるといいとどこかで読んだし、今は型の強い言語が人気だし。 JavaScriptに型
Turbo Boost Next Node.js
Presentation file for JSDC.tw 2017 in taiwan.
クライアントサイドのモデルとは何か 後編 ~ 単方向データフローと参照透過性 - mizchi's blog
この記事は クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog の後編。 前提として、今回の出す例で、「Web フロントエンドで、そこまで複雑な状態を考慮するなんてそもそも間違ってる」という意見があると思う。これに関して、そもそも「SPA というものが、いかに実現可能になったか」という視点の話であり、また、自分の経験上「フロントエンドなんて雑でシンプルでいいでしょ」というものが、複雑な構成を取っていくのを、何度も目にしてきた、という2つの前提がある。 適切な粒度に応じた適切な構成をとるべし、というのは別の話で、今回、対象が複雑なアプリケーションなのは前提とする。 Flux 以前 先の記事で ActiveRecord を前提にしたサーバーサイド ORM をクライアントで輸入しようとすると、クライアントでは Storage 層が存在し
AWS、WebブラウザでVR/ARコンテンツを開発・公開できるプラットフォーム「Amazon Sumerian」一般公開
AWS、WebブラウザでVR/ARコンテンツを開発・公開できるプラットフォーム「Amazon Sumerian」一般公開 2018-05-16 Amazon Web Servicesは、特別なプログラミングや3Dグラフィックスの専門知識を必要とせずに、VR/AR/3Dコンテンツを開発するためのツールキットとプラットフォーム「Amazon Sumerian」を一般公開しました。 Amazon Sumerianは、2017年11月「Re:Invent」にて発表され、数ヶ月間のプライベートベータ版で運営されていましたが、今日、誰でも使用できるようになりました。 本ツールを使用すると、ビジュアルエディタやJavaScriptエディタを使用しオブジェクトを編集、公開することができ、また、Webブラウザベースで実行できるため、ネット環境があれば素早く作成することが可能です。作成したコンテンツは、クラウ
VuePressはコーダーの夢を見るか。 - Qiita
Webサービス界隈の優秀な人たちが、フロントエンドの新しいツールを「最高！」と日々謳っている中、 底辺コーダーの我々はクライアントからの修正横目に 「ほーん。どうせ僕らの業務じゃ使えないんでしょ？」という冷淡な姿勢を貫き通していた。 しかし、興味がないわけではなかった。ReactやVueといったコンポーネント思考のフレームワークを駆使すればクライアントからの無理難題をスマートに解決し、家で有意義にダラダラする時間を手に入れる事が出来るかもしれない。そのような考えはいつも心の片隅にあったが目を背け続けてきた。 でもついにその時がきたかもしれない。VuePressがその夢を叶えてくれるかもしれない。 (タイトルはかっこつけただけで特に意味はないです。) 夢と苦悩 夢その1 Nuxt 夢その2 Gatsbyjs 夢その3 VuePressを使えるレベルにする。 開発のディレクトリ構成をいい感じに
Promiseに出来てasync/awaitに出来ないこと (JavaScriptを例として) - FOOBAR's Blog
JavaScriptで非同期処理をasync/awaitを使って同期的なスタイルで書いていると、すべてのコードをそのスタイルで統一して書きたくなる。なので非同期処理を開始して実行を明け渡したいときはもちろんawaitを使うし、非同期処理に失敗したときはtry-catch構文で例外ハンドラに制御が移るようにする。ただ、同期的なスタイルで書けない処理が存在するために、どうしてもすべてを統一することはできない。Direct styleで書けないcontrolは継続渡しスタイル(CPS)を使って書くしかないからだ。 JSの場合でいうと、並行制御周りがそれにあたる。Promise.all() や Promise.race() などは対応する構文がJS側に存在しない。 例えば Promise.all() に対応する awaitall みたいな構文が言語側に欲しくなる。こんなふうに: const [x,
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
JavaScriptのプリミティブへの変換を完全に理解する - Qiita
console.log(["foo", "bar"] == "foo,bar"); // true console.log([""] == 0); // true console.log((123 ^ {}) === 123); // true const obj1 = ["😂"]; const obj2 = ["😂"]; console.log(obj1 == "😂", "😂" == obj2); // true true console.log(obj1 == obj2); // false このような挙動は面白いので、Twitterとかで誰かが話題にするたびに多少は話題になります。しかしいい加減飽きたので、皆さんにはこんなの常識として理解しておいていちいち騒がないでいただきたく、この記事を用意しました。 この記事では、JavaScriptにおけるプリミティブ変換に関する仕様を
Cloudflare WorkerをAWS LambdaのGatewayとして使う - blog::wnotes.net
Cloudflare Worker使ってみた リリースを見た時「あーすごいなーこの発想」と思って、これは使ってみなきゃということでやってみた。 Cloudflare Workerとは Cloudflare CDNのエッジで動作させるWorkerプログラムで、面白いのはService Worker、つまりJavaScriptで書けること。 そもそもService Worker自体がブラウザのリクエスト・レスポンスをフックして処理するものなので、リクエストとレスポンスが対になるならEdgeサーバで使おうぜっていう発想がすごい。 詳しくは他の人も書いてるのでそっちを参照のこと。 AWS LambdaのGatewayとして使ってみる WorkerをGatewayとして、AWSのLambda Functionをコールしてその出力をレスポンスとして返すGatewayを作ってみた。 Lambdaを使う機
Off the main thread with workers !
This is a presentation slide I presented at Node学園 in Tokyo on April 27th, 2018
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes
npmにライブラリをアップロードするときに.npmignoreで生成物を公開/制限するパターン - Qiita
NestJS - A progressive Node.js framework
