Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Modern JavaScript Applications
  • Table Of Contents Toc
Modern JavaScript Applications

Modern JavaScript Applications

By : Narayan Prusty
5 (1)
Buy this Book
close
close
Modern JavaScript Applications

Modern JavaScript Applications

5 (1)
By: Narayan Prusty
Buy this Book

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

Using Refs

Refs are used inside components to return references to real DOM elements rendered by React. So, instead of assigning an id or class value to elements, we can assign refs. It's easier to get references to real DOM elements using refs than id or class attributes.

Let's look at a basic example of how to use refs by creating a form. First, create a container element and place it inside the body tag. Here is the code:

<div id="container9"></div>

Here is the code for the form, which uses refs:

var FormComponent = React.createClass({
  clicked: function(){
    console.log(this.refs.myInput.value);
  },
  render: function(){
    return (
      <div>
        <input type="text" placeholder="Write Something" ref="myInput" />
        <input type="button" value="Click to Submit" onClick={this.clicked} />
      </div>

    )
  }
})

ReactDOM.render(<FormComponent />, document.getElementById...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Modern JavaScript Applications
End of Section 10
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon