What Front-End Developer Skills Should You Focus on Leading Into 2020?
Tags: javascript, react, css, webdev
Published: 2019-08-19 16:45:12

Hey there, Marc here. CEO of [Frontend Masters](https://frontendmasters.com), and we're super happy to be [sponsoring](https://dev.to/devteam/introducing-our-may-2019-sponsors-3dcp) the dev.to community! 😀

## JavaScript and Front-End Engineering

We are in one of the fastest changing, evolving, most lively communities on earth.

[JavaScript has evolved](https://frontendmasters.com/courses/js-recent-parts/) a lot starting from ES6, to new editions happening every year. And since the creation of Node.js, many companies have adopted JavaScript running their servers and APIs. And front-end web development changes and evolves as the tools, build processes, and frameworks evolve – some of the newest things being Web Assembly and React Hooks – it's a blast to see what we can all build!

...so, what skills should we be focused on learning now in 2019?

I'll break this into three categories:

1. Begin Coding Now
2. Becoming a Professional Front-End Developer
3. Becoming a Well-Rounded Engineer

## 1. Begin Coding Now

I'll keep this short, because in the early days of your journey, the most important thing is to get a positive feedback loop going – changing something and seeing the effects of your changes as soon as possible!

### Get Started: Scratch, HTML/CSS/JS or Python

I'm a believer that it doesn't matter what language or tool gets you started! ... whether it's [Scratch](https://www.youtube.com/watch?v=5azaK2cBKGw), [HTML, CSS & JavaScript](https://frontendmasters.com/courses/web-development-v2/), [Python](https://frontendmasters.com/courses/python/), or even a framework that gets you into programming...the main thing is to get that feedback loop going and start building your ideas to get excited about programming!

If you know someone starting programming, we have a [completely free, self-paced bootcamp](https://frontendmasters.com/bootcamp/) where you build projects like websites and games.

## 2. Becoming a Professional Front-End Developer

### Mastering the Fundamentals of JavaScript

At Frontend Masters, we believe the deep, core fundamentals of [JavaScript](https://frontendmasters.com/learn/javascript/) and programming paradigms are timeless. Putting effort into learning how the core mechanics of scope and closure, the prototype system, and type system pay off over and over again throughout your career.

### Know Your Paradigm: Functional and Object Oriented Programming

JavaScript is a "multi-paradigm" programming language, so learning Object Oriented and Functional Programming paradigms will pay off in getting you to the next level. [Object Oriented programming](https://frontendmasters.com/courses/object-oriented-js/) is a popular way to structure larger applications. Then add skills to your toolbox from [functional programming](https://frontendmasters.com/courses/functional-javascript-v3/) such as using map, reduce, filter, pure functions and composition. 

Ultimately, you'll want to learn when to use concepts from both Functional and Object Oriented paradigms.

### React or Vue?

If you'd like to get going writing professional code quickly, the most straight-forward way is to dive into a framework like [React](https://frontendmasters.com/learn/react/) or [Vue](https://frontendmasters.com/learn/vue/), since most jobs require knowing one of these top frameworks deeply.

Many people will be upset if I didn't mention [Angular](https://frontendmasters.com/learn/angular/), but I don't think it's the best framework to start on. You'll know when you have a big enough project to leverage its "battery's included" philosophy.

### Developer Tools

It's also important to [master your development tools](https://frontendmasters.com/courses/chrome-dev-tools-v2/) to learn to debug your code and the performance of your application.

### TypeScript

More and more companies are adopting [TypeScript](https://frontendmasters.com/courses/typescript-v2/) for better developer experience as well.

### CSS Grid and Flexbox

Both [CSS Grids & Flexbox](https://frontendmasters.com/courses/css-grids-flexbox/) are essential to layout modern, responsive websites that work on any device.

### Webpack

Tools like Create React App and Parcel are making getting started easier and easier, but if you want to go deeper, learn [Webpack](https://frontendmasters.com/learn/webpack/) to create a custom build pipelines to ship your code in an optimized way.

## 3. Becoming More Well-Rounded

### Design Skills

Having basic [design skills](https://frontendmasters.com/courses/design-for-developers/) can make you a more desirable and well-rounded engineer.

### Node.js & Full-Stack Deployment.

Learning [Node.js](https://frontendmasters.com/learn/node-js/) and how to build [APIs in Node](https://frontendmasters.com/courses/api-design-nodejs-v3/) can make you more of a [full stack engineer](https://frontendmasters.com/learn/fullstack/).

Better yet, being able to set up and [deploy your own apps](https://frontendmasters.com/learn/fullstack/) makes you even more self-sufficient.

[AWS](https://frontendmasters.com/courses/aws-frontend-react/) is currently the most popular platform to deploy apps at scale, but Azure is gaining steam.

### SVG

One of the most flexible and underused graphics formats is [SVG](https://frontendmasters.com/courses/svg-essentials-animation/). It's incredible since it scales infinitely, from a mobile device to a billboard.

### Testing

Want to make sure you're not shipping broken code? Leveraging [testing](https://frontendmasters.com/courses/testing-practices-principles/) with a popular test runner like Jest can go a long way in preventing broken deploys.

### Git

Who hasn't lost code? Well, if you're a [git master](https://frontendmasters.com/courses/git-in-depth/), you'll never lose your code and will be able to recover from when there are issues merging code. Everyone loves someone who really knows git on their team.

### Computer Science

Knowing how to measure time complexity and use the correct [algorithms and data structures](https://frontendmasters.com/learn/computer-science/) can lead towards more efficient solutions and better engineering-thinking in general. 

### Accessibility

Making sure to understand [accessibility](https://frontendmasters.com/courses/web-accessibility/) is important to making sure your websites and web applications are open to everyone, plus you also help power users who prefer to navigate using the keyboard.

## Newer Skills

- [Gatsby](https://frontendmasters.com/courses/gatsby/) has been gaining a lot of steam for building performant websites.

- [Creative Coding](https://frontendmasters.com/courses/canvas-webgl/) is now possible in the browser with widespread Canvas and WebGL support for 3D in the browser!

- GraphQL makes your APIs more flexible since you can grab exactly the data you need on the client, instead of breaking it up into multiple REST endpoints. We have  courses for both [Server GraphQL in Node.js](https://frontendmasters.com/courses/server-graphql-nodejs/) and [Client GraphQL in React](https://frontendmasters.com/courses/client-graphql-react/).

- [Service Workers](https://frontendmasters.com/courses/service-workers/), the new API behind Progressive Web Apps, enables your websites and web apps to work offline in the plane or train!

Which skills do you think developers should be learning in 2019 – what have I missed?