We've all been there, that moment when your boss calls you into the office and says;

"I need you to add a label next to the email field on our signup form​"

​And your heart sinks.

Adding a label should be simple right? That's what your intuition tells you and it's definitely what your boss thinks.

​And 10 years ago it would have been; you'd have cracked open the HTML file, located the textbox, added ​a Label and you were done.

But front-end is a lot more complicated now.

It's not just "add a label", it's...

• Get the project running on your machine
• Figure out what commands you need to make the project build
• Realise you need to install Node.js
• Scratch your head over the weird Typescript errors you encounter
• Spend hours understanding why the Javascript framework isn't working
• Figure out how to publish the application

It's easy to venture into "simple front-end tweaks" ​full of naïve optimism, only to emerge, hours later blinking into the sunlight, wondering where your day went.​

Is it just ​you?

If front-end development ​was really so impossible, no-one would be doing it.

Yet hundreds of thousands of developers seem to be having a whale of a time developing front-end (or full-stack) applications (and earning good salaries too).

You can barely move on Twitter for all the tweets eulogizing React.js or Vue.js.

Why is it so much better for them?

Are they "wired differently"? Are they somehow immune to all the issues and problems the rest of us face?

Are they just more patient in the face of adversity?

​A few years ago I ​was working as a back-end developer when I was suddenly thrown into a front-end project.

​The project was written ​with Typescript and within ​seconds I was completely ​lost.

• There were ​"fat arrows" everywhere
• All the javascript files had these weird import statements at the top
• There was some kind of build process that you had to trigger to make anything work in the browser
  
• I didn't have Node.js installed so nothing worked
  

I'd worked with Angular 1 but this was different. It was like I'd been launched into an alien world where everything was upside down.

I fought this for a while, complained that everything was too complicated, that I didn't know how to even get started let alone work on the feature.

​But then I ​took a step back and started asking questions. Luckily I was working with some ​patient front-end developers so I grilled them.

I asked what all the front-end build tools were, how Typescript fit in, what steps we had to take to build the project and what we could do to simplify the process.

​

​By the end of this ​experience I realised there ​were two ​keys you needed to unlock the world of front-end development.​

#1 ​A clear picture of the ecosystem

From the outside looking in, front-end is a mess of build tools, javascript compilers, minifiers, bundlers, code editors.

If you don't know what these tools do (and where they fit in the development process) you're destined to bang your head against them every time you try to do front-end work.

But when you grasp the "big picture", everything changes.

Once you understand how the pieces fit and what jobs they perform, you can work with them instead of against them. 

#2 ​Knowledge of where the shortcuts are

You can waste a LOT of time in front-end development.

Take webpack.

Webpack is one of those tools you'll probably run into when you do front-end development and it's a pain.

It's a pain because it is tangential to the job you're trying to do (build interesting features) and has it's own syntax and quirks which you have to invest time learning.

It's a lot of effort just to compile and bundle up your javascript/css files so they can run in the browser.

But front-end developers know how all the big frameworks, webpack alternatives (and even the latest version of webpack itself) let you skip webpack configuration entirely.

They can spin up a new project and get on with their features with barely a thought for configuration/set-up.

There are many shortcuts you can take in front-end development, and once you know ​where they are you can stay focused on developing your features.

Front-end development can be time-destroying  and frustrating, but it doesn't have to be.

If you could get the key concepts under your belt in a few hours, instead of days or weeks....

If you knew precisely which parts of front-end to focus on (and what to avoid)...

If you knew precisely how to spin up new front-end applications in minutes... 

You could focus on building your features. 

You could target those "full stack" jobs.

You could enjoy the calm confidence that comes with knowing what all the front-end moving parts are and how they interact.

Because front-end is a pretty big subject and you haven't got weeks to spend understanding it, "Front-end In Four Hours" focuses on the essential building blocks (and practical advice for getting started).

Hour 1 - The fundamentals

• What is front-end?
• What tools do you need to get started?
• The big picture
• The simplest application you can build (HTML)
• Add a little "interactivity" (Javascript)
• Style things up (CSS)
• Separate your concerns
• A brief introduction to some Javascript fundamentals
• What on earth is an IIFEE? (and why do I need one?)

Hour 2 - Javascript Today

• Which Javascript language version should you use?
• The big picture (revisited)
• Web Application Bundlers
  • Javascript compilation
  • Minification
  • Bundling
  • What Web Application Bundlers are there?
• Typescript - an alternative
• Try it yourself: Typescript without the headaches (using Parcel)
• Bringing in third party libraries (package management)
• Module Resolution (aka referencing javascript code)
• Try it yourself: Export/Import modules

Hour 3 - The three big frameworks (a quick start)

• What are Javascript frameworks?
• Why would you use a framework?
• Why wouldn't you use a framework?
• Should you learn Javascript first?
• How quickly can you spin up a new project?
• What is Angular?
• What is Vue.js?
• What is React.js?
• Try it yourself: Spin up a new Vue.js application
• Try it yourself: Spin up a new Angular application
• Try it yourself: Spin up a new React.js application

Hour 4 - Build your features

• Tips for building your front-end features
• Keep it simple and focused
• Iterate quickly with mockups
• Break big features down into components
• Use hard-coded data in your HTML (examples in React, Angular and Vue)
• Use hard-coded data in your Javascript (examples in React, Angular and Vue)
• Iterate while it's easy
• Making AJAX Requests (using Fetch or Axios)
  
• A word on authentication
  
• Go forth and build your features

From "stuck with legacy" to "ooh there's an interesting front-end application I can understand...

Front-end in four hours will get you there as quickly and painlessly as possible.

Take the leap, skip the usual uncertainty and frustration that comes with trying to "understand front-end" and get up to speed by this time tomorrow.