Contact Info Contact Info
(+632) 654 0001
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog


7 Technologies in Front-End Development – Part 1

Graphics by lakexyde from

Front end development refers to the practice and technology used to build the visual part of the website. The user interface and user experience constitute the front-end side. Here are some of the technologies or tools in front-end development.

Package manager - is a tool that keeps track of the name of the software and allows you to upgrade to new versions or install new software. The benefits include -  Package manager helps you minimize the codes you have to track with version control. Second, it allows you to easily update the usage of your libraries in a project. Examples of this are:

  • Yarn

  • Bower

  • NPM

  • Ender

  • JSPM

  • PNPM

  • Jam

  • Gulp

  • Volo

Front end performance tools – This is used to analyze the load testing and performance of a website. Some of the best performance tools include:

  • Loadninja

  • Webload

  • Kobiton

  • StresStimulus

  • Jmeter

  • Loadrunner

  • Silk performer

  • Rational Performance Tester

User Interface frameworks – These are a set of interfaces and classes that define the behaviour and elements of the UI. In other words, frameworks hold the code together. Examples include:

  • React

  • Vue.js

  • Angular

  • Ember

Version control - This is a practice, site or system used to track and manage changes in a code. As soon as the codes get complicated, bugs will likely appear. To minimize such risk, you can use version control to look back at the changes over time. Some of these version controls systems include:

  • GitHub

  • GitLab

  • Beanstalk

  • Apache subversion

  • AWS CodeCommit

  • Microsoft Team Foundation server

  • Mercurial

  • CVS version control

  • Bitbucket

Text editors - These are software used to edit and change texts or lines of code. The user interface of these tools includes a menu for controlling the appearance of texts and the writing area. Some text editors are open source or free while others are paid. Text editors comprise:

  • Atom

  • Notepad++

  • Sublime text

  • Komodo edit

  • Ultra edit

  • Vim

  • Textmate

  • Coffeecup

  • Brackets

  • Codeshare

  • BBEdit

  • Coda

  • Visual Studio Code

Template engine - This refers to the template processing module used to turn static (non-changing)  documents into dynamic (changing) ones. Likewise, it’s software used to combine templates to make multiple pages that share the same appearance throughout the website.

  • Mustache

  • Handlebars

  • dOT

  • EJS

  • Nunjucks

  • Underscore

  • Pug

  • Webix

  • Hogan

  • Swig

  • Marko

  • Jade language

  • JsRender

  • Squirrely

  • jQuery Templating

  • ECT

  • Template 7

Source – Colorlib

Code quality tools - These are software or programs used to check codes for bugs or mistakes.

  • Codacy

  • Codestriker

  • Crucible

  • DeepScan

  • Embold

  • ESLint

  • Gerrit

  • JSHint

  • Klocwork

  • Phabricator

  • PVS-Studio

  • Reshift

  • Review Board

  • SonarQube

  • Upsource

  • Veracode

OOCSS and Style Guides - Are groups of code used to make faster websites, re-apply classes on various elements and make maintainable stylesheets. For more info, visit smashingmagazine.

Tags: , , , , ,