You want to be a front-end developer. But where do you begin? There are great jobs available building the next big thing on the web. But these jobs require a coherent set of skills. You need a plan.
There are great jobs available building the next big thing on the web, but these jobs require a coherent set of skills and you need a plan. You need to define your own developer learning path.
This path identifies the technologies you need to learn and the dependencies that exist between them.
By far the most popular path for front-end developers currently revolves around JavaScript, so we'll focus on that in this piece.
We need to choose relevant technologies and understand how they fit together.
A great example would be the goal of learning Gatsby. This web development framework requires an understanding of the stack it is built on - namely React, JavaScript, GraphQL, HTML and CSS, together with command-line build tools. If you don't know your Hook (React) from your Mutation (GraphQL) it will be hard to progress with Gatsby.
It can help to understand the nature of learning and certain patterns begin to emerge. Firstly recognise that you are not alone if you feel overwhelmed by technology - everyone working in the technical space faces the same challenge.
The pace of change in front-end development is rapid. Experiencing "impostor syndrome" - the belief that you are not as competent as others perceive you - is commonplace in a technical role. The nature of your job involves pushing technical boundaries and discovering new skills.
The good news is that the JavaScript front-end ecosystem is thriving and there is an abundance of frameworks and tools for aspiring developers to learn.
But you cannot learn everything. What follows is a suggested learning path to acquire a stack of relevant skills.
Is this the definitive learning path? No.
As the proverb says "There are many paths to the top of the mountain".
During development, you will use a wide variety of frameworks and tools to create a front-end web project. A typical website contains four key parts: HTML, CSS, JavaScript and data. Gain an understanding of these fundamentals first.
As a front-end developer, your core interest will most likely be programming languages and specifically JavaScript. A lot of the front-end code involves transforming data and turning it into HTML to create data-driven web pages. So you need to know how to mark up content in HTML and layout a simple page in CSS.
We teach courses on a variety of JavaScript frameworks using examples that pull in data from remote APIs. The examples typically render a grid of data items in a responsive way using ten lines of CSS and an understanding of half a dozen HTML tags. That is sufficient to create useful prototypes.
You do not have to dive deep into CSS. There are frameworks like Bootstrap to help you construct responsive layouts.
JavaScript is a fundamental building block of any front-end development learning path. The language has a remarkable history: it was created in ten days by one man in 1995 for the Netscape browser to work with something called the Internet. Whatever happened to that? Fast forward a quarter of a century and we are using it to run half the planet.
You must learn JavaScript with ES6 if you are planning a full-stack developer career. As trainers, we stress the need to gain a strong understanding of ES6 before attempting to learn a framework like Angular or React. These frameworks assume your familiarity with the language and then add a pile of new concepts on top. You need to be able to spot where the language ends and the framework begins.
Get fluent with ES6. Then learning React or Angular will not seem such a big deal.
Frameworks provide an structured way of doing things for large JavaScript teams. Which one do you learn? We would recommend going for one of the most popular ones like React and Angular.
They are currently the two biggest players - but all frameworks share common ideas. And they all come with command-line tooling which turns your framework code back into plain old JavaScript.
So we say, do your ES6 homework first then just dive in. The framework will build a lot of the code for you. There is no need to dust off that old jQuery manual.
Typescript is central to how Angular works, but it remains optional in other frameworks like React.
We think TypeScript is a good idea. It's what is known as a Strongly Typed language - which will help spot errors earlier in the development life cycle - even in the editor as you're going along. And there's a chance your teammates might even understand your code ;-)
Your job will always involve marshalling data from a variety of sources, and transforming it into something useful. Data arrives in unpredictable asynchronous ways - so it's important to learn about "async" programming in JavaScript.
Another feature called "Promises" allows you to write clean code that handles async events and avoids complex nested logic. Alternatively, "Reactive programming" offers a new way of thinking. Interactivity and events can be treated as streams of async events over time.
The Reactive Extensions to JavaScript (RxJS) started as an independent project and will likely become a core part of future releases of JavaScript. We've got a blog piece in the pipeline which goes into more depth about RxJS so stay tuned!
One of the biggest deals in Reactive frameworks is the use of "Observable" objects to manage async streams of data - which is a central idea within the Angular framework.
Since "Web 2.0" requesting data has involved making AJAX calls to REST APIs and getting back JSON data. This approach works but what you get back can lack precision. To give it an analogy, if you order your favourite dish in a restaurant, you probably don't want the waiter to return with an entire menu of food. GraphQL solves this problem. This query language from Facebook precisely returns the data you requested and nothing more. Less data means higher performance, means happier users.
Don't skimp on learning GraphQL - it is likely to play a big part in your front-end development career.
Build something small and then repeat. Get into the habit of continuous learning by writing lots of small projects. This work is hard. Stuff will break - which is just fine.
For inspiration, check out "100 days of code". You will find lots of developers who have set themselves the goal of writing a small project every day for one hundred days in a row. Forming the habit of learning is as valuable as the thing you create.
Don't forget to take a break and go for a walk every now and again.
Learning takes time but small amounts of effort every day will compound over time.
In no time you will be wearing that Dr. Who T-shirt!
If you found this article interesting and you'd be interested in some of our courses.
