xenmaster's front end web development tools

This list is inspired by the Kamran Ahmed's "2019 Developer Roadmap." https://github.com/kamranahmedse/developer-roadmap

Without further ado, my take on the most important technologies to learn for front-end web development in 2019!

**edit: Added nuxtjs vuepress and prettier now that they are available on AlternativeTo!

  • Languages

    HTML, CSS, and JavaScript forms the backbone of the front-end web development experience. Other than that, the following languages are useful as well:

    • Typescript is a superset of Javascript which includes type-checking. Adding types to your JavaScript code is cool.

    **edit: removed ELM and added Reason ML, which works well with React.

  • HTML

    Free Web Website

    HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.


    HTML icon
  • CSS

    Free Web Website

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents.


    CSS icon
  • JavaScript

    Free Mac Windows Linux Web Android ... iPhone Chrome OS BSD iPad AROS Haiku Website

    JavaScript (sometimes shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but also used in many non-browser environments. JavaScript was formalized in the ECMAScript language standard.


    JavaScript icon
  • Typescript

    Free Mac Windows Linux Web Self-Hosted ... Node.JS Website

    TypeScript brings you optional static type-checking along with the latest ECMAScript features.


    Typescript icon
  • ReasonML

    Free Mac Windows Linux Website

    ReasonML is a new face to OCaml that--when coupled with BuckleScript--makes web development easy, robust, and type-safe. It has a very good Javascript FFI story, and is easy to adopt piece-meal into your existing projects.


    ReasonML icon
  • Dart

    Free Mac Windows Linux Web Website

    Dart (originally called Dash) is a Web programming language developed by Google. It was unveiled at the GOTO conference in Aarhus, 2011 October 10-12. The goal of Dart is "ultimately to replace JavaScript as the lingua franca of web development on the open web platform."

    Dart is intended to solve JavaScript's problems (which, according to a leaked memo, cannot be solved by evolving the language) while offering better performance, the ability "to be more easily tooled for large-scale projects" and better security features. Google offers a cross compiler that compiles Dart to ECMAScript 5, for compatibility with non-Dart browsers. Google also plans to integrate a native VM into Chrome (there is now a Chromium branch available) and encourage competitors to do the same with their browsers.

    dartc compiles Dart to plain JavaScript. Frog is a new Dart compiler written in Dart; while it does not yet have all the capabilities of dartc, it generates much more optimized code. On November 18, 2011, Google released Dart Editor, an open-source Dart editor based on Eclipse components, for Mac OS X, Windows, and Linux.


    Dart icon
  • Package Managers

    If you learn one of these package managers, you will learn enough to use the other fairly well.

  • npm

    Free Web Website

    npm is a package manager for Node.js that is run through the command line and manages dependencies for an application. It is the predominant package manager for Node.js.


    npm icon
  • Yarn

    Free Mac Windows Linux Self-Hosted Website

    Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.


    Yarn icon
  • CSS Frameworks + Preprocessors

    Sass is a preprocessor and Bootstrap is the framework for prototyping sites fast using pre-arranged style sets. Material UI and Vue Material are framework specific CSS frameworks (see react & vue below)

  • Sass

    Free Mac Windows Linux Ruby Website

    Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. .


    Sass icon
  • Bootstrap

    Free Self-Hosted CSS HTML5 Boilerplate JavaScript Website

    Bootstrap is a open-source collection of tools for creating browser sites and applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.


    Bootstrap icon
  • Material-UI

    Free Web Self-Hosted Website

    Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.

    The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.

    Therefore, Material-UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.

    We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material design specification (which is a bar set quite high), you should be able to take advantage of it for you own business with any style customization needed. We want to see companies succeeding using Material-UI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product.

    From a developer's point of view, we want Material-UI to:

    • Deliver on fully encapsulated / composable React components.
    • Be themeable / customizable.
    • Be cross browser compatible and accessible.
    • Promote developer joy, a sense of community, and an environment where new and experienced developers can learn from each other.


    Material-UI icon
  • Vue Material

    Free Self-Hosted Vue.js Website

    Vue Material is a UI framework that's simple, lightweight and built exactly according to the Google Material Design specs.


    Vue Material icon
  • Utility Libraries

    JQuery adoption isn't what it used to be, but a lot of old sites use it. Most new sites are commonly using Lo-Dash in place of JQuery, if they choose to use a utility library at all.

  • jQuery

    Free Web Website

    jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


    jQuery icon
  • Lo-Dash

    Free Web Website

    Lo-Dash is a drop-in replacement for Underscore.js that delivers performance improvements, bug fixes, and additional features.

    Lo-Dash’s performance is gained by avoiding slower native methods, instead opting for simplified non-ES5 compliant methods optimized for common usage, and by leveraging function compilation to reduce the number of overall function calls.


    Lo-Dash icon
  • Build Tools

    Learn each of these tools. Rollup and Webpack are alternatives for each other, learn which one works best for what you need!

  • Babel

    Free Mac Windows Linux Web Node.JS Website

    Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling.

    JavaScript as a language is constantly evolving, with new specs and proposals coming out with new features all the time. Using Babel will allow you to use many of these features years before they are available everywhere.

    Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiling.


    Babel icon
  • ESLint

    Free Mac Windows Linux Android Studio Visual Studio Code ... Eclipse IntelliJ IDEA JavaScript Eclipse Orion Vim Pycharm PhpStorm Sublime Text TextMate RubyMine GNU Emacs Node.JS WebStorm Atom Brackets AppCode Website

    ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

    JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

    The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. The default rules are written just like any plugin rules would be. They can all follow the same pattern, both for the rules themselves as well as tests. While ESLint will ship with some built-in rules to make it useful from the start, you’ll be able to dynamically load rules at any point in time.

    ESLint is written using Node.js to provide a fast runtime environment and easy installation via npm.


    ESLint icon
  • rollup.js

    Free Mac Windows Linux Website

    Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.


    rollup.js icon
  • Webpack

    Free Mac Windows Linux Website

    webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.


    Webpack icon
  • Gulp.js

    Free Web Node.JS Website

    Automate and enhance your workflow
    A streaming build system

    gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

    Easy to use

    By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.


    By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.

    High Quality

    gulp's strict plugin guidelines assure plugins stay simple and work the way you expect.

    Easy to Learn

    With a minimal API surface, you can pick up gulp in no time. Your build works just like you envision it: a series of streaming pipes.


    Gulp.js icon
  • Prettier

    Free Mac Windows Linux BSD Visual Studio Code ... Vim Espresso Sublime Text GNU Emacs WebStorm Atom Microsoft Visual Studio Website

    Prettier is an opinionated code formatter with support for:

    JavaScript, including ES2017, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, and SCSS, HTML, JSON, GraphQL, Markdown, including GFM and MDX, YAML

    It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

    Prettier takes your code and reprints it from scratch by taking the line length into account.


    Prettier icon
  • Testing Tools

    Each tool has its own use and purpose, best to learn what you can from each one and pick one based on your needs. For React fans, Jest, Enzyme, and Cypress are a good combination.

  • Karma

    Free Mac Windows Linux Website

    A simple tool that allows you to execute JavaScript code in multiple real browsers. Karma is not a testing framework, neither an assertion library. Karma just launches a HTTP server, and generates the test runner HTML file you probably already know from your favourite testing framework. So for testing purposes you can use pretty much anything you like. There are already plugins for most of the common testing frameworks: Small Jasmine iconJasmine,
    Small QUnit iconQUnit
    and many others


    Karma icon
  • Mocha

    Free Mac Windows Linux Website

    Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.


    Mocha icon
  • Jasmine

    Free Mac Windows Linux Website

    Jasmine is an open source testing framework for JavaScript. It aims to run on any JavaScript-enabled platform, to not intrude on the application nor the IDE, and to have easy-to-read syntax.


    Jasmine icon
  • Cypress.io

    Free Mac Windows Linux Web Website

    Cypress is a front end automated testing tool created for the modern web. Cypress is built on a new architecture and runs in the same run-loop as the application being tested. As a result Cypress provides better, faster, and more reliable testing for anything that runs in a browser. Cypress works on any front-end framework or website. The open source Cypress Test Runner is architected to handle modern JavaScript frameworks especially well. The Cypress Dashboard Service is an optional web-based companion to the Test Runner. The Dashboard records tests run in Continuous Integration so developer can understand failures and share results with their team. The Dashboard is sold as a SaaS service.


    Cypress.io icon
  • Jest

    Free Self-Hosted Website

    Jest is a unit testing framework for JavaScript used by Facebook to test React apps.


    Sandboxed and Fast
    Snapshot Testing


    Jest icon
  • Enzyme

    Free Mac Windows Linux Website

    Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.


  • JS Frameworks

    React and Vue are the two largest frameworks:

    • React components include Redux and/or MobX for state management and NextJS for server-side rendering. Vue also has a corresponding components Vuex and NuxtJS.

  • React

    Free Mac Windows Linux Web Website

    A JavaScript library for building user interfaces by Facebook.


    React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
    Declarative views make your code more predictable and easier to debug.


    Build encapsulated components that manage their own state, then compose them to make complex UIs.
    Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

    Learn Once, Write Anywhere

    We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
    React can also render on the server using Node and power mobile apps using Small React Native iconReact Native.


    React icon
  • Redux.js

    Free Self-Hosted Website

    Redux is a predictable state container for JavaScript apps that helps write apps with consistent behavior in different environments and that are easy to test. It provides a live-coding developer experience with a time traveling debugger.


    Redux.js icon
  • MobX

    Free Self-Hosted Website

    MobX is a state manager - simple and scalable by transparently applying functional reactive programming (TFRP) :

    Anything that can be derived from the application state, should be derived. Automatically.


    MobX icon
  • Next.js

    Free Self-Hosted React Website

    It's no secret that creating single-page JavaScript applications can be pretty challenging these days. Fortunately, there are some projects available which simplify things and help you build apps faster.

    Create React app is a very good example of that.

    Even still, there's a high learning curve before you can build a proper application. That's because you need to learn about client-side routing, page layout, and so on. If you'd like to perform server-side rendering for faster page loads, things can become even more difficult.

    So, we need something simple but customizable.

    Think about how web apps are created with PHP. You create some files, write PHP code, then simply deploy it. We don't have to worry about routing much, and the app is rendered on the server by default.

    That's exactly what we do with. Instead of PHP, we build the app with JavaScript and React.


    Next.js icon
  • Vue.js

    Free Self-Hosted Website

    Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.


    Vue.js icon
  • Vuex

    Free Self-Hosted Website

    Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.


    Vuex icon
  • Nuxt.js

    Free Self-Hosted Website

    What is Nuxt.js?:
    Its main scope is UI rendering while abstracting away the client/server distribution.
    Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.
    Nuxt.js presets all the configuration needed to make your development of a server-rendered Vue.js Application more enjoyable.
    In addition, we also provide another deployment option called: nuxt generate. It will build a statically generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.
    Furthermore, you can also use Nuxt.js to create single page applications (spa mode) quickly, useful to keep Nuxt features while working on backoffice applications.
    As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.

    Source code can be found from https://github.com/nuxt/nuxt.js


    Nuxt.js icon
  • Static Site Generators

  • GatsbyJS

    Free Self-Hosted React Website

    Modern web tech without the headache
    Enjoy the power of the latest web technologies – React.js, Webpack, modern JavaScript and CSS and more — all setup and waiting for you to start building.

    Bring your own data
    Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL.

    Scale to the entire internet
    Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

    Future-proof your website
    Don't build a website with last decade's tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.

    Static Progressive Web Apps
    Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

    Speed past the competition
    Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.


    GatsbyJS icon
  • VuePress

    Free Self-Hosted Vue.js Website

    Simplicity First
    Minimal setup with markdown-centered project structure helps you focus on writing.

    Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.

    VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.


    VuePress icon
  • Mobile + Desktop Frameworks

    Electron is used for composing desktop applications using NodeJS as the backend and Chromium as the front end while NativeScript and ReactNative are options for those choosing to go with the Vue/Angular environment or React, respectively.

    **Edit: Added Flutter, a Dart SDK for developing mobile interfaces.

  • Electron

    Free Mac Windows Linux Website

    If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

    With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker.

    • Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript.
    • Electron is an open source project maintained by GitHub and an active community of contributors.
    • Compatible with Mac, Windows, and Linux, Electron apps build and run on three platforms.


    Electron icon
  • NativeScript

    Free Mac Windows Linux Website

    Build truly native apps with JavaScript. Develop native iOS and Android apps from a single code base.


    NativeScript icon
  • React Native

    Free Mac Windows Linux Website

    React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.


    React Native icon
  • Flutter

    Free Mac Windows Linux Website

    Flutter makes it easy and fast to build beautiful mobile apps. Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.

    Deliver features faster: Refresh times so fast, you can "paint" your app to life on hardware, emulators, and simulators.

    Craft beautiful UIs: Delight your users and make your brand stand out with rich motion, smooth scrolling, and beautiful customizable components.

    Used by Google: Flutter is used by Google and others in production, works with Firebase and other mobile app SDKs, and is open source.


    Flutter icon

The purpose of this list is to provide a listing of solutions available and commonly used by developers in the field in 2019 for front-end web development, including mobile and desktop. I encourage everyone and anyone reading this list to also check out the site "https://github.com/kamranahmedse/developer-roadmap" as it has additional information on a logical order to run and use these apps as well as additional topics that are not software solutions, but concepts that are important to learn.

Comments on xenmaster's front end web development tools

Echo echo ... Feels empty in here

Maybe you want to be the first to submit a comment?

Sign up to comment, it's simple!