OKUNOKENTARO okunokentaro

明日の下書き

これはなに

高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/
フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です
このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。

(翻訳) React Hooks は魔法ではなく、ただの配列だ

この記事は https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e の日本語訳です。途中で力尽きて雑な翻訳になってる箇所がいくつかあります。

どのように Hooks が動いているか

私は、新しい Hooks の API の "magic" な挙動に悩んでいる人が結構いると聞いています。なのでこの構文の提案が、少なくとも表面的なレベルではどう動いているか、解説してみようと思います。

TL;DR

// Create Lazy Component
const LazyComponent = React.lazy(() => import('./SomeOtherComponent'));

ReactDOM.hydrate(
  <React.unstable_Suspense fallback="loading">
     <LazyComponent />
  </React.unstable_Suspense>

Incremental DOM

Introducing Incremental DOM — Google Developers — Medium

Reactやvirtual-dom、Glimmer(Ember)などVirtual DOMの実装は色々あるが、これらのVirtual DOM実装には2つの問題がある

既存のテンプレート言語を利用していない(しにくい)
モバイルでのパフォーマンス、特にメモリに関しては大きすぎる

これらを解決するためにIncremental DOMと言うものを作っている(WIP)

Promise/非同期のテストを簡単にする新しいアサーションヘルパーのご紹介

この前のブログ記事見た人はごめん。

Promise/非同期のテストは難しい

どこが間違ってるか分かります？

	const {app, BrowserWindow} = require('electron')
	const path = require('path')
	const url = require('url')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let win

	function createWindow () {
	// Create the browser window.

	/**
	* ================== angular-ios9-uiwebview.patch.js v1.1.1 ==================
	*
	* This patch works around iOS9 UIWebView regression that causes infinite digest
	* errors in Angular.
	*
	* The patch can be applied to Angular 1.2.0 – 1.4.5. Newer versions of Angular
	* have the workaround baked in.
	*
	* To apply this patch load/bundle this file with your application and add a

	import {bootstrap, Component, Decorator, View, If, For, EventEmitter} from 'angular2/angular2';
	import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';

	@Component({
	selector: 'app',
	injectables: [FormBuilder]
	})
	@View({
	template: `
	<div class="container" [control-group]="myForm">

	var gulp = require('gulp');
	var browserify = require('browserify');
	var source = require("vinyl-source-stream");
	var babelify = require("babelify");
	var watchify = require('watchify');
	var gutil = require('gulp-util');
	var browserSync = require('browser-sync');
	var historyApiFallback = require('connect-history-api-fallback')
	var notify = require("gulp-notify");