Valentin Semirulnik 7rulnik

Proposal for a lightning talk at the Reactive 2016.

Keep calm and like/retweet it on Twitter and star this Gist to vote on this talk.

Road from UndefinedLand

I work at Grammarly. We like React and happily use it in our applications. However, sometimes something goes wrong and bugs creep into the code. Here comes testing. It helps make us confident about the quality of our code.

Use IntelliJ or WebStorm as git mergetool

Configure Sourcetree

The merge tool that ships with JetBrain's IntelliJ IDEA or WebStorm is really awesome and way better than FileMerge. It is quite simple to configure SourceTree to use it as the default mergetool:

Open the SourceTree preferences and select the Diff tab
Choose Custom both as Visual Diff Tool and as Merge Tool
Paste the following commands into the textfields:

Diff Command: /Applications/IntelliJ\ IDEA.app/Contents/MacOS/idea diff

require-from-twitter

Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.

How to use

Source tweet: https://twitter.com/rauchg/status/712799807073419264

const leftPad = await requireFromTwitter('712799807073419264');

Создать простое одностраничное веб-приложение (React+Redux, SASS) о погоде

(!) Данные можно взять с сайта openweathermap.org

Приложение должно уметь:

Добавлять/удалять города
Сохранять локально данные
Автоматически запрашивать погоду по координатам пользователя — это город/место по умолчанию.

Building a Maintainable, Agile Architecture for Realtime, Transactional Apps

A maintainable application architecture requires that the UI only contain the rendering logic and execute queries and mutations against the underlying data model on the server. A maintainable architecture must not contain any logic for composing "app state" on the client as that would necessarily embed business logic in the client. App state should be persisted to the database and the client projection of it should be composed in the mid tier, and refreshed as mutations occur on the server (and after network interruption) for a highly interactive, realtime UX.

With GraphQL we are able to define an easy-to-change application-level data schema on the server that captures the types and relationships in our data, and wiring it to data sources via resolvers that leverage our db's own query language (or data-oriented, uniform service APIs) to resolve client-specified "queries" and "mutations" against the schema.

We use GraphQL to dyn

	import express from 'express';
	import React from 'react';
	import ReactDOMServer from 'react-dom/server';
	import App from './components/App';
	import {flushServerSideRequires} from 'react-loadable';

	let app = express();

	let webpackStats = require('./output-webpack-stats.json');

	const MODULE_DIR = /(.([\/\\]node_modules\|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].)?$/g;

	{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	include(filepath) {
	if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
	let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
	try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
	return !!(pkg.module \|\| pkg['jsnext:main']);

	{
	"js": [
	"js/common-16b95.js",
	"js/app-26c95.js"
	],
	"css": [
	"css/common-902b1.css",
	"css/app-82c1b.css"
	]
	}

	////////////////////////////////////////////////////////////////////////
	// Intro
	///////////////////////

	// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux
	// For Reselet there's nothing to do, it's just not coupled to Redux
	// For the others, you just need to provide an adapter

	// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API
	// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster