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!

Alex Ruiz
Alex RuizList by Alex Ruiz, last updated 
Copy a direct link to this comment to your clipboard
  1. 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.

  2. HTML icon
     Like

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

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • HTML
    HTML screenshot 1
  3. CSS icon
     Like

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

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
  4. 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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    • Android
    • iPhone
    • Chrome OS
    • BSD
    • iPad
    • AROS
    • Haiku
    JavaScript screenshot 1
    JavaScript screenshot 1
  5. TypeScript is a language for application-scale JavaScript development. It is a typed superset of JavaScript that compiles to plain JavaScript in any browser, any host, any OS and it is Open Source.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • BSD
    • Self-Hosted
    • JavaScript
    • Node.JS
    TypeScript screenshot 1
  6. ReasonML icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
  7. Dart icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    Dart screenshot 1
  8. Package Managers

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

  9. npm icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Online
    npm screenshot 1
  10. Yarn icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Self-Hosted
    Yarn screenshot 1
    Yarn screenshot 1
    Yarn screenshot 2
  11. 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)

  12. Sass icon
     Like

    Sass is a stylesheet language initially designed by Hampton Catlin and developed by Nathan Weizenbaum. After its initial versions, Nathan Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • Ruby
  13. Bootstrap icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • HTML5 Boilerplate
    • JavaScript
    Bootstrap screenshot 1
    Bootstrap screenshot 1
    Bootstrap screenshot 2
    +1
    Bootstrap screenshot 3
  14. Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

    Cost / License

    • Freemium
    • Open Source

    Application type

    Platforms

    • Online
    • Self-Hosted
    Material UI screenshot 1
  15. Vue Material is a UI framework that's simple, lightweight and built exactly according to the Google Material Design specs.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • Vue.js
    Vue Material screenshot 1
  16. 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.

  17. jQuery icon
     Like

    jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • JavaScript
    • jQuery
    jQuery screenshot 1
    jQuery screenshot 1
    jQuery screenshot 2
  18. Lodash icon
     Like

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

    Cost / License

    • Free
    • Open Source

    Platforms

    • Online
    Lodash screenshot 1
  19. Build Tools

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

  20. Babel icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    • Node.JS
    Babel screenshot 1
    Babel screenshot 1
  21. ESLint icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • 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
  22. rollup.js icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
  23. Webpack icon
     Like

    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...

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Self-Hosted
    Webpack screenshot 1
  24. Gulp.js icon
     Like

    A toolkit to automate & enhance your workflow. Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Node.JS
    • Self-Hosted
  25. Prettier icon
     Like

    Prettier is an opinionated code formatter with support for various languages.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • BSD
    • Visual Studio Code
    • Vim
    • Espresso
    • Sublime Text
    • GNU Emacs
    • WebStorm
    • Atom
    • Microsoft Visual Studio
  26. 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.

  27. Karma icon
     Like

    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...

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
  28. Mocha icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
  29. Jasmine icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
  30. Cypress icon
     Like

    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...

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    Cypress screenshot 1
    Cypress screenshot 1
  31. Jest icon
     Like

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

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
  32.  Like

    Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
  33. 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.
  34. React icon
     Like

    A JavaScript library for building user interfaces.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    React screenshot 1
  35. Redux.js icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
  36. MobX icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
    MobX screenshot 1
  37. Next.js icon
     Like

    Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
    • React
    Next.js screenshot 1
    Next.js screenshot 1
  38. Vue.js icon
     Like

    Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • JavaScript
    Vue.js screenshot 1
  39. Vuex icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
    Vuex screenshot 1
  40. Nuxt.js icon
     Like

    Nuxt is an open source framework that makes web development intuitive and powerful.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
    • Vue.js
    • Nuxt.js
    Nuxt.js screenshot 1
    Nuxt.js screenshot 1
  41. Static Site Generators

  42. Gatsby icon
     Like

    Gatsby provides development teams an open source frontend framework for creating dynamic, optimized websites and a cloud platform for delivering them on a blazing fast edge network.

    Cost / License

    • Freemium
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • React
    • Software as a Service (SaaS)
    Gatsby screenshot 1
  43. VuePress icon
     Like

    VuePress is a static site generator that uses markdown. It allows users to create content like blogs and documentation. Originally designed for Vue.js documentation, it now serves a wider user base. It emphasizes simplicity, with a minimal setup and markdown-centered structure.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • Vue.js
  44. 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.

  45. Electron icon
     Like

    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.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    Create menubar apps
    Debug with Devtron
    Build powerful apps like Atom
  46. NativeScript lets you develop truly native apps for iOS and Android from a single code base of JavaScript or TypeScript, XML and CSS. NativeScript takes your cross-platform code and translates it into the language that your target platform speaks.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    NativeScript screenshot 1
    NativeScript screenshot 1
  47. 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...

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • BSD
    • Self-Hosted
    • React
  48. Flutter icon
     Like

    Build apps for any screen. Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • Dart
    • Flutter
    Flutter screenshot 1
    Flutter screenshot 1
    Flutter screenshot 2

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.

No comments so far, maybe you want to be first?
Gu