You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Automating Front-End Processes – The Jenkins way

0.00 avg. rating (0% score) - 0 votes

Frontend-Process-Automation-With-Jenkins

Being an IT techie, we are highly concerned with the way our websites are being developed and the way they perform. We are constantly pushing our limits to build and deliver high performance products and hence take up the end-users’ experience to another level and we do this by following countless techniques and technologies.

In order to achieve the above said, we have a long list of tasks and processes we need to do or follow and the pain point is that most of them are taken care of and done manually. Before diving deep into the ways of doing all the stuff, lets first have a look at some of the tasks involved.

The Issue

To be able to deploy our resources and applications on production and ensure that they will perform as per expectations and is well maintained, we have to.

  • Execute multiple tasks to generate production ready code
    • Run SASS pre-compiler to generate css
    • Merge multiple javascript files(as per requirement) into one(or more)production ready file(s)
    • Removing unwanted console statements and comments from all the files
    • Minification of javascript and css files
    • Compress image files
    • Managing source mappings for javascript debugging
    • Extracting and isolating the production ready code(images, javascripts and css) out from the actual source code(Unminified CSS and JS files, SASS files, HTML Templates etc.)
  • Push all the source/generated code(with its dependencies) to Git
  • Run javascript UTs to validate the code on every push
  • Create tags as per the respective deployment environments(Test/Staging/Live)
  • Deploy respective tags of multiple apps for the required environment on each build

Solution – Jenkins

So, now that we have figured out our major and most commonly required tasks, it’s time to simplify the things. Starting with bunching up different tasks into broader categories required during the whole process, defining their sequential progression and using Jenkins to interlink and automate the whole process. What???
Alright, let’s simplify…

  • Identify and categorize the major activities required throughout the whole process:
    On each “Git Push” of the code, the following are the activities we need to perform
  1. UT :Run UTs to ensure that the push contains stable code
  2. Grunt :helps with following tasks
    • JS and CSS Minification
    • Images compression
    • SASS compilation
    • Merging JS files
    • Removing unwanted console and comment statements from the code
    • Managing source mapping
    • Extracting and isolating the production ready code out from development code.
  3. Tags :Creating tags for deployment
  4. Deploy :Deploying tags on different environments/servers
  • Group the tasks required for each activity together into a Job:
    As per the the above categorization, we create a Jenkins Jobs for each specified set of activities
  • Define the sequence in which these jobs should run and automatically invoke their successive job on successful execution:
    We have git hooks to fire jenkins job on each push to repo. This job starts the build flow and invoke following jobs with required parameters. Each job send mails to responsible developer about the code status.
    The sequence in which the jobs run is:
  1. UT :Every time code is pushed to git, git hooks invokes the UT job to ensure that the pushed code is stable. If UTs are passed, next job(Grunt) is invoked automatically else a failure mail is sent to the developer.
  2. Grunt :This job perform all the tasks explained in Step 1(b) above are executed on the code. On successful execution of all the sub task in Grunt job, it pushes all the code to dev environment. An email is sent to developer to Create Tag and optionally select to deploy on any environment.
  3. Create Tag :On clicking the Create Tag link in the the mail sent by the job above, the Create Tag job in invoked which create a Tag, pushes it to git and also sends a mail to the user with the Tag Name. If deploy was selected, invoke the deploy job with tag name and other required parameters.
  4. Deploy :It deploys passed tag on the specified environment and notify developer upon success.

Achievements

  • Speed :Since, all the tasks and process have now been automated (manual intervention is reduced). The collective time consumed for a complete iteration has lowered down to a considerable extent.
  • Quality : As we have completely eliminated manual intervention in the whole process, hence, the scope of errors due to manual mistakes or bypassing the process.
  • Standardization :As we have strictly defined set of tasks to be executed and no one can skip or mistakenly forget any of the process from the defined sequence, the outcome of the system has become standardized.
  • Centralization : Centralized tool(Jenkins) is used as a single source to define, execute and handle the jobs/processes.
  • Maintenance :As all the jobs are created and managed in Jenkins, and are not distributed on developers system locally, it has become very easy to update and maintain the job/processes.