Brief thoughts on React and Vue

I’ve been playing with React and Vue, getting a feel for what they can do and how they approach solving certain problems. While my knowledge of both are very surface-level at the moment, I’m leaning towards Vue’s approach mainly for one reason: pragmatism.

Vue doesn’t require any specific workflow or tooling, and it can work right out of the box with existing code and architecture. It also isn’t so dogmatic about data-binding as React is. Vue is very pragmatic – I like that. Makes it much easier to start using and working with.

Shell scripts for easier website scaffolding part 2

Another bit of Bash script fun for prepping a directory or file for deployment.
deploy()
{
echo "Which directory or file do you want to deploy?"
read sourcedirectory
echo "ZIP'ing up directory/file"
zip -r --exclude=\.git --exclude=\node_modules --exclude=\bower_components --exclude=\.npm --exclude=\.idea --exclude=\.hg $sourcedirectory $sourcedirectory
echo "Syncing ZIP'ed folder/file to Deploy directory"
rsync -r --progress $sourcedirectory.zip ~/Deploy
echo "Done! You can find your deployment package $sourcedirectory.zip here: ~/Deploy (type cd ~/Deploy to go there)
}

So some explanations for those not too familiar with shell scripts – this function goes in your bash profile (.bash_profile in your user account, if it doesn’t exist you can create it). read is a command that asks for user input – we’re asking the user to tell us which file or directory they want us to run on. Then we zip up the file/directory making sure to exclude things we don’t want deployed to production and save the ZIP’ed file name the same as the directory we’re “deploying”. And then we use rsync to copy the ZIP archive to our deploy folder.

You can totally tweak this so that instead of zipping the directory or files up, it could just rsync the directory or files to a remote directory – the skies the limit (or really your user privileges).

Shell scripts for easier website shell scaffolding

So I’ve played around with Yeoman.

And I’ve played with NPM, Gulp, and Grunt.

There’s lots of things I like about these tools. But one thing that I dislike about all of them is the general difficulty of building your own customized website scaffolding system with them. And there’s an over-abundance of dependencies in my opinion. So back to the shell I say!

Here’s some of my own shell scripts (Bash flavored) to quickly scaffold out common site structures I use frequently.


Generic Scaffold (.NET 4 MVC approach)

scaffold()
{
echo “Creating Content directory”
mkdir Content
echo “Creating Scripts directory”
mkdir Scripts
echo “Moving into Content directory”
cd Content
echo “Creating assets folder for theme”
mkdir assets
echo “Moving into Content/assets directory”
cd assets
echo “Making css, fonts, and img directories”
mkdir css
mkdir fonts
mkdir img
echo “And heading back out to the root directory”
cd ../..
}

Bootstrap Scaffold (.NET 4 MVC approach)*

*Uses Bower to handle front-end dependencies

scaffold-bootstrap()
{
echo “Creating Content directory”
mkdir Content
echo “Creating Scripts directory”
mkdir Scripts
echo “Moving into Content directory”
cd Content
echo “Creating assets folder for theme”
mkdir assets
echo “Moving into Content/assets directory”
cd assets
echo “Making css, fonts, and img directories”
mkdir css
mkdir fonts
mkdir img
echo “Using Bower to download front-end dependencies”
echo “Using Bower to install jQuery#1 – latest”
bower install jquery#1
echo “Using Bower to install Bootstrap”
bower install bootstrap
echo “Using Bower to install FontAwesome”
bower install fontawesome
echo “Using Bower to install animate.css”
bower install animate.css
echo “Moving things into place…”
cd bower_components/animate.css
rsync -r animate.min.css ../../css
cd ../bootstrap/dist
cd css
rsync -r bootstrap.min.css ../../../../css
cd ../fonts
rsync -r * ../../../../fonts
cd ../js
rsync -r bootstrap.min.js ../../../../../../Scripts
cd ../../../font-awesome/css
rsync -r font-awesome.min.css ../../../css
cd ../fonts
rsync -r * ../../../fonts
cd ../../jquery/dist
rsync -r jquery.min.js ../../../../../Scripts
echo “And heading back out to the root directory”
cd ../..
}


I’ve added these scripts to my Bash profile (.bash_profile in your user account). For more info on bash scripting, see http://www.tldp.org/LDP/abs/html/index.html or use your favorite web search engine.

I’ll probably create a deployment-preparation script to copy the appropriate files/directories into a deployment folder for build/deployment. Anyway, I found Bash much easier to use to setup my web project scaffolding in the way I want it to be.

Update: Welp here’s a real world reason to go with shell scripts and minimize your external dependencies: http://arstechnica.com/information-technology/2016/03/rage-quit-coder-unpublished-17-lines-of-javascript-and-broke-the-internet/