By Alex Merced of AlexMercedCoder.com

*Alex Merced is an Instructor for General Assembly in their Software Engineering Immersive Courses and a Full Stack Developer for Crossfield Digital

ALL COMPANIES

All employers need Front-end developers creating their UI logic, nowadays with Single Page Applications more and more of the work is on the front end using frameworks such as React, Angular and Vue. React and Angular 9 are the two behemoths, and Vue has a quickly growing chunk of the market. Svelte is an up and coming framework gaining a lot of popularity among developers but isn’t a great source of employment quite yet. Also make sure to check out my colleague, Arthur Bernier's, Kofujs which incorporates aspects of React and Vue. Another big technology is Web Components which allow you to do component-based design like the above frameworks using no frameworks, the only issue is that old browsers aren’t compatible with this relatively new browser API.

As that changes expect much of front-end design to shift to web components as it will dramatically speed up websites by reducing bundle sizes and code complexity. Frameworks built around web components include Google’s lit-element, Salesforces Lightning Components, Ionics Stencil, and my very own MercedUI (http://www.alexmercedcoder.com/jslib/).

Older applications may still be heavily using jQuery and AngularJS so there is still employers demanding these skills.

REACT

React is by far the largest Front-end framework at the moment and has a wide amount of staple libraries that are useful to know. Here is a brief list of super popular React libraries to expand your react abilities.

React Router - Create links that render components to a target area of the page

Formik - make working with forms in React much easier

Styled Components - Create components that style your other components

ANGULAR

Angular aims to be a complete solution so instead of learning a lot of libraries Angular provides almost everything for every situation right outside of the box, so it takes a lot time to appreciate everything angular has to offer.

VUE

Vue offers a nice in-between to the styles and complexity of React and Angular and has a wide variety of Libraries, although they are mainly in categories where similar libraries exist for React and Angular so I’ll cover them by category.

STATE MANAGEMENT

Component-Based design often encapsulates all data in a concept known as state but often the same data is needed in multiple components creating a complex set of relationships between stand-alone components that can drive developers nuts. State management libraries provide ways to move some of your data to an application-wide scope to make this easier to manage.

Angular Developers usually use ngRx for state management

React Developers usually use Redux for state management

Vue developers usually use Vuex for state management

Server Side Rendering

While single-page applications rendered on the front-end are faster there are features such as the use of URL parameters that can only exist if the website is rendered from the server. So new frameworks have been built to allow you to use your favorite front-end framework for server-side templating. This way you can split your React, Angular and Vue code across the back-end and front-end of your code.

Angular Universal allows for Server-Side Rendering with Angular

NextJS allows for Server-Side Rendering with React

NuxtJS allows for Server-Side Rendering with Vue

Sapper allows for Server-Side rendering wtih Svelte

Static Site Generators

Not all websites need to serve data dynamically and static sites (no dynamic data) are faster, most secure and arguably better with Search Engines. So frameworks have been created to create dynamic data logic and useful tooling that renders down to a static page (so you compile then upload the generated page versus letting the code be dynamic to the end-user). Some of these allow you to use React, Vue and Angular to create the pages. Netlify has come out recently with Netlify CMS that adds a visual backend GUI that can be attached to these frameworks to give clients a way to edit the site creating a wordpress-like experience. Many of these SSGs allow you to generate blog and content using markdown files which has affectionately been named JAM stack (Javascript, APIs, Markdown).

Gatsby is an SSG that uses React and GraphQL

Gridsome and VuePress are SSGs that use Vue

Scully is an SSG for Angular

Hugo and Jekyll are other popular JAMstack SSGs

Typescript

Typescript is a language that takes cutting edge javascript and adds more advanced programming features like typing, interfaces and enums to make for code that is much easier to debug. Large companies are quickly adopting Typescript to help make their code more scalable to large teams.

*Typing provides two main benefits to development teams, makes it easier to catch bugs and easier to determine what other developers intended with their code since they express their datatypes more explicitly. While other languages like ReasonML have attempted a similar improvement to Javascript, having the backing of Microsoft and the ability to pretty much just use plain vanilla javascript as Typescript code has really helped Typescript grow quickly.

Front-end Frameworks using Typescript: Angular and Stencil both incorporate Typescript by default while there are templates to use Typescript with React or Vue.

Back-end frameworks that have embraced Typescript include NestJS and FoalTS

GraphQL

GraphQL is a technology created by Facebook to create more robust APIs. Instead of creating several API endpoints that give you more data than you need you to use a single endpoint and use a special query language to ask for ONLY the data you need.

Wordpress and Headless CMS

Wordpress dominates the world of content management systems. There are platforms that allow much of the creation and management of the website to be done from a backend GUI. Usually, these CMS platforms also handle a lot of templating and rendering of your pages making them not as fast as a single page application made with React, Angular or Vue but their visual management is great for clients who can't afford full-time web developers to maintain their site. Although new platforms like Contentful, ButterCMS and GraphCMS offer what's called a Headless CMS.

A headless CMS offers the graphical backend management without the front-end rendering. So you'd build out all your data such as blogs using their GUI, but the data is delivered via a RESTful API with which you can build a front-end application using the technology of your choice on top of. Wordpress has also added a built-in API so you can use Wordpress as a headless CMS as well.

*Wordpress is built using the PHP programming language and Wordpress makes up over half of the websites on the internet and PHP is used on approximately 78% of the websites on the internet.

More Back-end Frameworks

Pretty much any language can be used in the backend so there is a lot of diversity but nowadays technologies like Docker and Cloud Services (AWS, Azure, Google Cloud) have made a lot of the backend more turnkey so learning about those services can make you very useful in devOp roles.

For larger conglomerates they are usually going to use older tech supported by larger companies (they aren’t taking risks), so you’ll often see use of Java and its Spring framework or Microsofts .NET framework which uses C++, C#, F# and VB.NET as its languages of choice. These companies are not risk takers so they often are also pickier about the educational background of their employees.

Although when it comes to web start-ups and medium to large established web applications there is a lot more room for entry and diversity on what language and framework is being used so here is a brief overview of some of the most popular frameworks.

NODE/Javascript: Express or KOA (even the more robust javascript frameworks are built around these two)

Python: Django or Flask

Ruby: Rails or Sinatra

PHP: Laravel or Symphony

GO: Buffalo

*Go is a programing language created by Google to create a good developer experience around developing faster applications vs using other low-level languages like C++ or Java. Many companies who need some additional speed in their backend servers may consider switching to GO once they’ve pushed Node/Python/Ruby to their limits.

CRYSTAL AND NIM

Python and Ruby are higher-level programming languages with features like dynamic typing and garbage collection which make them easy to learn and pleasant to develop with but does come with some cost of speed as an application takes on larger and larger scales of use. So in order to keep a familiar syntax but add features like Typing and manual garbage collections to increase speed, Crystal and Nim were created.

Crystal is essentially a compiled statically typed version of Rubys interpreted dynamically typed language.

NIM is essentially a compiled statically typed version of Pythons interpreted dynamically typed language.

DENO

The creators of NodeJS didn’t have things like Typescript and ES6 Modules to build into Node. So now they are creating a new Javascript runtime built to support these things out of the gate. Still in development, I would not be surprised if this grows over time with the growth of typescript.

Functional Web Languages

Functional Programming has grown a lot in popularity especially since React makes many Functional programming practices core to its design. There are a handful of Niche languages that were created to create a first-class functional programming experience in web development. These languages include ClojureScript, Elixir, ReasonML and ELM.

Mobile Development

More and more people use their mobile devices as their main computing and internet device so mobile development is an important topic. With new APIs like service workers and better styling techniques, it’s become easier to create websites that give an almost mobile application-like experience, often referred to as a Progressive Web Application (PWA).

Although there is still a demand for users to have a Native mobile app for their favorite applications so here are some of the technologies for making Mobile Applications.

Swift is the programing language for iOS apps, there is a back-end framework for creating APIs with Swift called Vapor

Kotlin is the programming language used for Android apps, there is a back-end framework for creating API called kTor

Kivy is a framework in Python for creating Android and iOS apps

React Native and NativeScript are both frameworks for creating Android and iOS mobile applications in Javascript

Xamarin is a framework in the .NET world for creating Android and iOS apps

Dart is a programming language that can be used for Mobile development with its Flutter compiler which lets you compile to Android or iOS. Dart can also be used for web apps.

RubyMotion is a framework for creating mobile apps using Ruby

OTHER TECHNOLOGIES

Web Assembly is a very new low-level language browsers can read, in the future many other languages will create compilers to web assembly so you can use languages other than javascript on the frontend. Microsoft is doing this with Blazor which allows you to use .Net in the front-end and Rust is also well on its way to creating a WASM compiler. Rust is a language created by Mozilla, often used for creating tooling.
Ballerina is a programming language created to incorporate working with cloud services built-in.
Bosque is an experimental programming language Microsoft is working on that is said not to have loops.