8. Modular Programming
by Tom Bray, Ethan Holmes, Ryan Vice, Adam Horton, Narayan Prusty, Artemij Fedoseje
React: Building Modern Web Applications
- React: Building Modern Web Applications
- Table of Contents
- React: Building Modern Web Applications
- Meet Your Course Guide
- Course Structure
- Course journey
- The Course Roadmap and Timeline
- 1. Course Module 1: Reactive Programming with JavaScript
- 1. Introduction and Installation
- 2. Core JavaScript
- 3. Reactive Programming – The Basic Theory
- 4. Demonstrating Nonfunctional Reactive Programming – A Live Example
- 5. Learning Functional Programming – The Basics
- 6. Functional Reactive Programming – The Basics
- 7. Not Reinventing the Wheel – Tools for Functional Reactive Programming
- 8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
- 9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
- 10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar
- Play it again Sam – an interesting challenge
- Classical Hijaxing works well
- Built with usability in mind, but there's still room to grow
- Plain old JavaScript objects are all you need
- Progressive disclosure that starts simply
- A render() method can easily delegate
- Boring code is better than interesting code!
- A simple UI for simply non-recurring entries...
- The user can still opt-in for more
- Avoiding being clever
- Anonymous helper functions may lack pixie dust
- How far in the future should we show?
- Different stripes for different entry types
- Now we're ready to display!
- Let's be nice and sort each day in order
- Let them use Markdown!
- One thing at a time!
- The holidays that inspired this calendar
- 11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
- 12. How It All Fits Together
- 2. Course Module 2: React.js Essentials
- 1. Installing Powerful Tools for Your Project
- 2. Create Your First React Element
- 3. Create Your First React Component
- 4. Make Your React Components Reactive
- 5. Use Your React Components with Another Library
- 6. Update Your React Components
- 7. Build Complex React Components
- 8. Test Your React Application with Jest
- 9. Supercharge Your React Architecture with Flux
- 10. Prepare Your React Application for Painless Maintenance with Flux
- Decoupling concerns with Flux
- Refactoring the Stream component
- Creating CollectionStore
- Creating CollectionActionCreators
- Refactoring the Application component
- Refactoring the Collection component
- Refactoring the CollectionControls component
- Refactoring the CollectionRenameForm component
- Refactoring the TweetList component
- Refactoring the StreamTweet component
- Build and go beyond
- 3. Course Module 3: Learning ECMAScript 6
- 1. Playing with Syntax
- 2. Knowing Your Library
- Working with numbers
- Doing Math
- Working with strings
- Arrays
- Collections
- Object
- 3. Using Iterators
- 4. Asynchronous Programming
- 5. Implementing the Reflect API
- The Reflect object
- The Reflect.apply(function, this, args) method
- The Reflect.construct(constructor, args, prototype) method
- The Reflect.defineProperty(object, property, descriptor) method
- The Reflect.deleteProperty(object, property) method
- The Reflect.enumerate(object) method
- The Reflect.get(object, property, this) method
- The Reflect.set(object, property, value, this) method
- The Reflect.getOwnPropertyDescriptor(object, property) method
- The Reflect.getPrototypeOf(object) method
- The Reflect.setPrototypeOf(object, prototype) method
- The Reflect.has(object, property) method
- The Reflect.isExtensible(object) method
- The Reflect.preventExtensions(object) method
- The Reflect.ownKeys(object) method
- The Reflect object
- 6. Using Proxies
- Proxies in a nutshell
- The Proxy API
- Traps
- The get(target, property, receiver) method
- The set(target, property, value, receiver) method
- The has(target, property) method
- The isExtensible(target) method
- The getPrototypeOf(target) method
- The setPrototypeOf(target, prototype) method
- The preventExtensions(target) method
- The getOwnPropertyDescriptor(target, property) method
- The defineProperty(target, property, descriptor) method
- The deleteProperty(target, property) method
- The enumerate(target) method
- The ownKeys(target) method
- The apply(target, thisValue, arguments) method
- The construct(target, arguments) method
- The Proxy.revocable(target, handler) method
- Traps
- The uses of proxies
- 7. Walking You Through Classes
- Understanding the Object-oriented JavaScript
- Using classes
- Defining a class
- The prototype methods
- The static methods
- Implementing inheritance in classes
- The computed method names
- The attributes of properties
- Classes are not hoisted!
- Overriding the result of the constructor method
- The "Symbol.species" static accessor property
- The "new.target" implicit parameter
- Using "super" in the object literals
- 8. Modular Programming
- 4. Course Module 4: Mastering React
- 1. Dynamic Components, Mixins, Forms, and More JSX
- Dynamic components
- Mixins
- Forms
- Controlled components - the read-only input
- Controlled components - the read and write input
- Controlled components – a simple form
- Validation
- Validation types
- The react-validation-mixin example
- Getting the code
- Running the code
- Getting the code
- 2. Anatomy of a React Application
- 3. Starting a React Application
- 4. React Blog App Part 1 – Actions and Common Components
- 5. React Blog App Part 2 – Users
- 6. React Blog App Part 3 – Posts
- 7. React Blog App Part 4 – Infinite Scroll and Search
- 8. Animation in React
- 5. Course Module 5: Getting Started with React Native
- Index
- 1. Dynamic Components, Mixins, Forms, and More JSX
Modular programming is one of the most important and frequently used software design techniques. Unfortunately, JavaScript didn't support modules natively that lead JavaScript programmers to use alternative techniques to achieve modular programming in JavaScript. But now, ES6 brings modules in to JavaScript officially.
This chapter is all about how to create and import JavaScript modules. In this chapter, we will first learn how the modules were created earlier, and then we will jump to the new built-in module system that was introduced in ES6, known as the ES6 modules.
In this chapter, we'll cover:
- What is modular programming?
- The benefits of modular programming
- The basics of IIFE modules, AMD, UMD, and CommonJS
- Creating and importing the ES6 modules
- The basics of the Modular Loader
- Creating a basic JavaScript library using modules
The practice of breaking down programs and libraries into modules is called modular programming.
In JavaScript, a module is a collection of related objects, functions, and other components of a program or library that are wrapped together and isolated from the scope of the rest of the program or library.
A module exports some variables to the outside program to let it access the components wrapped by the module. To use a module, a program needs to import the module and the variables exported by the module.
A module can also be split into further modules called as its submodules, thus creating a module hierarchy.
Modular programming has many benefits. Some benefits are:
- It keeps our code both cleanly separated and organized by splitting into multiple modules
- Modular programming leads to fewer global variables, that is, it eliminates the problem of global variables, because modules don't interface via the global scope, and each module has its own scope
- Makes code reusability easier as importing and using the same modules in different projects is easier
- It allows many programmers to collaborate on the same program or library, by making each programmer to work on a particular module with a particular functionality
- Bugs in an application can easily be easily identified as they are localized to a particular module
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.