Book Image

Modern JavaScript Applications

By : Narayan Prusty
Book Image

Modern JavaScript Applications

By: Narayan Prusty

Overview of this book

Over the years, JavaScript has become vital to the development of a wide range of applications with different architectures. But JS moves lightning fast, and it’s easy to fall behind. Modern JavaScript Applications is designed to get you exploring the latest features of JavaScript and how they can be applied to develop high-quality applications with different architectures. Begin by creating a single page application that builds on the innovative MVC approach using AngularJS, then move forward to develop an enterprise-level application with the microservices architecture using Node to build web services. After that, shift your focus to network programming concepts as you build a real-time web application with websockets. Learn to build responsive, declarative UIs with React and Bootstrap, and see how the performance of web applications can be enhanced using Functional Reactive Programming (FRP). Along the way, explore how the power of JavaScript can be increased multi-fold with high performance techniques. By the end of the book, you’ll be a skilled JavaScript developer with a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

Related Content you might be interested in

Current Title:

Small book image
Modern JavaScript Applications
Narayan Prusty
Jul, 2016 | 330 pages
No titles found
Table of Contents (21 chapters)
Modern JavaScript Applications
Modern JavaScript Applications
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Breaking into Microservices Architecture
Breaking into Microservices Architecture
What is monolithic architecture?
Microservices architecture to the rescue
Implementing microservices using Seneca
Summary
2
Building a Coupon Site
Building a Coupon Site
Getting started
Architecture of our site
Creating the services
Creating the image upload server
Creating the monolithic core
Website walkthrough
Further improvements to the site
Summary
3
Communication between Browsers in Real Time
Communication between Browsers in Real Time
Terminologies
Introduction to WebRTC
WebRTC applications using PeerJS
Miscellaneous
Summary
4
Building a Chatroulette
Building a Chatroulette
Creating your own PeerServer
Creating a chatroulette
Summary
5
Bidirectional Communication in Real Time
Bidirectional Communication in Real Time
Introducing WebSocket
Introduction to Socket.IO
Summary
6
Building a Live Score Site
Building a Live Score Site
Building the backend
Building the frontend
Testing the website
Summary
7
Functional Reactive Programming
Functional Reactive Programming
Introduction to reactive programming
Functional programming in a nutshell
Getting started with FRP
FRP using Bacon.js
Summary
8
Building an Advanced Profile Search Widget
Building an Advanced Profile Search Widget
Errors in Bacon.js
Handling exceptions
Constant properties
An overview of buses
Subscribing to the end of EventStreams and properties
Unplugging subscribers
Combining and zipping
Lazy evaluation
Building the profile search widget
Summary
9
New Features of Bootstrap 4
New Features of Bootstrap 4
Downloading Bootstrap 4
Browser and device support
Understanding the rem and em CSS units
The grid system
Global margin reset
Spacing utility classes
Display headings
Inverse tables
The card component
Outline buttons
Moving from Less to Sass
Text alignment and float utility classes
Reboot
Flexbox support
JavaScript improvements
Adding Tether
The 21:9 aspect ratio class
Customizing Bootstrap 4
Glyphicons dropped
Summary
10
Building User Interfaces Using React
Building User Interfaces Using React
Introducing React
Getting started with JSX
Digging into components
Reconciliation
Default component property values
Component life cycle methods
Mixins
Using Refs
ReactDOMServer.renderToStaticMarkup
Summary
11
Building an RSS Reader Using React and Flux
Building an RSS Reader Using React and Flux
Understanding Flux
Using Flux.js
Using MicroEvent.js
Introduction to React Router
Creating the RSS feed reader
Summary
12
New Features of Angular 2
New Features of Angular 2
The Angular 2 architecture
Introducing web components
Setting up an Angular 2 project
Angular 2 fundamentals
Styling components and shadow DOM
Angular 2 change detection
Understanding view children and content children
Component lifecycle methods
Writing templates
Outputs
Understanding providers
The difference between providers and the viewProviders property
Summary
13
Building a Search Engine Template Using AngularJS 2
Building a Search Engine Template Using AngularJS 2
Setting up the project
Configuring routes and bootstrapping the app
Generating random search results
Creating route components
Testing the template
Routing life cycle methods
Production mode versus development mode
Summary
14
Securing and Scaling Node.js Applications
Securing and Scaling Node.js Applications
Common vulnerabilities in applications
Non-vulnerability based attacks
Using secure packages
Scaling Node.js servers
Summary
Index
Index

Setting up the project

Follow these steps to set up your project:

  1. In the exercise files of this chapter, you will find two directories, initial and final. The final directory contains the final search engine template whereas the initial directory contains the files to quickly get started with building the search engine template.

  2. In the initial directory, you will find app.js and package.json. In the package.json file, place this code:

    {
  "name": "SearchEngine-Template",
  "dependencies": {
    "express": "4.13.3",
    "chance": "1.0.3"    
  }
}

    Here, we are listing Express.js and Chance.js as dependencies. Express will be used to build the web server whereas Chance.js will be used to generate random textual data to populate the template's search results.

  3. Now, run npm install inside the initial directory to download the packages.

    Inside the initial directory, you will find a directory named public, inside which all the static assets will be placed. Inside the public directory, you will find the...

Previous Section
End of Section 2
Next Section