FrontEnd Development Workflow

The Development workflow is always evolving and in my opinion it should keep evolving as we as developer are constantly growing.

FrontEnd 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 article, we will be briefly covering following categories:

  • Editors and Tools
  • CSS Preprocessor
  • JS and Task Runners
  • Team Communication
  • Git

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.

The directory structure is pretty straight forward. All code goes into src/respective-directory

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]

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 NodeJS 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 [email protected] --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.

JIRA

JIRA is a project management tool form Atlassian and by far the most favorite tool for project management. JIRA Interface is very easy to use and can be customized follow different workflows like Sprint based, Kanban etc.

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.

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
  • Github Project Management
  • Gitlab Project Management

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

As the CSS preprocessors are making you productive in Styling, task automators will save your time from menial tasks to release your 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.

Commonly used task runners are:

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:[email protected]: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/


Bundlers

  • Webpack
  • Rollup
  • Brunch
  • Snowpack

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).


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:

5 Best JavaScript Editors: As Developers Rank Best Tool-Time to Hack
JavaScript has continued to grow in importance over the last decade. And editors have always played a big role in the success of language. Here are 5 Best JavaScript Editors

Conclusion

The Development workflow is always evolving and in my opinion it should keep evolving as we as developer are constantly growing.

Let me know through comments ? or on Twitter at @heypankaj_ and/or @time2hack

If you find this article helpful, please share it with others ?

Subscribe to the blog to receive new posts right to your inbox.