Mike Chau mikechau

Why I think Webpack is the right approach to build pipelines

(I've reposted this on my blog, which you may find more pleasant to read: http://devlog.disco.zone/2016/06/01/webpack/)

I was asked on Twitter why I think Webpack is the right approach to build tooling in JavaScript applications. My explanation is, uh, a bit longer than fit in a single tweet.

When I say "right approach," I'm specifically talking about the way Webpack's pipeline functions. There are certainly some deficiencies in various aspects of Webpack: it has a rather unintuitive API, and often requires quite a bit of boilerplate to set up. However, even with these issues, I think the core principles of how Webpack functions are sound.

I should also mention here this argument basically applies to SystemJS as well. I'm skeptical of various aspects of SystemJS, but I've only taken a very surface-level look at it, so I'm gonna withhold judgement until I've had a chance

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

Compile with:

webpack --config vendor.webpack.config.js
webpack --config app.webpack.config.js

Use with the following index.html

Since linux 5.4 this workaround is not needed anymore!!!

https://github.com/torvalds/linux/commit/f7f530181461aaf6afa0b3f0be4d239dea410896#diff-9e99666ef6b83c4e4e4974c6a7755d29

pulseaudio profile

/etc/pulse/profile-sets/HUDmx2.conf contents:

# http://mailman.alsa-project.org/pipermail/alsa-devel/2013-July/063676.html
# https://www.freedesktop.org/wiki/Software/PulseAudio/Backends/ALSA/Profiles/

[General]

	# ...

	[options]
	# webpack loaders
	module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'
	module.name_mapper='.*\.\(svg\\|png\\|jpg\\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	{
	"AWSEBDockerrunVersion": "1",
	"Image": {
	"Name": "<AWS_ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/<NAME>:<TAG>",
	"Update": "true"
	},
	"Ports": [
	{
	"ContainerPort": "443"
	}

	export default (cb) => {
	ensurePromise(() => {
	ensureFetch(cb)
	})
	}

	const ensurePromise = (cb) => {
	if (typeof Promise === 'undefined') {
	require.ensure([], (require) => {
	require('imports?this=>window!es6-promise')

	import serializeForm from 'form-serialize'

	const Something = React.createClass({
	getInitialState() {
	return {
	form: {}
	}
	},

	syncFormToState(event) {