Hands-on JavaScript for Python Developers

Leverage your Python knowledge to quickly learn JavaScript and advance your web development career

Sonyl Nagale

• Publisher: Packt Publishing
• Year: 2020
• Print ISBN: 9781838648121
• eBook ISBN: 9781838641047
• Edition: 1
• Topic: Informatik
• Subtopic: Programmierung in JavaScript

Build robust full-stack web applications using two of the world's most popular programming languages Python and JavaScript

Key Features

• Discover similarities and differences between JavaScript and Python coding conventions
• Explore frontend web concepts, UI/UX techniques, and JavaScript frameworks to enhance your web development skills
• Put your JS knowledge into practice by developing a full-stack web app with React and Express

Book Description

Knowledge of Python is a great foundation for learning other languages. This book will help you advance in your software engineering career by leveraging your Python programming skills to learn JavaScript and apply its unique features not only for frontend web development but also for streamlining work on the backend.

Starting with the basics of JavaScript, you'll cover its syntax, its use in the browser, and its frameworks and libraries. From working with user interactions and ingesting data from APIs through to creating APIs with Node.js, this book will help you get up and running with JavaScript using hands-on exercises, code snippets, and detailed descriptions of JavaScript implementation and benefits. To understand the use of JavaScript in the backend, you'll explore Node.js and discover how it communicates with databases. As you advance, you'll get to grips with creating your own RESTful APIs and connecting the frontend and backend for holistic full-stack development knowledge.

By the end of this Python JavaScript book, you'll have the knowledge you need to write full-fledged web applications from start to finish. You'll have also gained hands-on experience of working through several projects, which will help you advance in your career as a JavaScript developer.

What you will learn

• Discover the differences between Python and JavaScript at both the syntactical and semantical level
• Become well versed in implementing JavaScript in the frontend as well as the backend
• Understand the separation of concerns while using Python programming for server-side development
• Get to grips with frontend web development tasks, including UI/UX design, form validation, animations, and much more
• Create modern interaction interfaces for your Python web application
• Explore modern web technologies and libraries for building full-stack applications

Who this book is for

This book is for experienced Python programmers who are looking to expand their knowledge of frontend and backend web development with JavaScript. An understanding of data types, functions, and scope is necessary to get to grips with the concepts covered in the book. Familiarity with HTML and CSS, Document Object Model (DOM), and Flask or Django will help you to learn JavaScript easily.

Section 1 - What is JavaScript? What is it not?

Ah, JavaScript, the mysterious beast. Let’s unpack what it is and isn’t, because the front-end can barely exist without it, and the back-end loves it.

In this section, we will cover the following chapters:

• Chapter 1, The Entrance of JavaScript into Mainstream Programming
• Chapter 2, Can We Use JavaScript Server-Side? Sure!
• Chapter 3, Nitty-Gritty Grammar
• Chapter 4, Data and Your Friend, JSON

The Entrance of JavaScript into Mainstream Programming

JavaScript can run both client- and server-side, which inherently means that the use cases for using JavaScript versus Python will vary. From humble beginnings, JavaScript, with its quirks, strengths, and limitations, is now one of the main pillars of the interactive web as we know it, from powering rich frontend interactions, to web servers. How did it become one of the most important ubiquitous technologies of the web? In order to grasp JavaScript's powerful ability to add functionality to both the front- and backends, we first need an understanding of what the frontend is—and what it isn't. Having an understanding of JavaScript's origins helps to clarify the "why" of JavaScript, so let's take a look.

The following topics will be covered in this chapter:

• The National Center for Supercomputing Applications (NCSA) and the need for interactivity
• Early web browsers and a 10-day prototype
• Enter Ecma International
• HTML, CSS, and JavaScript—the best friends of the frontend
• How JavaScript fits into the frontend ecosystem

Technical requirements

You can find the code files present in this chapter on GitHub at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers.

NCSA and the need for interactivity

The early internet was a fairly boring place compared with the rich medium we now have in the 21st century. Without graphical browsers and only fairly rudimentary (and esoteric) commands, early adopters were able to do only certain academic tasks for a period of time. Starting from ARPANET (the Advanced Research Projects Agency Network), it was designed to facilitate basic communication and file transfers by being one of the first packet-switching networks. Additionally, it was the first network to implement the Transmission Control Protocol/Internet Protocol (TCP/IP) suite, which we now take for granted as it runs behind the scenes of all modern web applications.

Why is this significant? The early internet was designed for fundamental and simple purposes, but it has grown since then. As a Python developer, you already understand the power of the modern web, so a full history of the web isn't needed. Let's skip to the origins of what we now know as the frontend.

Enter Tim Berners-Lee in 1990: the invention of the World Wide Web. By building the first web browser himself and with the European Organization for Nuclear Research (known as CERN) creating the first website, the floodgates opened and the world was never the same. What started as academic tinkering has now become a global necessity, with millions of people around the globe relying on the web. It goes without saying that today, in the 21st century, we use the web and multiple forms of digital communication to go about our everyday lives.

One of the projects that Berners-Lee created was HTML—Hypertext Markup Language. As the backbone of a website, this basic markup language spawned significant growth and development in the computing community. It only took a few years (the year was 1993, to be precise) for Mosaic, the first iteration of what we now call a browser, to be released. It was developed by the NCSA at the University of Illinois at Urbana-Champaign and was a vital part of the web's development.

Early web browsers and a 10-day prototype

So, why JavaScript? Obviously, the web needed more than just static data to be useful, so, in 1995, Brendan Eich at Netscape Communications came along. Originally, the idea wasn't to create a whole new language but rather to incorporate Scheme into Netscape. That idea was superseded by the work Sun Microsystems did with Java. It was decided that this language that Eich was creating would be somewhat Java-like, and not Scheme at all. The genesis of the idea came from Marc Andreessen, the founder of Netscape Communications. He felt there needed to be a language to combine HTML with a "glue language" that helped with images, plugins, and—yes—interactivity.

Eich created a prototype of JavaScript (originally called Mocha, and then LiveScript) in 10 days. It's hard to believe that a 10-day prototype has become such a crucial part of the web, but those are the facts as history records them. Once Netscape developed a production-ready version, JavaScript shipped with Netscape Navigator in 1995. Shortly after JavaScript was released, Microsoft created its own version of JavaScript, called (unceremoniously) JScript. JScript shipped with Microsoft's Internet Explorer 3.0 in 1996.

Now, there were two technologies competing for the same space. JScript was reverse-engineered from Netscape's JavaScript, but since the two flavors of the language had their own quirks, the browser wars began, leading sites to often have a label "Best viewed in Netscape Navigator" or "Best viewed in Internet Explorer", due to the technological complexities involved in supporting both technologies on one site. A portent of things to come, the differences in the early versions only increased. Some websites would work flawlessly in one browser and break horrifically in the other—not to mention the complications caused by other competitors to both Netscape's and Microsoft's browsers! Early developers also found the differences between the two technologies only fueled the arms race. If you experienced such degradation of performance (or, even worse, you were working with JavaScript in the early days, like me), you definitely felt the pain of the competing versions. Each company, as well as other third parties, raced to create the next best JavaScript release. At its core, JavaScript has to be interpreted client-side, and the differences between the browsers led to bedlam. Something had to be done, and Netscape had a solution, though it wouldn't be perfect.

We'll learn about this solution in the next section.

Enter Ecma International

The European Computer Manufacturers Association (ECMA) changed its name in 1994, becoming Ecma International, to reflect its refined purpose. As a standards organization, its purpose is to facilitate modernization and consistency for various technologies. Partly in response to Microsoft's work, Netscape approached Ecma International in 1996 to standardize the language.

JavaScript became documented in the ECMA-262 specification. You may have seen the term ECMAScript or "ECMAScript-based languages". There are more ECMAScript languages than just JavaScript! ActionScript is another ECMAScript-based language that follows similar conventions to JavaScript. With the downfall of Flash as a web technology, we don't see ActionScript much in practice anymore save for a few discrete uses, but the fact remains: Ecma International created standards and they have been used to create different technologies, which helped ease the browser wars—for a time.

Perhaps the most interesting part of Ecma International with regard to JavaScript is the various versions that have been codified. To date, there are nine versions, all with varying differences. We will be using ECMAScript 2015 (also known as ES6) throughout this book, as it is the most stable baseline for web development work today. Features of the 2016-2018 versions can be used by some browsers and will be introduced.

HTML, CSS, and JavaScript – the best friends of the frontend

Powering every modern website or web application are, at a minimum, three technologies: HTML, Cascading Style Sheets (CSS), and JavaScript. They are the "best friends" of the frontend, and are illu...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Section 1 - What is JavaScript? What is it not?
• The Entrance of JavaScript into Mainstream Programming
• Can We Use JavaScript Server-Side? Sure!
• Nitty-Gritty Grammar
• Data and Your Friend, JSON
• Section 2 - Using JavaScript on the Front-End
• Hello World! and Beyond: Your First Application
• The Document Object Model (DOM)
• Events, Event-Driven Design, and APIs
• Working with Frameworks and Libraries
• Deciphering Error Messages and Performance Leaks
• JavaScript, Ruler of the Frontend
• Section 3 - The Back-End: Node.js vs. Python
• What Is Node.js?
• Node.js versus Python
• Using Express
• React with Django
• Combining Node.js with the Frontend
• Enter Webpack
• Section 4 - Communicating with Databases
• Security and Keys
• Node.js and MongoDB
• Putting It All Together
• Assessments
• Other Books You May Enjoy