loading...
Frontend Masters

What Front-End Developer Skills Should You Focus on Leading Into 2020?

1marc profile image Marc Grabanski πŸ™πŸ’» Updated on ・5 min read

Hey there, Marc here. CEO of Frontend Masters, and we're super happy to be sponsoring 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 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, HTML, CSS & JavaScript, 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 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 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 is a popular way to structure larger applications. Then add skills to your toolbox from functional programming 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 or Vue, since most jobs require knowing one of these top frameworks deeply.

Many people will be upset if I didn't mention 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 to learn to debug your code and the performance of your application.

TypeScript

More and more companies are adopting TypeScript for better developer experience as well.

CSS Grid and Flexbox

Both 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 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 can make you a more desirable and well-rounded engineer.

Node.js & Full-Stack Deployment.

Learning Node.js and how to build APIs in Node can make you more of a full stack engineer.

Better yet, being able to set up and deploy your own apps makes you even more self-sufficient.

AWS 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. 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 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, 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 can lead towards more efficient solutions and better engineering-thinking in general.

Accessibility

Making sure to understand 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 has been gaining a lot of steam for building performant websites.

  • Creative Coding 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 and Client GraphQL in React.

  • 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?

Posted on by:

1marc profile

Marc Grabanski πŸ™πŸ’»

@1marc

Helping developers advance in their skills and tools

Frontend Masters

Modern JavaScript, Node.js and Front-End Engineering Courses

Discussion

markdown guide
 

Hey Marc - you know I have a huge debt of gratitude to FEM for all the practical skills I have gotten from the courses and live workshops. FEM is a must have in my toolbox. I recently made my way through the beginner, professional and (almost all the way through) expert level of the frontend learning paths and gained tremendous confidence and knowledge. I’m very grateful that you and your staff work so hard to provide quality learning.

 

That's so awesome to hear! And congrats to you for putting in the hard work to advance your career!! πŸ™ŒπŸ˜„

 

Btw, something I always keep handy: the frontend developers handbook. So, thx for that as well! πŸ™πŸ˜ƒ

Nice!! Already starting work on the 2020 version of the handbook!

 

Great post! I cannot agree more about learning the fundamentals properly.

Right now I'm going through the TypeScript course and I plan to learn more about testing after I get a side project in a state I'm happy with. The CS courses are also something I look forward to learning from.

Also: I'd just like to say thank you for FEM. It has been a really big help in landing my current role.

 

Where is the best place to learn the "fundamentals" especially for folks who didn't come from a CS background? Should I grab a college text book on OOP or watch trusted tutorials from places like LinkedIn or Udemy?

 

Our website, Frontend Masters (mentioned in this article) is setup for this case exactly! Check out the learning paths for a guided learning experience. Most of our teachers are not from a traditional CS background, including myself.

 

Hi Marc! I loved your list!
Under the well-rounded I would also encourage developers to learn the basics of marketing in addition to design. At least the technical aspects of it. This means making sure there are hooks in your markup for marketers to use with GTM, knowing how the GTM Data Layer works, knowing enough to NOT block the bubble-up when a form is submitted so marketers can track form submissions, and vanilla JS/basic GTM tags/triggers/variables because not every shop has a Technical SEO person who knows JS.

For design skills I always recommend:
Don't Make Me Think - Steve Krug (This was the only textbook I had for my uni design students.)
Better Web Typography - Matej Latin
Refactoring UI Channel
And there is now a Refactoring UI book!

 

Svelte seems nice to learn also
svelte.dev/tutorial/basics

 
 

Added to the article! Just a note that our courses have accessibility lessons baked into the main curriculums since many people don't go out of their way to seek out accessibility information on its own.

 

Awesome! I was just in the process of editing my comment to mention that I may have gone in a little strong with the giant image πŸ˜…. Thanks for writing up this list!

LOL! All good. You're welcome! πŸ˜€

 

I agree that React and Vue are easier to learn for beginners :) Good post! It's valuable to see all the different skills listed here.

 

Why would an aspiring front end developer want to take up Python?

If one wants to build a visual interface, why?

I'm all for keeping learning on a "need-to-know" basis. This one seems way off into the distance.

Even JavaScript would be a bit too much to start off with.

 

Ya, I guess it was general advice and not front-end specific.

My main point was that in the early days of learning to code ... you shouldn't get caught up in the language, just build things and have fun! Get that feedback loop going of building things.

 

I would say ... Flutter.
Right now It's mainly a mobile thing, but the Web version (Hummingbird) is coming, and Google is doing an hard push on Flutter right now.
I'm trying It and I've to admit that Dart is a really good language, and It's growing fast.

 

Data structures and algorithm complexity (and any c.s math related stuff) is just way too difficult for me. I've even bought dsa.js to try to understand it better but I couldn't. I'm a web developer, not a c.s engineer xD.

 

Btw if you're a student FEM 6-month free subscription recently was added on Education pack to GitHub along with other awesome things (education.github.com/pack#offers)
As a 3rd-year student, I use it a lot and now I'm gonna definetely try FEM which I heard so many good things about.

 

This post is too much accurate. Thanks for sharing!

 

Awesome. I'm working on upgrading my React skills and learning graphql right now. I think for me the biggest jump from hobby/side projects to professional developer is testing, so that's my overall focus in addition to specific stacks.

 

Hi Sara, I agree and it is so often left till the later stages of learning or an afterthought completely. I'd recommend learning the fundamentals of test driven development from someone like Robert C Martin (aka uncle Bob). TDD is fast becoming a very desirable skill employers look for in any well rounded developer.

 

"Many people will be upset if I didn't mention Angular"
Nah man, we are really grateful you didn't mention that monster!

Also, the ultimate handbook/guide/bible/etc., has to be the amazing "You don't know Javascript" book series - which can easily be found on Github. It gives an incredible insight to the one of the most notorious languages, and it's fit for any level of specialty.

 

Marc, you and the crew at fem are the best!
You guys have some of the best people teaching the courses and the workshops are the best!
Keep up the great work!

 

Already following the learning path at FEM, incredible lectures and resources, I hope by the time I’m done i will be a genius. Lol

 

Thanks for this wonderful thread.

 

Actually, I was looking for a course on Svelte on Frontend masters, but I couldn't find it. Will it be added to the courses in the near future?

 

We're taking with Rich Harris, the creator. But nothing set in stone yet. We're currently mainly focused on React and Vue.

 

There needs to be a priority place for JAMStack and the new trend of serverless developments.

 

WOw!!! i think this is so nice, i am a junior front-end developer learning gatsby and graphql presently. I hope i get better and get a job to help me more.

 

Nice article but you should have mentioned Angular tho.

 

I'd like to add ClojureScript, ReasonML and SqueakJS.

 

Totally disagree.

You forgot the most important part of programmer's skills.

Data structure.

It is much more important then how your code looks, how much technologies you know, how fast you learn another pretty framework.

If you have mess in your data structure, if you don't follow strict principles while develop your data, you eventually find your project as a a big messed mix of monkey patches. And no one can support this project, if you leave it.

Again. Data structure.

The first, the last and the most important thing, you should care about, is how you store your data.

 

I did mention Algorithms and Data Structures as an important part of becoming a well-rounded engineer ...maybe you think I should have put it as higher priority? Thanks for your feedback!

 

No, you shouldn't have put "Algorithms and Data Structures" as high priority field of knowledge.

Of course, it is important to know base structures and algorithms, but it won't be very helpful in frontend projects. "Algorithms and Data Structures" don't teach you how to structure your frontend data.

What I can only suggest is to search for books, articles and examples of normalizing stored data in the backend RDBMS solutions. Using the same rules can be helpful in your frontend project and can save a lot of time of your team, when they start to improve your code.

 

To be honest I think general problem solving and communication (in code or in person with stakeholders) is as important as data structures. You can pick up data structures as you learn, I did and am doing OK.

 

"Soft Skills" are very important, indeed - it can make you more marketable and a much better team mate to work with.

Data Structures and Algorithms are something that can be learned on a need-to-know basis. Most Web Developers - especially front-end devs, which this article was targeted at (new ones at that) - can go an entire, successful, career without knowing anything in-depth about them, frankly. So I don't think they are "foundational knowledge" points that should gate-keep people out of the developer space.