A developer’s life without those tools would be doomed to endless hours of work on a single application. Libraries and frameworks ease this routine. They consist of ready-made pieces of code that help to perform certain functions. Frameworks and libraries have their ecosystems too and allow for building the whole product within one. But what is the difference between a library and a framework? Basically, the principle of their functions is the same, but a framework is a wider concept.
jQuery is a library that focuses on handling HTML documents and has a simple API that allows users to handle events and create animation in browsers. Also, jQuery is used to manipulate the Document Object Model (DOM) and has a plugin development function. It is a lightweight, cross-browser library with jQuery UI for graphic interface building, and for mobile framework jQuery Mobile.
D3.js is a data-driven library, oriented on data visualization. It allows for manipulating data-based documents by binding arbitrary data to DOM and applying data-driven transformations to the document. The library supports large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows for code reuse and operates with CSV and HTML.
Front-end frameworksAngular is a front-end framework powered by Google and is compatible with most of the common code editors. The Angular framework is used to build dynamic, single-page web applications (SPAs) and progressive web-apps. When Angular was first released, its main benefit was its ability to turn HTML-based documents into dynamic content. Angular is among the most popular front-end frameworks, and you can learn more about it in our article on the pros and cons of Angular development.
How Vue.js works
Ember.js is a framework for single-page web, mobile and desktop applications – Apple Music is built on it. Ember.js uses the model-view-view-model (MVVM) pattern. Ember tools allow developers to create a development environment, and its command line interface provides tools for script automation. Ember.js tools include modules (Ember Data and Ember Inspector) that force the building process.
Frameworks for mobile development.
Ionic is a front-end framework that allows for building native and progressive web apps, as well as hybrid mobile apps in HTML5. It is compatible with Angular framework.
Meteor.js is another back-end framework that integrates with Angular and React front-end frameworks and connects with Node.js. The best qualities of this framework are integration and build automation. Meteor is compliant with all parts of MEAN stack, and allows for building hybrid applications with Cordova, a framework for mobile development. This framework is a good choice for fast prototyping and building MVPs (minimum viable products).
Dependencies are plugins or libraries with reusable code that allow developers to optimize their code in the building process to create great applications. Package managers find them in repositories and install them to create a larger application stack. They also update these libraries and install new ones.
Bower has the same principle of work as npm but deals with more components that contain pieces written in HTML and CSS, including fonts and even image files. Bower is used together with other tools to integrate with all sorts of setups and workflows. It can be used together with build automation tools like Grunt, Gulp, and Webstorm. But the disadvantage of Bower is that it only updates packages and installs dependencies. It can’t minify code, so it doesn’t clean source code from unnecessary elements.
Yeoman is a scaffolder, a build tool and package manager all in one. It helps developers set up the environment and facilitates unit testing, minification, and some more processes that build tools perform. We’ll talk about build tools in detail in the next section.
Build automation toolsBuild tools, or task managers/task runners, as they are also called, allow developers to automate minification, compiling, packaging, unit testing, and bug fixing.
Webpack is an open-source module bundler. It bundles web packages, dependencies, CSS files, and assets which allows a developer to create a dependency graph, package the assets, and send them to the browser. One more function of this tool is to analyze dependencies between modules and assets. Webpack requires Node.js framework to work with.
How Webpack works
Grunt has a huge ecosystem of 6,453 plugins that help automate a significant number of tasks. These plugins are managed and installed via the npm package manager. It creates and configures tasks. Grunt is used by Adobe, jQuery, Twitter, Mozilla, Firefox Accounts, Opera, WordPress, and Microsoft.
Gulp consists of several small modules that work on particular tasks and simplify the build process. Its approach lies in defining the tasks as separate files. This principle allows for the testing of separate units. Gulp offers over 300 plugins for code cleaning and formatting.
Code editorsDevelopers also need spell checkers to find possible typos. Code editors are the tools that handle this. All code editors must have at least three crucial functions: syntax highlight, auto-completion, and folding. In this section, we will also discuss an integrated development environment (IDE). They are different from regular code editors because of the number of features.
Code editors. You may think that IDEs can fully replace all code editors. Maybe. But still, they are a good choice, because they are more lightweight and work faster.
Sublime Text is a leader in the field of code editors. Sublime Text is a cross-platform editor with a convenient visual interface, Package Control feature, split editing function, and a number of keyboard shortcuts that simplify the editing. The users must buy a license for continuous use, but the editor offers a free usage period.
Sublime Text interface
Source: Sublime Text
Visual Studio Code is a code editor that can be used with fourteen programming languages. It has a pre-built IntelliSense auto-completion module that also allows developers to edit TypeScript code. This editor’s Type Acquisition comes with the npm package manager and type declaration files.
Jest is a Facebook-powered testing tool, that works in accordance with React library, which makes it a part of the React ecosystem. However, it allows for testing applications that weren’t built with React.
Protractor testing guide
Some testing tools for web-development allow for testing the code right in the browser, like Chrome Dev Tools, and Redux Dev Tools. Both of them are browser extensions. Chrome Dev Tools operates with another application, Angular Augury, which serves to debug and profile applications created in Angular.
Phantom.js performs tests using the standard DOM API or libraries like jQuery. It allows for creating screenshots and works with other testing frameworks, like Jasmine and Mocha.
Selenium is an open-source testing tool for browser and mobile testing. It’s a tool that integrates with any type of workflow, like Agile, DevOps, and continuous delivery. Selenium is a cross-platform tool that supports ten programming languages and seven browsers. You can read more about the pros and cons of Selenium in our article.
Deployment toolsToday most applications exist either on public cloud servers or use serverless architecture. Let’s take a look at the tools that developers use for different means of deployment.
Cloud deployment toolsDocker is a cross-platform instrument that packages the code into microservices and helps to deploy and integrate it.
Jenkins is a tool that can be used either as a server for continuous integration or a continuous delivery hub that comes with lots of additional plugins to tweak continuous delivery workflow.
Chef is a tool for infrastructure as code management that runs both on cloud and hardware servers.
Ansible is a configuration management automation tool for cloud provisioning and application deployment.
Microsoft Azure Functions is a multi-language tool for an event-driven experience. This tool manages huge workflows and offers a high level of security. Microsoft Azure Functions has built-in continuous deployment and uses integrated monitoring tools. This tool also provides a mobile backend support and extends SaaS applications.
Photo by Francisco Jesús Navarro Hernández on Unsplash