Front End Development Workflow

Front End Development Workflow

Front End Development Workflow

Every project’s workflow is very important factor in its speed and accuracy; so let’s discuss about the Front End Development workflow. In this we will be covering Editors and Tools, CSS Preprocessor, JS and Task Runners, Team Communication and Git in brief.

Let’s consider that we have to do everything from scratch. And we will be creating new project and enable the workflow step by step. Let the new web app is Music Store

Directory Structure:
Create a new directory for our Music Store named as Music Store. And then navigate to the directory.

MusicStore
    ̀--prod|build|dist(whatever name)
    ̀--src
        ̀--less|scss
        ̀--js
        ̀--fonts
        ̀--img
        ̀--data
        ̀--index.html
    ̀--package.json
    ̀--GruntFile.js|GulpFile.js

The directory structure is pretty straight forward. All code goes into scr/respective-directory. For production ready things,

Git:
Git is a distributed version control to fit your versioning requirement. Working with Git is easy and almost all popular Brands are working with Git. Github and Bitbucket are the popular vendors for putting your repo online. Working with teams is easy with Git. Git provide public repos for free and for private repo, you will need to pay. BitBucket provides private repos but only for limited number of team members; so for larger teams, you will need to pay.

But you can go for fully local repository also. But it’s good to have a remote end. And setting up Git for server is also easy. We will cover this separately. For now let’s consider fully local repo.

Its easy to get started with Git.

mkdir MusicStore
cd MusicStore

Now we will need to initialize the git repo:

git init

And this has initialized git repo on this directory with master branch. Now whatever we add in this directory will be tracked and saved on each commit.

But that tracking and saving of changes is not automatic; you need to tell git about saving and what to save. It generally works like you are putting multiple bookmarks while reading a book. So a commit serves the purpose here. But before committing anything we need to tell what to save and what not.

So you can check the status of what changed by `git status`. Then the changed files can be added by `git add “filePath”`. Or if you wanna add all the changes `git add .`. So after adding all changes we need to hit following command and your changes are saved:

git commit -m "Change Message Here" 

Now if you are working on a remote repository, you will need to configure the origin of repo. For this I have created a repo on GitHub and setting it as the remote repo of the application.

git remote add [shortname] [url]

For example:

So as now the repo setup is complete, we can now proceed our work in this repo.

For small teams this setup will work fine but for large teams, this setup will require extra provisioning and process implementations.

Node/npm:
As the popularity of node.js increased, npm emerged as a good option for package and dependency management. Setting up with npm is easy, there will be just one package.json that will keep info of package and its dependencies. Not only this but the repo, test init script etc are also kept in record in package.json. So how to create the package.json file?

For npm you need to have node.js installed on your system. Node.js can be downloaded from (here). As node gets installed, you will have access to npm from CLI. To check if you have npm or not, fire npm -v on console; if it gives you the npm version then you have npm and if not, you need to install node.js.

Now considering that you have installed the node.js and npm is available to use in command line. Now naught the application directory where you have setup the git repo and fire the following command:

npm init

Now the will initialize a package and will ask some info about the package like name, version, repk etc. If you are not sure about any information, just press enter and it will take the default information which is shown in round brackets near to the cli cursor.

As you are done, consider of not typing anything, we will have a sample package.json that will look like this
Now to install or download a package, fire npm install packageName Command on console at project root directory. For example you wanna install jquery to project fire npm install jquery; and this will download jquery inside node_modules directory. And you can link this downloaded file in your HTML files.

Now consider you are not serving bundled JavaScript then you might need to add the package or modules as project dependency. Then you will need to fire the npm install command with `–save` flag. For example

npm install jquery --save

And if you need any specific version then you can specify that with @ symbol after packageName like

npm install jquery@1.10 --save

And if you wanna install I need them to a dependency that you need in the development then you can install with `–save-dev` flag.

The packages that you would be needing under development can be grunt, gulp, packaging tools etc.

Team Communication:

For the team communication Slack is the best option.

Slack:
Slack can replace your emails, chats, video communication by itself and some third party applications and plugins.

All you need is to create a team at slack and add team members. Now team members can do easy and seamless sharing content with each other or groups.

And with some plugins, your git repo can notify you about changes and commits in repo. And similar to this, there are many integrations possible.

HipChat:
Hipchat from atlassian also serves the same as Slack. Atlassian is famous for their online hit service called bitbucket which offers private repo in limited team members. They also provide free GUI tool SourceTree for git and mercurial based repo management. Though other alternatives are listed here: http://beebom.com/2015/04/slack-alternatives-for-team-communication and http://venturebeat.com/2015/11/27/5-open-source-alternatives-to-slack/

Now as the team communication is solved, we should have a tool for documentation and task management. Here comes the Trello.

Trello:
Trello is a todo app with enhanced capabilities. Capabilities like attachments, comments on tasks etc. makes it a perfect place to store and act on such information quickly. It can integrate with Slack to notify about any activity like changes in the documents, tasks etc. It’s good match for project management activities.

Some other alternatives are Asana.

CSS Preprocessors:
CSS Preprocessors compile their scripts to generate the CSS files. The script can be less, sass or scss etc depending upon the preprocessor used. They will let you declare variables, include other files, create functions (mixins) etc. Main benefits to use a CSS preprocessor are:

  • Nested syntax
  • Ability to define variables
  • Ability to define mixins
  • Mathematical functions
  • Operational functions (such as `lighten` and `darken`)
  • Joining of multiple files

Main confusion is between LESS and SCSS; the detailed differences among both can be read out here: https://css-tricks.com/sass-vs-less/

LESS:
Apart from the above listed benefits, there is nothing much different in LESS. Only the jargon changes.
While Defining variable and including other less files `@` symbol is used.
Using of mixins does not require any keyword usage.
Whole feature list can be seen at http://lesscss.org/features/

SASS/SCSS: SASS/SCSS is also more or less same to LESS except some differences.
Declaring Variables involve usage of `$` symbol.
Using any mixin and including other scss file will require `@include` keyword.
Defining a mixin will need `@mixin` keyword.

Whereas SASS works on the indentation rather that blocks created by `{}`. It does not need the semicolons at the end of rule. and defining and usage of mixin will need `=` and `+` symbols respectively.

All info on SASS and SCSS can be found at http://sass-lang.com/guide

Stylus:
Stylus is inspired by SASS where commas(,), colons (:) and semicolons(;) are also removed.
More info can be found at https://learnboost.github.io/stylus/

Task Automators:
For a front end project, as the CSS preprocessors are the saviours from Styling part, task automators serve same for whole project.

They can automate your css preprocessor compilation, js minification, combining files, preparing production ready assets and many other processes in your front end project.

Mainly two task runners are available:

Grunt:
Grunt is basic JavaScript task runner. It basically relies on one file; Gruntfile.js; that holds the information of tasks. Once the tasks are defined in Gruntfile, they are ready to run from console. But to run from console, you need to have the Grunt Command Line tools available in your environment. So as many tools we saw here are managed at npm, this is also managed there. To install `grunt-cli` following command can be used. If you are on linux based system, you need to write `sudo` before the install command.
`npm install -g grunt-cli`

The `-g` flag means that the installation is global and won’t require local installation.

If you are behind the proxy, you need to configure `npm` for proxy with following command:

npm config set proxy http://proxy.server.url:8080
npm config set https-proxy http://proxy.server.url:8080

And if proxy server requires username and password also, then the URL can be rewritten with following format:

http://username:password@proxy.server.url:8080

Now as you have installed Grunt-cli, you need to have Grunt as project dependency for development, so as explained previously in this tutorial, you can do so by following command in console:
`npm install grunt –save-dev`

As grunt is set up now, you will need to creats tasks in Gruntfile.js. In this file you can specify multiple tasks like compiling LESS to CSS, minify and combine CSS and JS, getting the assets production ready etc. And for these tasks, Grunt depends on the plugins, that again can be installed from npm but locally. So lets just consider the compilation, minification and copying are our tasks sequentially, this would need these grunt plugins: `grunt-contrib-concat`, `grunt-contrib-copy`, `grunt-contrib-less`, `grunt-contrib-uglify`. And to install then in one shot, you can fire:

npm install grunt grunt-contrib-concat grunt-contrib-copy grunt-contrib-less grunt-contrib-uglify jit-grunt --save-dev

`jit-grunt` will help in quick loading of the these plugin/npmTasks in grunt easier and will save you from manually loading these plugins/npmTasks with `grunt.loadNpmTasks(‘grunt-contrib-less’);` for each and every tasks. More info can be seen at https://www.npmjs.com/package/jit-grunt.

Now as the deisred plugins are installed, we can modify our Gruntfile.js for commands/tasks; for now following is the sample file; later we will cover Grunt tasks seperately for efficient tasks.

And from the root of the project, where Gruntfile.js is present, you can run `grunt` on console and your tasks are running.

There is a watcher (`grunt-contrib-watch`) task also that you can add at the end to run all tasks if any watched file changes.

Grunt works like configuring tasks, so you will need to save temporary files before another task can act on it.

Gulp:
Gulp works out more like process and it configuration file goes like program where you will pass output of one process to another process.

Tasks will be composed of these processes.

For gulp also you will need to have a global instal of gulp

`npm install -g gulp`

And then, install the tasks plugins that you gonna need for automations and processing your files.

`pipe()` is the important function that passes output to another process.

For more detailed walkthrough on setting up build with gulp, this tutorial will help you: https://markgoodyear.com/2014/01/getting-started-with-gulp/

Browserify, RequireJS and Webpack:
These will let you write your client side code in node-require way. So you can split up your code for better management.

As output, these will give you single output that will be included in the client side page.

But for larger projects, you gonna need to configure them properly so that the bundled output doesn’t gets too heavy for the browser (this totally depends on your browser support matrix; majorly affected browsers would be old ones and mobile ones. If opera mini is major shareholder of that matrix; do pay special attention).

I would suggest the use Webpack for its overridden require function (require.ensure()) which will enable you to load parts of code or modules dynamically. Though browserify also supports this kind of development but you will need browserify-plugin to do that.

Here is the link to the statement from creator of browserify on the dispute of Webpack or browserify

Editors:
Well editors are personal choice, but choosing a right sword is also important for battle. Listing some of the famous swords of this battle:


One thought on “Front End Development Workflow

Got Something To Say:

Your email address will not be published. Required fields are marked *

*