JavaScript by example : modern JavaScript programming with real world web apps / Dani Akash S.

Format:

Book

Author/Creator:

S, Dani Akash, author.

Language:

English

Subjects (All):

JavaScript (Computer program language).

Physical Description:

1 online resource (289 pages)

Edition:

1st edition

Other Title:

Modern JavaScript programming with real world web apps

Place of Publication:

Birmingham, [England] ; Mumbai, [India] : Packt Publishing, 2017.

System Details:

Mode of access: World Wide Web.

text file

Biography/History:

Akash S Dani: Dani Akash S is a passionate, self-taught application developer who loves working on the JavaScript stack. He has worked on many JavaScript frameworks, such as React. js, React Native, Angular, Vue, Express, and Sails. He has built many web and mobile applications. In his free time, he loves to explore new technologies and contribute to open source projects on GitHub. You can find him on his Twitter handle: @DaniAkashS

Summary:

A project based guide to help you get started with web development by building real-world and modern web applications About 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 For The 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 process In Detail JavaScript 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 application...

Contents:

Cover

Title Page

Copyright

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Dedication

Table of Contents

Preface

Chapter 1: Building a ToDo List

System requirements

Text editor

Node.js

For Windows users

For Linux users

For Mac users

Google Chrome

ToDo List app

Chrome DevTools

Getting started with ES6

Arrow functions

let, var, and const

Loading the tasks from data

Template literals

Managing task status

Adding new tasks to the list

Adding tasks by hitting Enter button

Persisting data in the browser

Compatibility with older browsers

Node.js and npm

Setting up our development environment with Node and Babel

Shipping the code

Summary

Chapter 2: Building a Meme Creator

Initial project setup

Responsive designing with flexbox

Flexbox - a quick introduction

Designing the Meme Creator

Navigation bar

Content area

Webpack module bundler

Modules in JavaScript

Bundling modules in Webpack

Loaders in Webpack

Bundling Bootstrap in Webpack

Plugins in Webpack

Webpack dev server

Optimizing Webpack builds for different environments

Creating .env file in Windows

UglifyJsPlugin

PurifyCSSPlugin

ExtractTextPlugin

Cache busting

Clean dist folder before generating a new build

Source maps in production

Building the Meme Creator

Event handling

Rendering an image in the canvas

Reading a file using JavaScript

Rendering text on the canvas

Making a canvas responsive to show large images

Chapter 3: Event Registration App

Event - JS meetup

Adding styles to the page

Validating and submitting the form using JavaScript

HTML forms

Reading form data in JavaScript

Form validation module.

Working with regular expressions in JavaScript

Submitting the form using&amp

#160

AJAX

Making network requests in JavaScript

What is a Promise?

Creating the API call module

Constructing the request details

Other network request methods

Back to the form

Adding charts to the website using Chart.js

Adding charts to the canvas elements

Setting up tab sections

Adding Google Maps to the web page

Adding Google Maps with a marker

Generating a production build

Chapter 4: Real-Time Video Call App with WebRTC

Introduction to WebRTC

History of WebRTC

JavaScript WebAPIs

JavaScript WebRTC API

MediaStream

Using Adapter.js library

RTCPeerConnection and&amp

RTCDataChannel

Building the Video Call application

Building the Video Call app

Creating a room

Adding participants to your room

Click to copy text

Joining a room

Setters and getters

Adding and removing videos

Selecting a video

Video Call in action

Chapter 5: Developing a Weather Widget

Can you build a Weather Widget?

Introduction to web components

HTML templates

HTML imports

Building the Weather Widget

Working of the Weather Widget

Retrieving the geolocation

Creating the weather custom element

Testing the custom element

Attaching a shadow DOM

Working with the custom element

Adding dependency modules

Retrieving and displaying weather information

Adding the current time to the widget

Responding to changes in element attributes

Using setters and getters

Fixing browser compatibility

Essential things to know

Chapter 6: Building a Blog with React

Why use a framework?

Selecting a framework

React

Immutable state

Props.

Building the Counter

The React crash course

Adding and managing states

Managing the state for the input field

Managing the state for the tasks

Adding new tasks

Preventing mutations using the spread syntax

Advantages of using React

Performance

Maintainability

Size

Building a blog with React

Creating the navigation bar

Implementing routing and navigation using React Router

The routes file

Adding routes in the app component

Managing history using withRouter

Proptype validation

Seamless navigation with NavLink

Blog home page

Using child components

Displaying post details

Adding a new blog post

Submitting the post

Generating production builds

Chapter 7: Redux

What is Redux?

Flux

Introduction to Redux

Store

Actions

Reducers

Implementing Redux in the blog

The folder structure

Initial state

Action types

Get all posts

Adding a new post

The Root Reducer

Connecting Redux with React components

The App component

Home component

Post component

The NewPost component

The Redux data flow

Persisting Redux store

Index.

Notes:

Includes index.

Includes bibliographical references and index.

Description based on online resource; title from PDF title page (ebrary, viewed September 25, 2017).

OCLC:

1004746802