Introduction

"Do your work, and you shall reinforce yourself."

-RALPH WALDO EMERSON

The following scenario plays out at some point in the career of every developer working on mobile or web apps today:

You show up at your new job (or new freelance gig). You were good enough at using JavaScript that you got hired, and now you're feeling confident that you can start making contributions quickly.

The HR manager gives you a tour and brings you to your new desk - or maybe you work at home or at your local coffee shop. You log in to your new email account and see a message from your manager:

• Welcome to the team! Normally, we'd give you a few weeks to get settled in, but we're slammed and I'm hoping you can get working on some code right away.
• This morning, please log in to Slack and clone our repo, and we'll get you started on some low-level tasks. A couple of things you should know first are that we use a feature branch workflow, we enforce Google style with ESLint, and we unit-test with Mocha and Chai. Everything is Jamstack with MERN on the back end. The API isn't fully documented yet, but it's REST, and you should be able to figure out the endpoints by poking around with Postman. Here are a few small tasks where we could use your help today:

• Figure out why the refresh token isn't getting set in some cases.
• Our code splitting is suboptimal. Take a look at the webpack config and see whether you can improve the situation.
• Speaking of suboptimal, we have some unnecessary Sass in the login module that may be slowing down our build and load times and should be converted to CSS Modules.
• Our ticker widget still relies on jQuery (ha-ha!), and we need to refactor that out before we ship so that we don't embarrass ourselves.

• Okay, that should be enough for today. We have our weekly stand-up tomorrow morning, and we can get you started on something more important then. Don't hesitate to reach out if you have questions!

Your palms start to sweat as you reread the message. You were told you'd be working with JavaScript. What's all this stuff? Sass? You know how to deal with unnecessary sass from your dog. .

You grab on to the part about jQuery. You recall reading about it in one of your books, and you're pretty sure you understand it. But why does the manager think it's so funny?

You close your email and go to the cafe to order a chai mocha latte and a Jamstack sandwich and have a rest in order to think about whether you really and truly need this job.

Why This Book?

I wrote this book because I've been in the situation just described numerous times in my career as a full-stack developer. Maybe you've already had an experience like that one and you want to make sure you're better prepared next time. Maybe you're going through this experience right now. Maybe you want to try to prevent this from happening to you as you begin your career in JavaScript programming. If you fit into any of these categories, this book is for you.

Software development is a dynamic craft. A good part of your responsibility as a professional programmer is to learn new things constantly. The world of JavaScript, however, is notoriously dynamic. Something you learn this year will likely be out of style or at least vastly different next year. There's no sense in fighting the current by sticking to your tried-and-true methods and tools. Many times, if not most of the time, new libraries and tools catch on quickly in JavaScript because they're genuinely useful and superior to the previous ones.

Learning new things can be difficult, and learning new things under pressure to begin using them on real-life projects can be particularly stressful unless you're properly prepared with the right attitude and sufficient experience.

My goal with this book is to prepare you to understand and work with JavaScript and JavaScript programmers. If you read this entire book, you'll understand much of what the manager in the scenario I described earlier said - and maybe even what to do about it. You'll also be well-equipped to continue your learning and to ask the right questions when something you haven't heard of comes up next time.

JavaScript is a huge topic

Programmers create new ways of working with JavaScript all the time and package them as libraries and frameworks that can be downloaded and used by other programmers. Think of libraries as tools to solve a particular problem in a different way. Think of a framework as a complete system for doing particular things.

No single person can know and remember every JavaScript library and framework that's been created. And there's really no need to. By definition, a JavaScript library or framework is just JavaScript. In theory, if you know JavaScript, you can learn every JavaScript library and framework. In fact, if you know enough about JavaScript, you can write your own JavaScript library or framework!

How this book is different

Most books about JavaScript focus on either teaching the JavaScript language itself, or on focusing on a single library or framework. Both approaches have their merits, but both leave out a vital ingredient for becoming a JavaScript programmer.

Learning to program with JavaScript isn't fundamentally about memorizing syntax or knowing every function available in a library or framework. If you know and understand the basics, you can look up everything else easily enough. Furthermore, if you spend a lot of time learning every function and feature of a particular library from a book, you'll be frustrated when you go to use it and find that much has changed in the time (whether it's a month or several years) since the book was published.

In my experience, it's much better to learn just enough about as many different ways of doing things as possible, so that when you encounter something new, you'll have something to compare it to.

Learn JavaScript as it's used

Knowing how to write JavaScript isn't enough to be able to develop apps. JavaScript lives in an environment, whether it's a web browser, a mobile phone, a web server, or a hardware device. Once you get to a certain level of proficiency with JavaScript, knowing how JavaScript interfaces with its environment is what's most important.

This book shows you how JavaScript is used in the real world, using a combination of real-world and simplified examples.

Understand similarities between the most popular libraries

Learning about a single library - whether it's React or Vue.js or Svelte or Angular - is great. But without knowledge of other ways of doing things, you may fall into the trap of thinking that every problem can be best solved by the tool you know.

If you learn a wide variety of tools, you'll understand how libraries and frameworks are constantly improving on what's been done before, and you'll gain an appreciation for why change is so important in the JavaScript world.

Adapt to new technologies

Another benefit of learning multiple ways to do the same thing is that you'll find that the more you learn, the easier it becomes to learn additional tools. One trait of outstanding JavaScript programmers is that they're excited by opportunities to learn new libraries and tools.

Conventions Used in This Book

This book is designed for readers who have some experience with programming or web development and who want to learn not only JavaScript but also how to apply it. Topics I describe in this book include how to

• Write JavaScript code using the most modern and up-to-date syntax
• Use the development tools used by professional JavaScript programmers
• Build reactive user interfaces with ReactJS
• Build reactive user interfaces with Vue.js
• Build reactive user interfaces with Svelte
• Write server-side JavaScript with Node.js
• Connect to data sources with Node.js
• Build a complete back-end application using Node.js
• Connect a front-end user interface to a Node.js back end

As you read this book, keep the following information in mind:

• The book can be read from beginning to end, but feel free to skip around, if you like. If a topic interests you, start there. You can always return to earlier chapters, if necessary.
• At some point, you will get stuck and the code you write won't work as intended. Do not fear! You can find many resources to help you, including support forums, others on the Internet, and me! You can email me directly at chris@minnick.com or message me on Twitter, Mastodon, or through my website (www.chrisminnick.com). Additionally, you can submit a ticket and find additional code at my GitHub repo for this book, at https://github.com/chrisminnick/javascriptaio.
• Code in the book appears in a monospaced font, like this: <h1>Hi there!</h1>.

Foolish Assumptions

I do not make many assumptions about you, the reader, but I do make a few.

• I assume that you have some experience or familiarity with HTML and CSS. Many of the applications I show you how to develop make use of both fundamental...