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!
**edit: removed ELM and added Reason ML, which works well with React.
HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents.
Strong tools for large apps
If you learn one of these package managers, you will learn enough to use the other fairly well.
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.
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 allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.
Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.
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 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.Sass is a Cascading Style Sheets (CSS) metalanguage. It is a scripting language that is interpreted into CSS. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions.sass and.scss respectively.CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the.sass or.scss file and translate it to an output.css file whenever the.sass or.scss file is saved. Sass is simply syntactic sugar for CSS.
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.
Vue Material is a UI framework that's simple, lightweight and built exactly according to the Google Material Design specs.
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.
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.
Learn each of these tools. Rollup and Webpack are alternatives for each other, learn which one works best for what you need!
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.
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.
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.
Prettier is an opinionated code formatter with support for:
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.
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.
Adaptable Sandboxed and Fast Snapshot Testing
Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.
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 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.
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 React Native.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple:
Anything that can be derived from the application state, should be derived. Automatically.
which includes the UI, data serialization, server communication, etc.
React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Both React and MobX provide very optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.
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.
<Image> and Automatic Image Optimization with instant builds.
Built-in Domain & Subdomain Routing and Automatic Language detection.
A true lighthouse score based on real visitor data & page-by-page insights
Automatic compilation and bundling. Optimized for production from the start.
Hybrid: SSG and SSR
Pre-render pages at build time (SSG) or request time (SSR) in a single project.
Incremental Static Regeneration
Add and update statically pre-rendered pages incrementally after build time.
Automatic TypeScript configuration and compilation.
Fast, reliable live-editing experience, as proven at Facebook scale.
Every component in the pages directory becomes a route.
Optionally create API endpoints to provide backend functionality.
Built-in CSS Support
Create component-level styles with CSS modules. Built-in Sass support.
Code-splitting and Bundling
Optimized bundle splitting algorithm created by the Google Chrome team.
- Performant: Truly reactive, compiler-optimized rendering system that rarely requires manual optimization.
- Versatile: A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.
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. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
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
Static Site Generators
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.
Build anything you can imagine
Gatsby gives frontend teams the tools and technology they need to build world-class web experiences. From marketing sites, to eCommerce stores, to documentation. Gatsby can help you build it.
The hardest parts of the web, made simple.
Performance. SEO. Security. Integrations. Accessibility. We’ve got it covered for you. Gatsby makes the hardest parts of building an amazing digital experience simple, leaving you more time focusing on your business.
• Performance that's off the charts Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fully optimized. No manual tuning required.
• Scalability you can count on Gatsby sites don’t require complex scaling operations or expensive hosting. They scale when needed, but when traffic drops so does your usage — and your costs. Host at scale for pennies.
• Security out of the box Gatsby’s serverless rendering generates static HTML at build time. No server and no reachable database equals no malicious requests, DDOS attacks, or accidental exposure. A Gatsby site’s attack surface is nonexistent.
• Accessibility for everyone Recognized by WebAIM as the most accessible web framework, we build in best practices like accessible routing, progressive page enhancement and a built-in linting tool to find accessibility errors. Help make the web work for everyone.
Build, Preview, Deploy. All in just minutes with Gatsby Cloud.
Go from idea to production in less time with Starters, Themes, and over 2500 plugins that can help connect nearly any CMS, eCommerce platform, analytics tool, or other web service and get your website up and running in just minutes.
Simplicity First Minimal setup with markdown-centered project structure helps you focus on writing.
Vue-Powered Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
Performant VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
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.
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 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.
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase.
Flutter apps are written in the Dart language and make use of many of the language's more advanced features.
While writing and debugging an application, Flutter runs in the Dart virtual machine, which features a just-in-time execution engine. This allows for fast compilation times as well as "hot reload", with which modifications to source files can be injected into a running application. Flutter extends this further with support for stateful hot reload, where in most cases changes to source code are reflected immediately in the running app without requiring a restart or any loss of state.
For better performance, release versions of Flutter apps on all platforms use ahead-of-time (AOT) compilation.