Just like we did with our Vue version, let's now implement a SongsList component.
Frontend – creating and using the songs list component
by Alexis Georges, Sebastien Dubois
Learn TypeScript 3 by Building Web Applications
- Title Page
- Copyright and Credits
- Dedication
- About Packt
- Foreword
- Contributors
- Preface
- Introduction to TypeScript
- TypeScript in a few words
- JavaScript
- How can TypeScript help?
- What you'll need to install
- Installing VS Code
- Installing and configuring Git
- Downloading the book samples
- Installing Node.js and npm
- Updating npm
- Installing TypeScript
- Hello world with TypeScript
- Compiling manually using the TypeScript compiler
- Variables declaration
- Summary
- Further reading about ECMAScript
- Building TodoIt - Your Own Web Application with TypeScript
- What will you build?
- Creating the project using npm
- Introducing npm
- Adding TypeScript to the project
- Configuring the TypeScript compiler
- Creating the TodoIt application
- Opening the project in VS Code
- Defining the basic application structure
- Leveraging VS Code support for TypeScript
- Building from the Terminal
- Using Browsersync to refresh automatically
- Implementing the user interface
- Loading the TodoIt code and checking the browser console
- Creating the todo list with TypeScript arrays
- Getting hold of inputs and casting using the as operator
- Adding todo items to the list
- Listing existing todo items using lambda expressions
- Listing existing todo items using loops
- Filtering existing todo items using the ES2015 TypeScript support
- Removing a single todo item
- Debugging your code in the web browser
- Debugging your code in VS Code
- Generating source maps for easier debugging
- Summary
- Improving TodoIt with Classes and Interfaces
- About programming paradigms
- Basic OOP principles and nomenclature
- Bonus: UML
- JavaScript and OOP
- Overview of the TypeScript support for OOP
- TypeScript classes
- Fluent APIs
- Custom types
- TypeScript interfaces
- Starting point
- Designing the domain model of TodoIt v2
- Implementing the new domain model
- Implementing the view
- Implementing the controller layer
- Initializing TodoIt
- Isolating the utility function
- Updating the HTML page
- Job done, congratulations!
- Summary
- Leveraging Generics and Enums
- What will you build?
- Generics
- Enums
- The never keyword
- String literal types
- Union and intersection types
- Type guards
- Creating the project
- Designing the model
- Implementing the domain model
- Defining the media service interface
- Storing data on the client side
- Implementing the media service
- Library choice
- Introduction to the Promise API
- TypeScript type definitions (typings)
- Adding localForage to the project
- Service implementation
- Handling serialization/deserialization
- Installing class-transformer and reflect-metadata
- Adding class-transformer decorators to domain classes
- Implementing the saveMediaCollection method
- Implementing the loadMediaCollection method
- Implementing the getMediaCollectionIdentifiersList method
- Implementing the removeMediaCollection method
- Implementing the view
- Defining the view interface
- Implementing the HTMLMediaManView class
- The base structure
- Implementing basic validation using the HTML Form Validation API
- Why exceptions should not be used in this case
- Implementing the clearBookCollections method
- Implementing the displayErrorMessage method
- Implementing the renderBookCollection method
- Implementing the clearNewBookCollectionForm method
- Implementing the renderBook method
- Implementing the removeBookCollection method
- Implementing the getNewBookDetails method using keyof and typeof
- Bonus – the keyof operator
- Bonus – mapped types
- Implementing the clearNewBookForm method
- Implementing the removeBook method
- Creating the controller layer
- Initializing the application
- Summary
- Coding WorldExplorer to Explore the Population of the World
- Understanding modules
- Loading and bundling modules
- Exploring TypeScript modules
- Introducing module resolution
- What will you build?
- Bonus: REST, RESTful and web APIs
- World Bank Open Data APIs
- Understanding the Fetch API
- Using the unknown keyword
- Chaining promises
- Understanding async/await and generators
- Adding runtime type checks
- Creating the project
- Designing the model
- Implementing the domain model
- Implementing the population service
- High-level design
- Implementing the view layer
- HTML template
- Creating the view package
- Implementing the view model using a Data Transfer Object (DTO)
- Defining the view contract
- Installing Chart.js
- Creating the view implementation skeleton
- Implementing the displayCountries method
- Implementing the displayYears method
- Implementing getChartFormDetails and using the property shorthand notation
- Implementing the displayChart method
- Creating the view layer barrel
- Implementing the controller layer
- Creating the controllers package
- Defining the controller contract
- Creating the controller implementation skeleton
- Implementing the loadCountries method
- Implementing the loadYears method with generators
- Implementing the renderChart method
- Implementing the UnreachableCaseError class
- Creating the controller layer barrel
- Initializing our application
- Leveraging TypeScript path mappings
- Summary
- Further reading
- Introduction to Testing
- Introducing testing
- Testing the population service of WorldExplorer
- Summary
- Discovering Angular, Angular Material, and RxJS
- Learning about modern web applications
- Understanding TypeScript decorators
- Exploring Angular
- Learning the Angular application architecture
- Exploring core Angular concepts
- Modules
- Components
- Component templates and data bindings
- Component bindings, HTML attributes, and DOM properties
- Defining component inputs and outputs
- Smart versus dumb components
- Component life cycle hooks
- Routing
- Directives
- Pipes
- Change detection
- Services
- DI
- Learning about injectors and the singleton design pattern
- A brief note about the root application injector
- Angular's bootstrap process
- Angular workspaces and the angular.json file
- Angular testing support and coverage reports
- Angular testing utilities
- Bonus: Angular Console
- Bonus: Augury
- Introducing RP and RxJS
- Exploring Angular forms
- Introducing Material Design and Angular Material
- Summary
- Further reading
- Rewriting MediaMan Using Angular and Angular Material
- Introducing Vue.js
- Vue.js
- Hello Vue!
- Understanding Vue concepts
- Directives
- Components and props
- Component prop types and validation rules
- The internal state of a component
- Listening to events that have been triggered by child components
- Single File Components (SFCs)
- Similarities with Angular
- Computed properties
- Watchers
- Filters
- Lifecycle hooks
- Mixins and pure functions
- Render functions
- Testing support
- Vue developer tools
- The Vue CLI
- Bonus – creating a new project using the Vue CLI
- TypeScript support
- Dependency injection
- User interface component libraries
- Routing
- State management for modern web applications
- Summary
- Further reading
- Creating LyricsFinder with Vue.js
- What will you build?
- High-level design and technical stack
- Getting started
- Getting a MusixMatch API key
- Configuring InversifyJS
- Creating the home view
- Implementing the basic layout of the application
- Creating the search component and using Vue slots
- Handling search using the MusicService
- Creating and using the songs list component
- Creating and using the lyrics view
- Summary
- Further reading
- Diving into React, NestJS, GraphQL, and Apollo
- Revisiting LyricsFinder
- What will you build?
- High-level design and technical stack
- Getting started
- Backend – adding the necessary dependencies
- Backend – implementing the GraphQL API with a first resolver
- Backend – importing and configuring the GraphQL NestJS module
- Backend – testing the API using the GraphQL playground
- Backend – adding support for artists and lyrics
- Frontend – installing React Bootstrap
- Frontend – installing React Router
- Frontend – creating the home view skeleton
- Frontend – creating the search component
- Frontend – integrating with the backend API
- Frontend – creating and using the songs list component
- Frontend – loading lyrics and redirecting to the lyrics page
- Frontend – implementing the lyrics page
- Summary
- What's Next?
- Other Books You May Enjoy
Frontend – creating and using the songs list component
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.