JavaScript by Example

Dani Akash S

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781788299008
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

A project based guide to help you get started with web development by building real-world and modern web applicationsAbout This Book• Learn JavaScript from scratch by building clones of popular web applications• Understand the core concepts and techniques surrounding JavaScript with this power-packed hands-on guide• Explore modern JavaScript frameworks and libraries such as Node, React and Webpack Who This Book Is ForThe target audience for this book is developers with little or basic knowledge of working with JavaScript. If you are an emerging web developer with experience in building static web pages using HTML and CSS, this book will teach you to add JavaScript elements to make your website interactive and dynamic.What You Will Learn• A strong understanding of web application development with JavaScript and ES6.• A firm foundation on which to master other JavaScript frameworks and libraries.• Write maintainable and scalable code by organizing functions into modules.• Importance of tools such as Node, NPM, Babel, and Webpack in Front-end development.• Work with real-time data such as incoming video streams, texts, and so on• Integrate React with JavaScript to build large-scale applications.• Utilize Redux to manage data across React components and greatly speed up the development processIn DetailJavaScript is the programming language that all web developers need to learn. The first item on our JavaScript to-do list is building g a To-do list app, which you'll have done by the end of the first chapter. You'll explore DOM manipulation with JavaScript and work with event listeners. You'll work with images and text to build a Meme creator. You will also learn about ES (ECMAScript) classes, and will be introduced to layouts using the CSS3 Flexbox.You'll also develop a responsive Event Registration form that allows users to register for your upcoming event and use charts and graphics to display registration data. You will then build a weather application, which will show you different ways perform AJAX requests and work with dynamic, external data. WebRTC enables real-time communication in a web browser; you'll learn how to use it when you build a real-time video-call and chat application later in the book.Towards the end of the book, you will meet React, Facebook's JavaScript library for building user interfaces. You'll throw together a blog with React, and get a feel for why this kind of JavaScript framework is used to build large-scale applications. To make your blog more maintainable and scalable, you'll use Redux to manage data across React components.Style and approachThis project-based guide will teach you all the facets of JavaScript through real-world app examples.

Building a Blog with React

Hey! Good work making it to the last section of the book, where you are going to learn Facebook's React library. Before we start with this chapter, let's take a look at your journey through the book:

• You first built a simple ToDo list app using the JavaScript's ES6 syntax and then created a build script to compile it down to ES5 so that it will be compatible with older browsers.
• Then, you built a Meme Creator while setting up your own automated development environment, learning lots of new concepts and tools along the way.
• Next, you used the development environment and built an Event Registration app in which you built your first reusable JavaScript module for API calls and form validation.
• Then, you utilized the power of JavaScript WebAPIs to build a peer-to-peer video calling app with WebRTC.
• Lastly, you built your own HTML5 custom element that will display a weather widget and can be easily imported and used with other projects.

From a beginner level, you built some really awesome applications and now you are familiar with many important concepts of modern JavaScript. Now, it's time for you to employ these skills to learn a JavaScript framework, which will turbocharge your development process. This chapter will focus on helping you get started with React.

Why use a framework?

Modern application development is all about speed, maintainability, and scalability. Given the web is the major platform for many applications, the same will be expected for any web applications. JavaScript may be a great language but writing plain JavaScript can be a tedious process at times when you are dealing with a large application in a team environment.

In such applications, you will have to manipulate a lot of DOM elements. Whenever you make changes to the CSS of a DOM element, it is called a repaint. It will affect how an element appears on the browser. Whenever you remove, change, or add an element in the DOM, then it is called a reflow. A reflow of a parent element causes all its child elements to reflow too. Repaints and reflows are expensive operations because they are synchronous. It means when a repaint or reflow happens, JavaScript will not be able to run at that time. This will lead to lagging or slow execution of web applications (especially on smaller devices, such as low-end smartphones). So far, we have been building very small applications; therefore, we haven't noticed any performance issues but for applications, such as Facebook, this is crucial (there are literally 1,000s of DOM elements).

Also, writing lot of JavaScript code means increasing the file size of your code. For mobile users who rely on 3G or lower connections, it means your application will take a longer time to load. This causes a bad user experience.

Finally, frontend JavaScript code needs to deal with a lot of side effects (events such as click, scroll, hover, and network requests). When working in a team environment, every developer should know what kind of side effects your code deals with. When the web application grows, every side effect needs to be properly tracked. In plain JavaScript, writing maintainable code in such an environment is also difficult.

Luckily, the JavaScript community is well aware of all these scenarios and, hence, there are lots of open source JavaScript libraries and frameworks created and actively maintained to address the preceding issues and improve developer productivity.

Selecting a framework

Choosing a JavaScript framework in 2017 is more difficult than learning JavaScript itself (yeah, it's true!) due to the release of a new framework almost every week. But unless your requirement is very specific, you won't need to worry about most of them. Currently, there are a few frameworks that are really popular among the developers, such as React, Vue.js, Angular, Ember, and so on.

These frameworks are really popular because they get you up and running with your application in almost no time, followed by excellent support from the huge community of developers who use these frameworks. These frameworks also come with their own build tools, which will save you the trouble of setting up your own development environment.

React

In this chapter, we are going to learn the basics of building web applications with React. React is built and is widely used by Facebook. Many other famous applications, such as Instagram, Airbnb, Uber, Pinterest, Periscope, and so on, also use React in their web applications, which has helped to develop React into a mature and battle-tested JavaScript library. At the time of writing this book, React is the most popular frontend JavaScript framework in GitHub with an active community of over 70,000 developers.

Unlike most of the other JavaScript frameworks, React does not consider itself a framework but as a library for building user interfaces. It perfectly handles the view layer of your application by composing each section of your app into smaller functional components.

Functions are simple JavaScript code that perform a task. We have been using functions since the very beginning of this book. React uses the concept of functions to build each component of the web app. For example, look at the following element:

<h1 class="hello">Hello World!</h1>

Say you want to replace the word world with a dynamic variable, for example, someone's name. React achieves this by converting the element into a result of a function:

const hello = (name) => React.createElement("h1", { className: "hello"}, "Hello ", name, "!")

Now, the function hello contains the required elements as its result. If you try, hello('Rahul'), you will get the following:

<h1 class="hello">Hello Rahul!</h1>

But wait! What is that React.createElement() method? Forgot to tell you. That is how React creates HTML elements. But applying that to building applications is impossible for us! Imagine how many of those you will have to type in order to create an application with lots of DOM elements.

For this purpose, React introduced JavaScript inside XML (JSX). It is the process of writing an XML-styled markup inside JavaScript, which gets compiled to the React.createElement() method by React to cut a long story short, you can also write the hello function as follows:

const hello = (name) => <h1 className="hello">Hello {name}!</h1>

This will make more sense because we are simply writing HTML inside the return statement of JavaScript. What's cool about this is the content of the element depends directly on the parameter of the function. You need to note a few things while working with JSX:

• The attributes of JSX elements cannot contain JavaScript keywords. See that the class attribute is replaced with className because a class is a reserved keyword in JavaScript. Similarly, for attribute, it becomes htmlFor.
• To include variables or expressions inside JSX, you should wrap them inside curly braces {}. It is similar to ${} we use in template strings.
• JSX requires the Babel React preset to get compiled to JavaScript.
• All the HTML elements in JSX should only use small case letters.
  • For example: <p></p>, <div></div>, and <a></a>.
• Having capital letters for HTML is invalid.
  • For example: <Div></Div> and <Input></Input> are all invalid.
• The custom components we created should start with capital letters.
  • For example: consider the hello function that we created before, which is a stateless React component. To include it in JSX, you should name it as Hello and include it as <Hello></Hello>.

The preceding function is a simple stateless React component. A stateless React component outputs elements directly depending on the variables supplied as parameters to the function. Its output does not depend on any other factors.

Detailed information on JSX can be found at: https://facebook.github.io/react/docs/jsx-in-depth.html.

This representati...

Table of contents

• Title Page
• Copyright
• Credits
• About the Author
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Dedication
• Preface
• Building a ToDo List
• Building a Meme Creator
• Event Registration App
• Real-Time Video Call App with WebRTC
• Developing a Weather Widget
• Building a Blog with React
• Redux