The biggest part of our refactoring revolves around the introduction of the controller layer, the orchestrator of our new version.
Implementing the controller layer
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
Implementing the controller layer
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.