Preface

In learning Python, you took the first step in your software engineering career by learning Python's fundamentals, its elegance, and its programming principles. For the next stage of your career, let's learn how to transfer your programming knowledge to JavaScript to work on frontend tasks, including UX/UI work, form validation, frontend animations, and more. You may be familiar with rendering the frontend with Flask, but JavaScript will allow you to create user interfaces and react in real time to user input.

We'll go through the differences between the two languages, not just on a syntactical level, but also semantical: why and when we use JavaScript over Python, what their separations of concerns are, how we connect our existing HTML and CSS with JavaScript on the frontends and backends using Node.js to create engaging user experiences, and how we create full-stack applications utilizing all layers of a web application.

Who this book is for

One size does not fit all in software engineering. Python is an approachable, scalable language designed for backend web work but can open the door to curiosity about the frontend. This book is written for programmers with 1-3 years of Python experience who wish to expand their knowledge of the web ecosystem to the frontend programming world enabled by JavaScript and understand how using JavaScript on both the frontend and the backend, through Node.js, leads to efficient coding and workflows.

A solid understanding of data types, functions, and scope will be important to grasping the concepts laid out in this book. Familiarity with HTML, CSS, the Document Object Model (DOM), and Flask and/or Django will come in handy.

What this book covers

Chapter 1, The Entrance of JavaScript into Mainstream Programming, is where we will learn about the importance of JavaScript.

Chapter 2, Can We Use JavaScript Server-Side? Sure!, delves into server-side JavaScript. JavaScript's use is more than browser-side and can be used for rich, complex, server-based applications.

Chapter 3, Nitty-Gritty Grammar, is where you will learn the details of how to write JavaScript and how its grammar differs from Python.

Chapter 4, Data and Your Friend, JSON, covers data. Every computer program must work with some sort of data. You will be learning how to interact with data within JavaScript.

Chapter 5, Hello World! and Beyond: Your First Application, sees you write your first JavaScript programs!

Chapter 6, The Document Object Model (DOM), teaches you about the basics of how to work with a web page in order to connect JavaScript with user interactions.

Chapter 7, Events, Event-Driven Design, and APIs, takes you beyond basic interactions and shows you how to incorporate dynamic data into your programs.

Chapter 8, Working with Frameworks and Libraries, introduces some of the modern scaffolds for JavaScript programs in order to expand your knowledge of industry-standard applications.

Chapter 9, Deciphering Error Messages and Performance Leaks, covers errors. Errors happen! We should know a bit about how to work with them and debug our programs.

Chapter 10, JavaScript, Ruler of the Frontend, takes a closer look at how JavaScript brings the frontend together.

Chapter 11, What is Node.js?, goes into Node.js. Since the use of JavaScript on the frontend has been examined, this chapter dives into its role in the "JavaScript everywhere" paradigm using Node.js.

Chapter 12, Node.js versus Python, asks, Why would a developer choose Node.js over Python? Can they work together? And how do we install packages that we need to create and run our programs?

Chapter 13, Using Express, looks at Express.js (or just Express), which is a web application framework, considered the de facto web server of Node.js.

Chapter 14, React with Django, explores Django. You may have Django as a Python framework, so let's see how it differs from JavaScript frameworks on both the frontend and the backend.

Chapter 15, Combining Node.js with the Frontend, wires together both the frontend and the backend. We'll build two small applications for (almost) full-stack functionality.

Chapter 16, Enter Webpack, concerns tooling for deployment, which is vital for efficient JavaScript.

Chapter 17, Security and Keys, dives into security. JavaScript needs knowledge of secure resources, so how do we deal with them?

Chapter 18, Node.js and MongoDB, moves on to MongoDB. MongoDB is a great example of how to work with a database from JavaScript. We'll be using it as our example NoSQL database, as it works well with JSON data.

Chapter 19, Putting It All Together, has you create a final project using a full, modern JavaScript stack.

To get the most out of this book

Since we'll be working first-hand with JavaScript, you will need to have a code editor installed on your computer, such as Visual Studio Code, Sublime Text, or another general-purpose programming environment. A mobile device such as a tablet will likely not be an appropriate environment due to the coding environment limitations, though a lower-end machine will work. We will be working with command-line tools, so familiarity with the macOS Terminal will be useful; Windows OS users should download and install Git Bash or a similar terminal program as the standard Windows Command Prompt will not be sufficient.

A modern browser will be required to work with our programs. Chrome is recommended. We will be using ECMAScript 2015 (also known as ES6) throughout our JavaScript work.

We will be installing various other components of our systems, such as Node.js and Node Package Manager, Angular, and React. Instructions for installing each requisite component will be provided in-chapter. It will likely be required to have administrator access to your system in order to complete all the installation steps.

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Several of our projects will also require accessing websites, so an active internet connection will be necessary. A bit of a sense of humor is also recommended.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

1. Log in or register at www.packt.com.
2. Select the Support tab.
3. Click on Code Downloads.
4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

• WinRAR/7-Zip for Windows
• Zipeg/iZip/UnRarX for Mac
• 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781838648121_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

html, body, #map {
 height: 100%; 
 margin: 0;
 padding: 0
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)

Any command-line input or output is written as follows:

$ mkdir css
$ cd css

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [e-mail].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.