Chapter 5. Instrumenting a better web app through modules
This chapter covers
- ES2015 modules as an alternative to <script> tags in your HTML
- Creating self-reliant Web Components
- Using a Web Component to contain your entire application
- Scope management for callbacks with the ES2015 fat-arrow feature
So far in exercises throughout this book, we’ve been putting our classes and component definitions inside the <head> tag in our main HTML page. Typically, you’d never want to do this on a real project and might want to be a bit more organized with a <script> tag pointing to a JS file for each component you have. At first glance, this is perfectly fine. If your project uses Web Components only in a limited way, this works! CSS is similar—each component can have its own CSS file as well, which can be linked from the main page. With many components to manage in your project, however, this could get a little out of hand. In this chapter, let’s explore ES2015 modules for a better way.
To explain why linking to multiple JS/CSS files in our main HTML page can be problematic, let’s revisit our Web Component from chapter 2. If you recall, this component was a photo carousel that allowed us to set a list of photos to navigate through as well as some metadata for display, such as title and author, as figure 5.1 shows.
Figure 5.1. Revisiting the photo carousel component from chapter 2
;%22/%3E%3C/svg%3E)