Tools for Full Stack Developers

For web application development, you need the right tools to make your work easier. Without the right tools, development would be a lot more time consuming.

In this blog post, let’s introduce you to the basic tools you absolutely need for development:

• Editors: Even if a simple text editor is basically sufficient for developing web applications or implementing the associated source code, we recommend you install a good editor that supports you in writing source code and that is specifically designed for development. Code editors can, for example, highlight the source code in colors (syntax highlighting), relieve you of typing with recurring source code modules, recognize syntax errors in your source code, and much more.
• Development environments: Simply put, these powerful code editors provide common features like syntax highlighting but also advanced features such as integrated debugging tools, version control, and so on.
• Browsers: Of course, a browser is required for testing web applications. In particular, the developer tools available in most browsers have become indispensable parts of a web developer’s toolbox.

Editors

Meanwhile, a whole range of good code editors are available for the development of web applications. Particularly popular are Sublime Text (www.sublimetext.com, shown in the first figure below); Atom (https://atom.io, second figure); and Brackets (https://brackets.io). All of these editors are available for Linux, Windows, and macOS. Basically, the editors we’ve mentioned are quite similar, so which you adopt depends mainly on your personal tastes. Try out several to find which one appeals to you the most.

Development Environments

More powerful than editors are development environments, often called integrated development environments (IDEs). Compared to a normal editor, development environments have special features for the development of software, such as synchronization with a version control system, the execution of automatic builds, or the integration of test frameworks. If one of these features is not installed by default, usually a corresponding plugin is available.

Well-known examples of development environments specifically for web application development include Microsoft Visual Studio Code (VS Code; https://code.visualstudio.com, shown in the next figure) and WebStorm by IntelliJ (www.jetbrains.com/webstorm, shown in the second figure).

Note: A good overview of plugins available for VS Code can be found at its official website at https://marketplace.visualstudio.com/vscode.

Browsers

To display a web page or HTML document that you’ve created in an editor or a development environment, you’ll need a web browser. An essential component of a web browser is its rendering engine, which enables you to visualize HTML, CSS, and JavaScript.

Tip: Since the rendering engines of individual browsers differ in detail (i.e., sometimes resulting in different visualizations), you should always test a web page on several browsers.

The five most popular browsers are the following:

• Google Chrome: https://www.google.com/chrome 

• Mozilla Firefox: https://www.mozilla.org/firefox 

• Safari: https://support.apple.com/downloads/safari

• Opera: https://www.opera.com

• Microsoft Edge: https://www.microsoft.com/edge 

Besides these “big five” browsers, quite a few others exist. Most notable are Microsoft’s (aging) Internet Explorer (the predecessor of the faster Microsoft Edge browser), which—to the chagrin of many developers—is still used by some companies today, and Brave (https://brave.com), which was initiated by Brendan Eich, the inventor of the JavaScript language.

Note: For an overview of the distribution of browsers, see https://en.wikipedia.org/wiki/Usage_share_of_web_browsers. As of February 2023 (with StatCounter statistics from December 2022), Chrome is by far (71.2%) the most used browser, followed by Safari (15.1%), Microsoft Edge (3.7%), Firefox (3.0%), and Opera (1.3%). You can also compare various browsers based on criteria such as range of function, support for web technologies, etc. at https://en.wikipedia.org/wiki/Comparison_of_web_browsers.

To determine which browsers use which rendering engines, see https://en.wikipedia.org/wiki/Comparison_of_browser_engines. In this context, we recommend reading “How browsers work: Behind the scenes of modern web browsers” at https://www.html5rocks.com/de/tutorials/internals/howbrowserswork, which explains in detail the functionality of browsers and rendering engines.

Which Browser Is the Right One?

Which browser is the “right one,” that is, which one you should use, depends on various factors: 

• Customer requirements: Does the customer have any special requirements? Often, you’ll encounter rather specific requirements about which browsers a web application must work for. Now and then—don’t panic—this requirement can involve Internet Explorer.
• Features: Do certain features need to be supported? The individual browsers (or more precisely, the various rendering engines) support different features depending on their version. Especially with the abundance of web APIs now available, the individual engines will differ. For a good overview of whether a feature is supported, check out the website https://caniuse.com.
• Functional scope: By now, all major browsers offer a similar range of functions. Of particular interest to developers are the developer tools, which you can use, for example, to adapt HTML and CSS or execute JavaScript for a web page that has already been rendered.

Editor’s note: This post has been adapted from a section of the book Full Stack Web Development: The Comprehensive Guide by Philip Ackermann.