Jon C. jonchretien

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

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

	# Makefile for transpiling with Babel in a Node app, or in a client- or
	# server-side shared library.

	.PHONY: all clean

	# Install `babel-cli` in a project to get the transpiler.
	babel := node_modules/.bin/babel

	# Identify modules to be transpiled by recursively searching the `src/`
	# directory.

	/*
	You need node 6.9 or later.
	Run with:
	node redux-mini.js --harmony

	Want a more in depth explanation of how things works? Read the blog post I have written about it here:
	http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/
	*/

	/*

	/* This API wrapper is useful because it:
	1. Centralizes our Axios default configuration.
	2. Abstracts away the logic for determining the baseURL.
	3. Provides a clear, easily consumable list of JavaScript functions
	for interacting with the API. This keeps API calls short and consistent.
	*/
	import axios from 'axios';

	let api = null;

	from datetime import datetime
	import subprocess
	import json

	OFFSET = 1288834974657
	TIME_DIFF = 359
	MACHINE_ID = 377
	N = 10

	def tweet_id_from_timestamp(utcdttime):

	import datetime
	import json
	import os
	import subprocess
	import sys

	#############
	### USAGE ###
	#############

	*.ipynb filter=dropoutput_jupyter
	*.[tc]sv diff=daff-csv
	*.[tc]sv merge=daff-csv


	git log --author="Linus Torvalds" --date=iso \| perl -nalE 'if (/^Date:\s+[\d-]{10}\s(\d{2})/) { say $1+0 }' \| sort \| uniq -c\|perl -MList::Util=max -nalE '$h{$F[1]} = $F[0]; }{ $m = max values %h; foreach (0..23) { $h{$_} = 0 if not exists $h{$_} } foreach (sort {$a <=> $b } keys %h) { say sprintf "%02d - %4d %s", $_, $h{$_}, ""x ($h{$_} / $m 50); }'