JavaScript: Moving to ES2015

JavaScript: Moving to ES2015

by Ved Antani, Simon Timms, Narayan Prusty
Released March 2017
Publisher(s): Packt Publishing
ISBN: 9781787125919

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Explore and master modern JavaScript techniques with ES2015 in order to build large-scale web applications

About This Book

  • This course offers an expert's eye on the latest ES6 features and how these advanced tasks fit together in JavaScript as a whole

  • Discover robust JavaScript implementations of classic and advanced design patterns

  • Learn about modern web architectures and build real-world apps on top of them

    • Who This Book Is For

    This course is for experienced developers familiar with other object-oriented languages who wants to learn new capabilities of ES-2015 to improve their web development skills and build professional-quality web applications. This also goes for those who want to explore some modern JavaScript features, techniques, and architectures in order to develop cutting-edge web applications.

    What You Will Learn

  • Get a run through of the basic language constructs, Functions, and Closures of JavaScript

  • Code using the powerful object-oriented feature in JavaScript

  • Master DOM manipulation, cross-browser strategies, and ES6

  • Harness the power of patterns for tasks ranging from application building to code testing

  • Identify the best use cases for microservices

  • Gain expertise in responsive and dynamic website design

  • Enable real-time communications between client-client and client-server/server-client

  • Write complete applications using functional reactive programming

    • In Detail

    JavaScript is a high-level, dynamic, untyped, lightweight, and interpreted programming language. Mastering modern JavaScript techniques and the toolchain are essential to develop web-scale applications. This Learning Path will upgrade your skills to ES2015, and you will get to introduce yourself to popular frameworks like React and Angular 2.

    In the first module, you will get familiar with the language constructs and how to make code easy to organize. You will gain a concrete understanding of variable scoping, loops, and best practices on using types and data structures, as well as the coding style and recommended code organization patterns in JavaScript. By the end of the module, you will understand how reactive JavaScript is going to be the new paradigm.

    Over the course of the next module, you will explore how design patterns can help you improve and organize your JavaScript code. You’ll get to grips with creational, structural, and behavioral patterns and get a deeper look at patterns used in functional programming, as well as model view patterns and patterns to build web applications. By the end of the module, you'll be saved of a lot of trial and error and developmental headaches, and you will be on the road to becoming a JavaScript expert.

    In the last leg of this course, you will shift your focus to network programming concepts as you build a real-time web application with websockets. Along the way, you’ll explore how the power of JavaScript can be increased multi-fold with high performance techniques. By the end of this module, you’ll be a skilled JavaScript developer with a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

    This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • Mastering JavaScript by Ved Antani

  • Mastering JavaScript Design Patterns, Second Edition by Simon Timms

  • Modern JavaScript Applications by Narayan Prusty

    • Style and approach

    This course is a comprehensive guide with a clear focus on practical use cases and patterns. Each chapter consists of best practices, useful advice, and a bunch of easy-to-follow examples that will build up your skills as you advance.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of contents

    1. JavaScript: Moving to ES2015
      1. Table of Contents
      2. JavaScript: Moving to ES2015
      3. JavaScript: Moving to ES2015
      4. Credits
      5. Preface
        1. What this learning path covers
        2. What you need for this learning path
        3. Who this learning path is for
        4. Reader feedback
        5. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      6. 1. Module 1
        1. 1. JavaScript Primer
          1. A little bit of history
          2. How to use this module
          3. Hello World
            1. An overview of JavaScript
              1. Comments
              2. Variables
              3. Constants
              4. Number
              5. String
              6. Undefined values
              7. Booleans
              8. The instanceof operator
              9. Date objects
              10. The + operator
              11. The ++ and -- operators
              12. Boolean operators
              13. Equality
                1. Strict equality using ===
                2. Weak equality using ==
            2. JavaScript types
            3. Automatic semicolon insertion
            4. JavaScript style guide
              1. Whitespaces
              2. Parentheses, line breaks, and braces
              3. Quotes
              4. End of lines and empty lines
              5. Type checking
              6. Type casting
              7. Conditional evaluation
              8. Naming
              9. The eval() method is evil
              10. The strict mode
                1. Enabling the strict mode for an existing code can break it
                2. Package with care
                3. Variables must be declared in strict mode
                  1. The eval() function is cleaner in strict mode
                4. Features that are blocked in strict mode
              11. Running JSHint
          4. Summary
        2. 2. Functions, Closures, and Modules
          1. A function literal
            1. A function declaration
          2. Functions as data
          3. Scoping
            1. Global scope
            2. Local scope
            3. Function-level scope versus block-level scope
            4. Inline function expressions
            5. Block scopes
          4. Function declarations versus function expressions
          5. The arguments parameter
            1. The this parameter
              1. Invocation as a function
              2. Invocation as a method
              3. Invocation as a constructor
              4. Invocation using apply() and call() methods
          6. Anonymous functions
            1. Anonymous functions while creating an object
            2. Anonymous functions while creating a list
            3. Anonymous functions as a parameter to another function
            4. Anonymous functions in conditional logic
          7. Closures
          8. Timers and callbacks
          9. Private variables
          10. Loops and closures
          11. Modules
            1. Stylistic considerations
          12. Summary
        3. 3. Data Structures and Manipulation
          1. Regular expressions
          2. Exact match
          3. Match from a class of characters
          4. Repeated occurrences
            1. Alternatives – OR
          5. Beginning and end
          6. Backreferences
          7. Greedy and lazy quantifiers
          8. Arrays
          9. Maps
          10. Sets
          11. A matter of style
          12. Summary
        4. 4. Object-Oriented JavaScript
          1. Understanding objects
            1. Behavior of JavaScript objects
            2. Prototypes
          2. Instance properties versus prototype properties
          3. Inheritance
          4. Getters and setters
          5. Summary
        5. 5. JavaScript Patterns
          1. Design patterns
          2. The namespace pattern
          3. The module pattern
            1. ES6 modules
          4. The factory pattern
          5. The mixin pattern
          6. The decorator pattern
          7. The observer pattern
          8. JavaScript Model-View-* patterns
            1. Model-View-Controller
            2. Models
            3. Views
            4. Controllers
          9. The Model-View-Presenter pattern
          10. Model-View-ViewModel
          11. Summary
        6. 6. Testing and Debugging
          1. Unit testing
            1. Test-driven development
            2. Behavior-driven development
          2. JavaScript debugging
            1. Syntax errors
            2. Using strict
            3. Runtime exceptions
              1. Console.log and asserts
              2. Chrome DevTools
          3. Summary
        7. 7. ECMAScript 6
          1. Shims or polyfills
          2. Transpilers
          3. ES6 syntax changes
            1. Block scoping
            2. Default parameters
            3. Spread and rest
            4. Destructuring
            5. Object literals
            6. Template literals
            7. Maps and Sets
            8. Symbols
            9. Iterators
            10. For..of loops
            11. Arrow functions
          4. Summary
        8. 8. DOM Manipulation and Events
          1. DOM
            1. Accessing DOM elements
            2. Accessing specific nodes
          2. Chaining
          3. Traversal and manipulation
          4. Working with browser events
          5. Propagation
          6. jQuery event handling and propagation
          7. Event delegation
          8. The event object
          9. Summary
        9. 9. Server-Side JavaScript
          1. An asynchronous evented-model in a browser
          2. Callbacks
          3. Timers
          4. EventEmitters
          5. Modules
            1. Creating modules
          6. npm
            1. Installing packages
          7. JavaScript performance
            1. JavaScript profiling
              1. The CPU profile
              2. The Timeline view
          8. Summary
      7. 2. Module 2
        1. 1. Designing for Fun and Profit
          1. The road to JavaScript
            1. The early days
            2. A pause
            3. The way of GMail
            4. JavaScript everywhere
          2. What is a design pattern?
          3. Anti-patterns
          4. Summary
        2. 1. Classical Design Patterns
        3. 2. Organizing Code
          1. Chunks of code
          2. What's the matter with global scope anyway?
          3. Objects in JavaScript
          4. Build me a prototype
          5. Inheritance
          6. Modules
          7. ECMAScript 2015 classes and modules
          8. Best practices and troubleshooting
          9. Summary
        4. 3. Creational Patterns
          1. Abstract factory
            1. Implementation
          2. Builder
            1. Implementation
          3. Factory method
            1. Implementation
          4. Singleton
            1. Implementation
            2. Disadvantages
          5. Prototype
            1. Implementation
          6. Tips and tricks
          7. Summary
        5. 4. Structural Patterns
          1. Adapter
            1. Implementation
          2. Bridge
            1. Implementation
          3. Composite
            1. Example
            2. Implementation
          4. Decorator
            1. Implementation
          5. Façade
            1. Implementation
          6. Flyweight
            1. Implementation
          7. Proxy
            1. Implementation
          8. Hints and tips
          9. Summary
        6. 5. Behavioral Patterns
          1. Chain of responsibility
            1. Implementation
          2. Command
            1. Command message
            2. Invoker
            3. Receiver
          3. Interpreter
            1. Example
            2. Implementation
          4. Iterator
            1. Implementation
            2. ECMAScript 2015 iterators
          5. Mediator
            1. Implementation
          6. Memento
            1. Implementation
          7. Observer
            1. Implementation
          8. State
            1. Implementation
          9. Strategy
            1. Implementation
          10. Template method
            1. Implementation
          11. Visitor
          12. Hints and tips
          13. Summary
          14. 2. Other Patterns
        7. 6. Functional Programming
          1. Functional functions are side-effect-free
          2. Function passing
            1. Implementation
          3. Filters and pipes
            1. Implementation
          4. Accumulators
            1. Implementation
          5. Memoization
            1. Implementation
          6. Immutability
          7. Lazy instantiation
            1. Implementation
          8. Hints and tips
          9. Summary
        8. 7. Reactive Programming
          1. Application state changes
          2. Streams
          3. Filtering streams
          4. Merging streams
          5. Streams for multiplexing
          6. Hints and tips
          7. Summary
        9. 8. Application Patterns
          1. First, some history
          2. Model View Controller
            1. MVC code
          3. Model View Presenter
            1. MVP code
          4. Model View ViewModel
            1. MVVM code
            2. A better way to transfer changes between the model and the view
            3. Observing view changes
          5. Tips and tricks
          6. Summary
        10. 9. Web Patterns
          1. Sending JavaScript
            1. Combining files
            2. Minification
            3. Content Delivery Networks
          2. Plugins
            1. jQuery
            2. d3
          3. Doing two things at once – multithreading
          4. Circuit breaker pattern
            1. Back-off
            2. Degraded application behavior
          5. Promise pattern
          6. Hints and tips
          7. Summary
        11. 10. Messaging Patterns
          1. What's a message anyway?
            1. Commands
            2. Events
          2. Request-reply
          3. Publish-subscribe
            1. Fan out and in
          4. Dead letter queues
            1. Message replay
            2. Pipes and filters
            3. Versioning messages
          5. Hints and tips
          6. Summary
        12. 11. Microservices
          1. Façade
          2. Service selector
          3. Aggregate services
          4. Pipeline
          5. Message upgrader
          6. Failure patterns
            1. Service degradation
            2. Message storage
            3. Message replay
            4. Indempotence of message handling
          7. Hints and tips
          8. Summary
        13. 12. Patterns for Testing
          1. The testing pyramid
          2. Testing in the small with unit tests
          3. Arrange-Act-Assert
            1. Assert
          4. Fake objects
          5. Test spies
          6. Stubs
          7. Mock
          8. Monkey patching
          9. Interacting with the user interface
            1. Browser testing
            2. Faking the DOM
            3. Wrapping the manipulation
          10. Tips and tricks
          11. Summary
        14. 13. Advanced Patterns
          1. Dependency injection
          2. Live post processing
          3. Aspect oriented programming
          4. Mixins
          5. Macros
          6. Tips and tricks
          7. Summary
        15. 14. ECMAScript-2015/2016 Solutions Today
          1. TypeScript
            1. Decorators
            2. Async/Await
            3. Typing
          2. BabelJS
            1. Classes
            2. Default parameters
            3. Template literals
            4. Block bindings with let
            5. In production
          3. Tips and tricks
          4. Summary
      8. 3. Module 3
        1. 1. Breaking into Microservices Architecture
          1. What is monolithic architecture?
            1. Demerits of monolithic architecture
              1. Scaling monolithic architecture
              2. Writing monolithic server-side applications
              3. Other issues of monolithic architecture
          2. Microservices architecture to the rescue
            1. Merits of microservices architecture
            2. Scaling services
            3. Demerits of microservices architecture
            4. When to use microservices architecture
            5. Data management
          3. Implementing microservices using Seneca
            1. Creating your first Seneca application
              1. Creating actions
              2. Creating plugins
              3. Creating services
              4. Storing data
              5. Integrating Express and Seneca
          4. Summary
        2. 2. Building a Coupon Site
          1. Getting started
          2. Architecture of our site
          3. Creating the services
            1. Database service
            2. URL config service
            3. Upload service
          4. Creating the image upload server
          5. Creating the monolithic core
          6. Website walkthrough
          7. Further improvements to the site
          8. Summary
        3. 3. Communication between Browsers in Real Time
          1. Terminologies
            1. Stream
            2. Peer-to-peer network model
            3. Real-time data
          2. Introduction to WebRTC
            1. MediaStream API
            2. navigator.getUserMedia
            3. RTCPeerConnection API
              1. Establishing peer-to-peer connection
              2. Transferring MediaStream
            4. RTCDataChannel API
          3. WebRTC applications using PeerJS
            1. PeerServer
            2. PeerJS API
          4. Miscellaneous
          5. Summary
        4. 4. Building a Chatroulette
          1. Creating your own PeerServer
            1. Run PeerServer from shell
            2. Using PeerServer library
              1. Creating custom PeerServer
              2. Integrating PeerServer with the Express server
          2. Creating a chatroulette
            1. Building the backend
            2. Building the frontend
              1. Testing the website
          3. Summary
        5. 5. Bidirectional Communication in Real Time
          1. Introducing WebSocket
            1. The relationship between WebSocket and HTTP
            2. Sending and receiving data on a WebSocket connection
            3. WebSocket schemes
            4. The interaction of WebSocket with proxy servers, load balancers, and firewalls
            5. The same-origin policy for WebSocket
          2. Introduction to Socket.IO
            1. Setting up your project
            2. Diving into the Socket.IO API
              1. Restricting connections based on origin
              2. Namespaces in Socket.IO
                1. Referring to all connected Socket.IO clients
              3. Rooms in Socket.IO
                1. Joining and leaving a room
                2. Referring to all connected Socket.IO clients in a room
              4. Broadcasting messages and custom events to namespaces and rooms
                1. Broadcasting to a namespace
                2. Broadcasting to a room
              5. Middleware in Socket.IO
              6. Disconnecting manually
          3. Summary
        6. 6. Building a Live Score Site
          1. Building the backend
            1. Integrating socket.io server with the Express server
            2. Serving static files and HTML to the users
            3. Serving HTML to the administrator and protecting the admin panel
            4. Socket.IO cookie authentication and broadcasting messages to a namespace
          2. Building the frontend
          3. Testing the website
          4. Summary
        7. 7. Functional Reactive Programming
          1. Introduction to reactive programming
            1. Problems with writing reactive code
          2. Functional programming in a nutshell
            1. The advantages of immutable data
            2. Functional data structures
            3. The advantages of pure functions
            4. Functional programming with JavaScript
            5. Functional programming helper functions
          3. Getting started with FRP
            1. EventStreams
            2. Properties
          4. FRP using Bacon.js
            1. Setting up the project
            2. Bacon.js APIs
              1. Creating EventStreams
              2. Creating properties
              3. Merging, filtering, and transforming EventStreams and properties
                1. Merging
                2. Filtering
                3. Transforming
          5. Summary
        8. 8. Building an Advanced Profile Search Widget
          1. Errors in Bacon.js
            1. Subscribing to errors
            2. Mapping errors
            3. Retrying a function call
            4. Ending an EventStream or property on error
          2. Handling exceptions
          3. Constant properties
          4. An overview of buses
          5. Subscribing to the end of EventStreams and properties
          6. Unplugging subscribers
          7. Combining and zipping
          8. Lazy evaluation
            1. Type 1
            2. Type 2
          9. Building the profile search widget
            1. Understanding project directories and files
            2. Converting Express.js routes to a functional reactive pattern
            3. Making the user experience better
            4. The company suggestions route
            5. The search result route
            6. Building the frontend
            7. Testing the widget
          10. Summary
        9. 9. New Features of Bootstrap 4
          1. Downloading Bootstrap 4
          2. Browser and device support
          3. Understanding the rem and em CSS units
          4. The grid system
          5. Global margin reset
          6. Spacing utility classes
          7. Display headings
          8. Inverse tables
          9. The card component
            1. Card groups, decks, and columns
          10. Outline buttons
          11. Moving from Less to Sass
          12. Text alignment and float utility classes
          13. Reboot
          14. Flexbox support
          15. JavaScript improvements
          16. Adding Tether
          17. The 21:9 aspect ratio class
          18. Customizing Bootstrap 4
          19. Glyphicons dropped
          20. Summary
        10. 10. Building User Interfaces Using React
          1. Introducing React
            1. Setting up a basic React project
            2. Virtual DOM
            3. Components
            4. One-way data binding
            5. Isomorphic UI development
          2. Getting started with JSX
            1. Compiling JSX
            2. JSX syntax
          3. Digging into components
            1. Component composition
            2. Component ownership
          4. Reconciliation
          5. Default component property values
          6. Component life cycle methods
            1. componentWillMount()
            2. componentDidMount()
            3. componentWillReceiveProps(nextProps)
            4. shouldComponentUpdate(nextProps, nextState)
            5. componentWillUpdate(nextProps, nextState)
            6. componentDidUpdate(prevProps, prevState)
            7. componentWillUnmount()
          7. Mixins
          8. Using Refs
          9. ReactDOMServer.renderToStaticMarkup
          10. Summary
        11. 11. Building an RSS Reader Using React and Flux
          1. Understanding Flux
          2. Using Flux.js
          3. Using MicroEvent.js
          4. Introduction to React Router
          5. Creating the RSS feed reader
            1. Setting up the project directories and files
            2. Building the backend
            3. Building the frontend
              1. Defining routes
              2. Creating dispatcher, actions, and stores
            4. Testing the application
          6. Summary
        12. 12. New Features of Angular 2
          1. The Angular 2 architecture
          2. Introducing web components
            1. Templates
            2. Custom elements
            3. Shadow DOM
          3. Setting up an Angular 2 project
          4. Angular 2 fundamentals
          5. Styling components and shadow DOM
          6. Angular 2 change detection
          7. Understanding view children and content children
            1. Getting the reference of components of content children and view children
            2. Local template variables
          8. Component lifecycle methods
          9. Writing templates
            1. Rendering a value
              1. Pipes
            2. Handling events
            3. Binding state to element attributes
            4. Two-way data binding
            5. Directives
              1. Attribute directives
              2. Structural directives
          10. Outputs
            1. Two-way data binding with inputs and outputs
          11. Understanding providers
          12. The difference between providers and the viewProviders property
          13. Summary
        13. 13. Building a Search Engine Template Using AngularJS 2
          1. Setting up the project
          2. Configuring routes and bootstrapping the app
          3. Generating random search results
          4. Creating route components
          5. Testing the template
          6. Routing life cycle methods
          7. Production mode versus development mode
          8. Summary
        14. 14. Securing and Scaling Node.js Applications
          1. Common vulnerabilities in applications
            1. Helmet
            2. Cross-site request forgery
            3. Cross-site scripting
            4. Session fixation
          2. Non-vulnerability based attacks
            1. Denial-of-service attacks
            2. Brute force attacks
          3. Using secure packages
          4. Scaling Node.js servers
          5. Summary
      9. Bibliography
      10. Index

    Product information

    • Title: JavaScript: Moving to ES2015
    • Author(s): Ved Antani, Simon Timms, Narayan Prusty
    • Release date: March 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781787125919