NetlingFront-end development have come a long way since we started offering PSD to HTML services in 2008. In web front-end development there are essentially just 3 languages you need to master HTML, CSS and Javascript. Simple as it may sound, the tricky part lies in using those to implementing complex UI requirements, interactions and functionalities. And so there is a whole eco-system of front-end tools, libraries that have emerged over the years, just to setup a streamlined workflow to render a web page with these 3 languages on a web browser.
With the advancements made over the years, we can now harness the power of highly tested libraries and tools to improve front-end development workflow and benefit from greater possibilities of delivering highly sophisticated functional UIs for websites, web apps and mobile apps.
But with the number of development tools increasing almost daily, finding the best software to get the job done can sometimes feel daunting, especially if you are starting up with front-end development. To help you out, we’ve curated a list of our recommendations for tools, libraries and technologies for front-end development that you can incorporate in your workflows to deliver best results.
Operating System
Although the Operating System scene has not changed much. You still have the choose from usual suspects, Windows, Mac OS or Linux (Ubuntu) for development. We recommend going with MacOS for development, as you get best of both worlds, great UI with power of Unix based system at its back.
Design Tools
Design tools have come a long way. Responsive design today demands more modern design tool and the community and companies have responded well to meet those demands. More and more UI/UX designers are shifting to these modern drawing tools rather than being stuck with archaic Adobe Photoshop for everything. Here are some of the most popular design tools you should be aware of in order to slice/export assets and extract styles out of designs.
- Adobe Design Tools – Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Adobe XD
- Sketch
- Figma
Design Handoffs & Inspectors
These are a new breed of web applications that have emerged that are now becoming essential part of Front-end development workflows.
Benefits of these apps are tremendous:
- You can open Sketch, Adobe XD, Adobe Photoshop and Figma designs on macOS, Windows, and Linux, or in the browser. Generate CSS, Swift & Android code from layers, export images, fonts, styles, pick colors, measure sizes, distances and more.
- All design files can be kept in one safe place, where your team can remotely access, open download them 24/7. It also helps keeping designs organised in projects and keep versions in sync.
- You can easily collaborate with team members to get feedback, comments and prepare hand-offs for front-end developers to start the development work.
Here are some of the most popular tools in this category:
We use Invision and Zeplin a lot but Avocode is equally good.
Web Browsers
Battle of Browsers have been nothing short of Game of Thrones since The Internet came into existence. Every now and then a web browser emerges that dethrones an existing web browser to claim the greatest market share. Here are some of the most popular browsers you should use:
- Google Chrome
- Firefox
- InternetExplorer
- Safari
- Opera
Google Chrome is currently the web browser with highest market share. And we recommend it as your main development web browser. Here are some of the most important extensions you should setup or be aware of:
Code Editors
For front-end development, Adobe Dreamweaver was the defacto editor in 2008. Since then, there have been many new editors that have emerged. Here are the most popular ones now a days:
We recommend VisualStudio Code for all your front-development needs as it has a very clean UI, lots of add-ons available and good integration with GIT.
Version Control & Code Collaboration
We can build things together thanks to ever-improving version control systems. If you don’t know or already use version control, you can’t be serious about development. GIT is the most popular version control system today. And all top gun software development teams use it on daily basis. Here are some of the most popular code collaboration platforms built on GIT that you should know how to use:
At Netling, we are currently using self-hosting Gitlab for all our development projects.
Front-end Frameworks & Boilerplates
Front-end development frameworks are so hot right now. These frameworks can make front end development must easier without starting from scratch. That doesn’t mean you need to tie yourself to a specific framework for every project. Choosing no framework is just as acceptable as long as you know how to work without one. Frameworks reduce the amount of code used on the site, and they can even reduce coding time if you know how to use them. If used properly, frameworks can increase efficiency, flexibility and extensibility of UI.
If you decide to tie yourself to a framework, you might as well go for the best. We’ve worked with a few frameworks, but we find the following two to be the better choices.
Whether you choose Bootstrap or Foundation, you can’t really go wrong either way. Both of them will give you the responsive design and grid system you need for development. Personally, we prefer Bootstrap.
CSS Preprocessors
CSS pre-processors are very important in modern front-end development. You will find it way more efficient to write your CSS code in those once you become proficient with normal CSS. Preprocessors in CSS are similar as those used in interpreted languages such as PHP and the older Classic ASP language. Preprocessors have several benefits, but one of the most notable is that you can use variables and logic. Traditionally, CSS didn’t allow you to use variables or any kind of logic. The three main preprocessors are SASS, LESS, and Stylus. SASS is the most preferred choice these days.
Javascript UI Frameworks
JavaScript popularity continues its rising. Lately JavaScript was named among the best programming languages to learn in 2017 by IBM . At this stage there are both client-side and server-side JavaScript frameworks that helps to design flavourful interfaces, enrich web apps with numerous functions and features, modify web pages in real time and much more. Here are some of the most important Javascript frameworks you should add in your front-end development toolbox:
Taking an option on the right JavaScript framework is not about features that each can offer. It depends on project requirements, general framework functionality and how it can be applied within each particular case.
For most simple use cases jQuery just fits the bill perfectly.
For building complex client-sides requiring lots of interaction, especially SPAs (Single Page Applications) choosing between Angular, ReactJS or Vue.js would be better option.
Front-end Build Tools
What are “front-end build tools”? Front-end build tools can be confusing even to experienced developers. Simply put, these tools and libraries can help you automate various tasks involved in building modern front-end development for example: setting up your working directory structure, downloading the plugins and libraries you need, SCSS compilation, code linting, minification, etc. Setting and automating up this workflow from the start prevents any nasty surprises at the end of the project and you can add tools into your workflow that speed up your development, doing the monotonous tasks for you.
The most popular tools for implementing a build process are Gulp and Grunt, both of which are command line tools. However, we recommend sticking to Gulp as it is most widely used build system for front-end development. There are whole lot of libraries that you can use to automate with Gulp. But setting up an ultimate front-end build process would require writing a separate post on its own.
Conclusion
We hope you enjoyed this super list of front-end development tools. It should save you time if you are getting started with the process and bring you upto-date with modern front-end technologies.
Just by looking into this list of modern tools you can imagine how complex front-end development (a.k.a PSD to HTML) has become over the years. And therefore it warrants full-time focus and attention of a practitioner into this field and involves building a reliable process. If you ever need any help with converting your UI/UX designs, we have a processes and team of expert front-end engineers in place that can work on your designs to create fully functional front-end. Just hand us a file, and in as little as 2 days we hand you a fully functional version that’s been tested across all platforms and devices.
Send in your project briefing here.
