Anniel Menezes Cruz annielmenezes

Problem: What does a Modern Front-End Development Workflow Look Like?

I want to start writing libraries and large applications using the JavaScript language. However, I don't know how to setup the project and which build tools to use. What I do know is that the JavaScript community has moved way beyond using browser developer tool plugins and strategically-placed console.log() statements to debug, test, and build code.

I need help.

Below, I will keep track of articles, tutorials and tools I come across as I search for a way to bring my front-end development chops up-to-date.

The Ultimate Resource

This is now an actual repo:

https://github.com/cowboy/jquery-tiny-pubsub

What is your folder-structure preference for a large-scale Node.js project?

0: Starting from Rails

This is the reference point. All the other options are based off this.

|-- app
|   |-- controllers
|   |   |-- admin

	#!/bin/bash

	# 1. Enable all software repositories
	# It shall launch the dialog box for configuring software sources.
	# Go to the tab named "Other software" and check all boxes named "Canonical Partners" and "Independent".
	software-properties-gtk

	# 2. Update the system
	apt-get update
	apt-get upgrade

	!!! 5
	html(class='no-js')
	head
	meta(charset='utf-8')
	meta(http-equiv='X-UA-Compatible', content='IE=edge')

	title

	meta(name='description', content='')
	meta(name='viewport', content='width=device-width, initial-scale=1')

	{
	"scripts": {
	"build": "webpack",
	"start": "webpack-dev-server"
	},
	"devDependencies": {
	"babel-core": "^6.5.2",
	"babel-loader": "^6.2.3",
	"babel-preset-es2015": "^6.5.0",
	"babel-preset-react": "^6.5.0",

	/**
	* Documentation: http://docs.azk.io/Azkfile.js
	*/
	// Adds the systems that shape your system
	systems({
	wordpress: {
	// Dependent systems
	depends: ["mysql"],
	// More images: http://images.azk.io
	image: {"docker": "azukiapp/php-fpm"},

	/**
	* Simple authentication and authorization example with passport, node_acl,
	* MongoDB and expressjs
	*
	* The example shown here uses local userdata and sessions to remember a
	* logged in user. Roles are persistent all the way and applied to user
	* after logging in.
	*
	* Usage:
	* 1. Start this as server

	[
	{ "keys": ["ctrl+alt+up"], "command": "select_lines", "args": {"forward": false} },
	{ "keys": ["ctrl+alt+down"], "command": "select_lines", "args": {"forward": true} },
	]

	const { readdirSync, statSync } = require("fs");
	const { dirname, join } = require("path");

	// Usage:
	// const walkSync = require("walk-dir-sync");
	// console.log(walkSync(path));
	// return a matrix of files path
	// [ [path, path], [path, path] ]

	const walkSync = d =>